qq_42888067的博客

在components中新建一个文件夹tabBar，在其中构建组件tabBar。在需要展示tabBar的页面引入components中的tabBar文件。

使用flex布局，将顶部和底部设置为固定高度，中间main区域设置为flex:1占据除顶部和底部以外的全部内容。

小程序的生命周期有三种：应用级生命周期，页面级生命周期以及组件生命周期。

出现这种现象的原因是项目默认开启了Skyline渲染模式，因为Skyline渲染模式不支持原生导航栏，所以在json文件中设置的导航栏失效，文字就会向上移动，如果想要使用原生的导航栏，可以将app.json文件中的下图所展示的两个内容去掉，保存后重新编译即可。

1.底部安全距离全面屏手机与非全面屏手机的不兼容性主要就是由于底部按钮和选项卡与底部黑线重叠，而安全区域就是指的不受圆角、齐刘海以及小黑条影响的部分。底部安全距离可以使用使用微信官方API：getSystemInfo()中的safeArea对象进行适配。该API的具体使用详情链接：[getSystemInfoSync]在app.js中可以通过计算得到底部安全距离的高度：// app.jsApp({ onLaunch() { const {safeArea:{top,height},