安徽网站排名优化公司做网站
微信小程序基础
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挂载到实例上去之后调用。注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickbeforeUpdate数据更新时调用，发生在虚拟 DOM 打补丁之前updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子beforeDestroy实例销毁之前调用。在这一步，实例仍然完全可用。destroyedVue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
uniapp 获取右上角胶囊位置
uni.getMenuButtonBoundingClientRect()函数
在小程序平台，如果原生导航栏被隐藏，仍然在右上角会有一个悬浮按钮，微信下也被称为胶囊按钮。本API用于获取小程序下该菜单按钮的布局位置信息，方便开发者布局顶部内容时避开该按钮。
onBeforeMount(() => {const res = uni.getMenuButtonBoundingClientRect()btnStyles.value = resif (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()用于获取用户手机