uniapp 常用

1, 判断网络类型

    onReady() {
        // 判断网络类型
        uni.getNetworkType({
            success: res => {
                if (res.networkType == '2g' || res.networkType == '3g' || res.networkType == '4g') {
                    console.log('当前使用非WIFI环境，请注意流量使用');
                } else if (res.networkType == 'none') {
                    console.log('没有网络');
                }
            }
        });
    },

2, uniapp app使用分包
(1) manifest.json中启用分包
(2) pages.json文件中的配置

//manifest.json
"app-plus": {
        // app开启分包
        "optimization": {
            "subPackages": true
        },
        "runmode": "liberate", // 开启分包优化后，必须配置资源释放模式
}
//pages.json文件
"subPackages": [{
        "root": "pages/page",
        "pages": [{
                "path": "search",
                "style": {
                    "navigationStyle": "custom"
                }
            }
        ]
    }],

3, 滚动到头部,渐变显示元素

//html
    <view  :style="{ top: wanlsys.height + 'px', opacity: headerOpacity }">
            固定元素    
    </view>



//js
        onLoad(option) {
            // 计算页面尺寸
            let sys = this.$wanlshop.wanlsys();
            this.headTop = sys.top;
            this.headHeight = sys.height;
            this.windowHeight = sys.windowHeight;
            // 加载 Api
            if (option.id) {
                this.loadData(option);
            } else {
                this.loadData({
                    id: null
                });
            }
        },
        onPageScroll(e) {
            //导航栏渐变
            let tmpY = 150;
            e.scrollTop = e.scrollTop > tmpY ? 150 : e.scrollTop; //如果当前高度大于150则150否则当前高度
            this.headerOpacity = e.scrollTop * (1 / tmpY); //$headerOpacity 赋值当前高度x（1÷150）
        },

4, 监听页面是横屏还是竖屏

//uni.getSystemInfo 可以获取设备宽高,如果res.windowWidth > res.windowHeight则为横屏
//uni.onWindowResize,用户每旋转一次屏幕就会触发里面的onShow钩子，因此在页面显示或横竖屏变化都会触发这函数，来判断是否是横竖屏；
//res.deviceOrientation 等于landscape 的话是竖屏，portrait则是横屏
//全局横屏: pages.json 
"globalStyle": {
        "pageOrientation": "auto"
    },

//单页面横屏: 需要横屏的页面
onLoad(){
// #ifdef APP-PLUS
       plus.screen.lockOrientation('default'); 
    // #endif
onUnload(){
// #ifdef APP-PLUS
      plus.screen.lockOrientation('portrait-primary'); 
    // #endif
}
}

5.设置原生tabbar徽标

uni.setTabBarBadge({
            index: 3,
            text:'99+'
        })
//注意这个方法仅在tabbar页面生效,可以将数据存在app.vue 的globalData内,全局都可用

页面须多次获取url带的参数,但是onLoad中只能接收一次,我们可以存storage内,页面销毁时再清空(适用情况,多页面公用一个tabbar,切换时传值就会丢掉)


//方法一:h5 app都适用
onLoad(opt) {
            if (opt.bid) {
                this.bid = opt.bid
                uni.setStorageSync('bid', opt.bid) 
            } else {
                this.bid = uni.getStorageSync('bid')
            }


        },
//销毁时清空
        onUnload() {
            console.log('onUnload')
            uni.removeStorageSync('bid');
        },

方法二: 
        onShow() {
            // hash路由获取方式,这里两种路由方式是指manifast.json中web配置中配置的路由模式
            const w = location.hash.indexOf('?');
            const paraString = location.hash.substring(w + 1)
            
            // histery路由用这个
            // let paraString = location.search;
            let paras = paraString.split("=");
            this.bid = paras[1]

        },

7 去除默认nav栏的返回按钮

//在页面的mounted生命周期设置
        mounted(){
            var a = document.getElementsByClassName('uni-page-head-hd')[0]
            a.style.display = 'none';
        },

8 app监测更新版本

//首先获取后台版本号,与前端参数对比看是否更新,根据情况让用户选择是否更新即可
//在需要监测的页面,或app.vue都行,app.vue生命周期略有改动
        async onLoad() {
//判断是否为app
            // #ifdef APP-PLUS 
      //判断手机系统是否为android
            if(uni.getSystemInfoSync().platform !== 'ios'){
                this.onGetUpdate()
            }
            // #endif
        },
        methods: {
            downLoad() {
                const downLoadTask = uni.downloadFile({
                    url: 'https://www.xxx.cn/rongchengbang.apk',//apk下载链接
                    success:(res) => {
                        // console.log(res,"res-----")
                        if (res.statusCode == 200) {
                            uni.showToast({
                                title:'安装包下载成功,即将安装',
                                icon:"success"
                            })
                            plus.runtime.install(res.tempFilePath)  //安装apk
                        } else {
                                                console.log('安装失败')
                        }
                    }
                })
                this.show = false
                this.showToast('后台下载中...')
               //缺点是看不到进度条,下载好后会自动弹出安装
                
            },
            // 获取后台值看是否热更新,这个就看自己项目接口怎么获取数据了
            async onGetUpdate() {
                const res = await getUpdate({})
                const {
                    code,
                    data,
                    msg
                } = res.data
                // console.log(res, 'ssss',this.versionNumber,data)
                if (code == 1) {
                    if (this.versionNumber != data) {
                        this.show = true  //下载提示模态框显示,确认按钮绑定downLoad事件即可,这里就不写了
                    }
                } else {
                    this.showToast(msg)
                }
            },
}

uniapp 常用

推荐阅读更多精彩内容