uniapp常用api总结

一、常用生命周期，uni事件流

　　1.onPageScroll(e){}滚动条滚动事件，触发条件：存在滚动条，app可能由于样式问题无法触发滚动事件，设置页面的高度时应设置，min-height:100vh,overflow-y:auto;设置定高可能会导致滚动事件无法触发。

　　例如：滚动时改变顶部状态栏的状态

onPageScroll(e) {
            if(e.scrollTop>0){
                this.upHeader=true
            }else{
                this.upHeader=false
            }
            this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
            this.headerTop = e.scrollTop >= 0 ? null : 0;
            this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + "px";
        },

　　2.onReachBottom（）{}滚动触底事件，应用场景：下拉加载更多

　　3.onLoad页面加载事件，可用于初始化操作，跳转页面未销毁时再次返回页面事件不触发

　　4.onshow页面显示事件，每次页面显示时触发

app.vue中常用的应用周期

　　1.onLaunch：当uni-app 初始化完成时触发（全局只触发一次）应用场景：

　　　1.1获取设备信息：

uni.getSystemInfo({
                    success: function(e) {
                        Vue.prototype.statusBar = e.statusBarHeight;
                        Vue.prototype.screenHeight=e.screenHeight;
                        if(e.uniPlatform=='app'){
                            Vue.prototype.isApp=true;
                        }else{
                            Vue.prototype.isApp=false;
                        }
                        console.log(e,e.statusBarHeight,e.screenHeight,e.uniPlatform,'设备')
                        // #ifndef MP
                        if (e.platform == 'android') {
                                Vue.prototype.customBar = e.statusBarHeight + 50
                           } else {
                                Vue.prototype.customBar = e.statusBarHeight + 45
                            }
                            // #endif
        
                            // #ifdef MP-WEIXIN
                            let custom = wx.getMenuButtonBoundingClientRect()
                            console.log(custom)
                            Vue.prototype.customBar = custom.bottom + custom.top - e.statusBarHeight
                            // #endif
        
                            // #ifdef MP-ALIPAY
                            Vue.prototype.customBar = e.statusBarHeight + e.titleBarHeight
                            // #endif
                        }
                    })

　　1.2应用升级提示

　5.拦截器addInterceptor

参数名	类型	必填	默认值	说明	平台差异说明
invoke	Function	否		拦截前触发
success	Function	否		成功回调拦截
fail	Function	否		失败回调拦截
complete	Function	否		完成回调拦截

　应用场景：1.路由跳转拦截；2.网络请求拦截...

 　6.数据缓存

uni.getStorage异步缓存，对缓存数据应用和处理应放在success，fail回调函数里；

uni.getStorageSync(KEY)同步缓存，

　　7.位置信息

　　uni.getLocation获取经纬度等位置信息

　　8.uniapp自定义头部时css实现避免覆盖时间栏

.status_bar {height: var(--status-bar-height);width:100%;}；

 

/* #ifdef APP-PLUS */
padding-top: var(--status-bar-height);

/* #endif */

　　9.条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

**写法：**以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

• #ifdef：if defined 仅在某平台存在
• #ifndef：if not defined 除了某平台均存在
• 传送门：https://uniapp.dcloud.net.cn/tutorial/platform.html

二、uniapp开发要兼容微信小程序时 的主意事项

1.标签动态样式中不能使用，模板字符串或者加号拼接