【微信小程序】

微信小程序基础

uniapp 中的生命周期

在移动端项目中，生命周期分为，页面级生命周期 和 组件级生命周期

页面级生命周期

• onInit 监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad

  `onInit`使用注意

  仅百度小程序基础库 3.260 以上支持 onInit 生命周期

• onLoad监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
• onShow监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
• onReady监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
• onHide监听页面隐藏
• onUnload监听页面卸载
• onResize监听窗口尺寸变化 (适用于App、微信小程序、快手小程序)
• onPullDownRefresh监听用户下拉动作，一般用于下拉刷新
• onReachBottom页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。

  `onReachBottom`使用注意

  可在pages.json里定义具体页面底部的触发距离onReachBottomDistance，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。

组件级生命周期

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期： 在组件中，不能使用页面级生命周期

• beforeCreate 在实例初始化之前被调用
• created在实例创建完成后被立即调用 -beforeMount在挂载开始之前被调用
• mounted挂载到实例上去之后调用。注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTick
• beforeUpdate数据更新时调用，发生在虚拟 DOM 打补丁之前
• updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
• beforeDestroy实例销毁之前调用。在这一步，实例仍然完全可用。
• destroyedVue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

uniapp 获取右上角胶囊位置

uni.getMenuButtonBoundingClientRect()函数
在小程序平台，如果原生导航栏被隐藏，仍然在右上角会有一个悬浮按钮，微信下也被称为胶囊按钮。本API用于获取小程序下该菜单按钮的布局位置信息，方便开发者布局顶部内容时避开该按钮。

onBeforeMount(() => {
    const res = uni.getMenuButtonBoundingClientRect()
    btnStyles.value = res
    if (props.isBlack) classNames.value = 'custom-btn black'
    if (props.showHome) btnStyles.value = `top:${res.top}px;width:${res.width}px;`
    else btnStyles.value = `top:${res.top}px;`
})

uniapp 获取底部安全距离和状态栏高度

uniapp提供了预置的css变量

• 获取上安全距离： env(safe-area-inset-top)
• 获取左安全距离：env(safe-area-inset-left)
• 获取右安全距离：env(safe-area-inset-right)
• 获取下安全距离：env(safe-area-inset-bottom) 可以在固定底部的盒子加下内下边距 padding-bottom: env(safe-area-inset-bottom) 避免元素被遮挡

.bottom {
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
}

自定义顶部导航栏

自定义导航栏需要注意的是：顶部存在状态栏，也就是显示信号、时间等信息的状态栏；

• 获取状态栏高度：var(–status-bar-height)
• 可以在页面的最外层的盒子加内上边距 padding-top: var(–status-bar-height)避免顶部导航栏与状态栏重叠.
• 并且需要给最外层盒子设置背景色与页面背景色一致，不然会出现状态栏的背景色和页面背景色不一致的情况；

另外uniapp 还有一些其他的css 变量

• 内容区域距离顶部的距离：var(–window-top);
• 内容区域距离底部的距离：var(–window-bottom);

获取设备信息

uni.getSystemInfo()用于获取用户手机