1, 判斷網(wǎng)絡(luò)類型
onReady() {
// 判斷網(wǎng)絡(luò)類型
uni.getNetworkType({
success: res => {
if (res.networkType == '2g' || res.networkType == '3g' || res.networkType == '4g') {
console.log('當(dāng)前使用非WIFI環(huán)境遥倦，請注意流量使用');
} else if (res.networkType == 'none') {
console.log('沒有網(wǎng)絡(luò)');
}
}
});
},
2, uniapp app使用分包
(1) manifest.json中啟用分包
(2) pages.json文件中的配置
//manifest.json
"app-plus": {
// app開啟分包
"optimization": {
"subPackages": true
},
"runmode": "liberate", // 開啟分包優(yōu)化后，必須配置資源釋放模式
}
//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) {
//導(dǎo)航欄漸變
let tmpY = 150;
e.scrollTop = e.scrollTop > tmpY ? 150 : e.scrollTop; //如果當(dāng)前高度大于150則150否則當(dāng)前高度
this.headerOpacity = e.scrollTop * (1 / tmpY); //$headerOpacity 賦值當(dāng)前高度x（1÷150）
},
4, 監(jiān)聽頁面是橫屏還是豎屏
//uni.getSystemInfo 可以獲取設(shè)備寬高,如果res.windowWidth > res.windowHeight則為橫屏
//uni.onWindowResize,用戶每旋轉(zhuǎn)一次屏幕就會觸發(fā)里面的onShow鉤子讼载，因此在頁面顯示或橫豎屏變化都會觸發(fā)這函數(shù)躏鱼，來判斷是否是橫豎屏；
//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.設(shè)置原生tabbar徽標(biāo)
uni.setTabBarBadge({
index: 3,
text:'99+'
})
//注意這個方法僅在tabbar頁面生效,可以將數(shù)據(jù)存在app.vue 的globalData內(nèi),全局都可用
- 頁面須多次獲取url帶的參數(shù),但是onLoad中只能接收一次,我們可以存storage內(nèi),頁面銷毀時再清空(適用情況,多頁面公用一個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 去除默認(rèn)nav欄的返回按鈕
//在頁面的mounted生命周期設(shè)置
mounted(){
var a = document.getElementsByClassName('uni-page-head-hd')[0]
a.style.display = 'none';
},
8 app監(jiān)測更新版本
//首先獲取后臺版本號,與前端參數(shù)對比看是否更新,根據(jù)情況讓用戶選擇是否更新即可
//在需要監(jiān)測的頁面,或app.vue都行,app.vue生命周期略有改動
async onLoad() {
//判斷是否為app
// #ifdef APP-PLUS
//判斷手機(jī)系統(tǒng)是否為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('后臺下載中...')
//缺點(diǎn)是看不到進(jìn)度條,下載好后會自動彈出安裝
},
// 獲取后臺值看是否熱更新,這個就看自己項(xiàng)目接口怎么獲取數(shù)據(jù)了
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 //下載提示模態(tài)框顯示,確認(rèn)按鈕綁定downLoad事件即可,這里就不寫了
}
} else {
this.showToast(msg)
}
},
}
