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)
}
},
}
