uniapp架構開發技巧

一 js部分:

1.promise方式的封裝函數

//1.想要執行完一個函數之後再傳入一個回調函數
getData(callback = false){
if(typeof callback === 'function'){
callback()
}
}

//使用
this.getData(()=>{
console.log('執行回調')
})


//2.promise風格封裝
requestTest(options){
return new Promise((res,rej)=>{
uni.request({
...options,
success:(data)=>{
//成功執行res
res(data)
},
fail:(err)=>{
//失敗執行rej
rej(err)
}
})
})
}

//使用
this.reqyestTest({
url:this.url,
method:'GET',
token:true
}).then(res=>{
//這裡的res是上面success裡res(data)傳回回來的data資料
console.log(res)
}).catch(err=>{
//這裡的err是上面fail裡rej(err)傳回的err資訊
console.log(err)
})


//3.當需要使用幾個promise函數的時候就頭疼了，代碼嵌套十分嚴重 這時候可以使用async/await
requestTest(options){
return new Promise((res,rej)=>{
uni.request({
...options,
success:(data)=>{
//成功執行res
res(data)
},
fail:(err)=>{
//失敗執行rej
rej(err)
}
})
})
}

//使用
async __init(){
let [error,result] = await this.requestTest({
url: 'http://ceshi3.dishait.cn/api/index_category/data',
method: 'GET'
})

//正确
if(result.code===200){
console.log(result)
}

//錯誤
if(error){
return uni.showToast({
title: error.errMsg, //錯誤資訊
icon:'none'
});

}
}
           

2.替換清單裡的某個對象，使用拓展字元串或者$set

//方式一 直接複制
// let item = this.tableData[this.editIndex]
// item.name = this.form.name
// item.order = this.form.order
// item.status = this.form.status
// item.type = this.form.type
// item.value = this.form.value

//方式2 解構指派
let item = {
...this.form,
value_list:this.value_list
}

this.tableData.splice(this.editIndex,1,item)

//方式3 $set 官方文檔 vm.$set(vm.items, indexOfItem, newValue)

this.$set(this.tabbleData,this.editIndex,item)
           

3.複制一個新清單 防止引用指派 使用拓展字元串 以後凡是使用es5的concact就換成es6的拓展字元串

let data = res.map(v=>{
return {
id:v.id,
url:v.url
}
})

let list = []
if(index===-1){
list = [...this.banners,...data]
}else{
list = [...this.banners]
list[index] = data[0]
}
           

4.把一個值作為對象的key

let obj = this.screen.list[this.screen.currentIndex]
	let value = obj.status === 1 ? 'asc':'desc'
    return {
		[obj.key]:value
	}
//相當于 return{
        // 	key:value
        // }
}           

5.判斷是否為數組

if(Array.isArray(this.couponUserItem) && this.couponUserItem.coupon && this.couponUserItem.coupon) return this.couponUserItem.coupon.value           

6.對象的周遊

for(let key in this.testObj){
this.testObj[key].value = '指派'
}           

7.數組的周遊與過濾

//1. forEach 直接修改原素組裡的值
let arr = [1, 2,3, 4];
let r1=arr.forEach(v=>{
return v+=1;
});

// arr= [2,3,4,5]


//2. map 用于對數組或對象進行處理,并傳回處理之後的數組
let arr = [1,2,3,4];
let brr = arr.map(v=>{
return v<=2
})

//也可以簡寫為
let brr = arr.map(v=> v<=2)

//brr = [1,2]

//3. filter 用于篩選出符合要求的資料,并傳回該資料集合 以數組形式傳回滿足條件（判斷結果為true）
//的值。如果都不滿足，則傳回一個空數組

let arr = [1,2,3,4];
let brr = arr.filter(v=>{
if (item % 2 !== 0) {
return item;
}
})

//brr = [1,3]


//4.some 有一個滿足，就傳回true并停止周遊。都不滿足才傳回false
let arr = [{id:1,value:'a'},{id:2,value:'b'},{id:3,value:'c'},{id:4,value:'d'}]
let brr = arr.some(v=>{
return arr.id <= 2
})

//brr = [{id:1,value:'a'},{id:2,value:'b'}]

//5.every 數組中的每一個元素都滿足條件才傳回true。有一個不滿足，就傳回false并停止尋找
//與some相反
           

8.異步更新隊列

//以下摘自官方文檔

/*Vue 在更新 DOM 時是異步執行的。隻要偵聽到資料變化，Vue 将開啟一個隊列，并緩沖在同一事件循環中發生的所有資料變更。例如，當你設定 vm.someData = 'new value'，該元件不會立即重新渲染。當重新整理隊列時，元件會在下一個事件循環“tick”中更新。多數情況我們不需要關心這個過程，但是如果你想基于更新後的 DOM 狀态來做點什麼，這就可能會有些棘手。雖然 Vue.js 通常鼓勵開發人員使用“資料驅動”的方式思考，避免直接接觸 DOM，但是有時我們必須要這麼做。為了在資料變化之後等待 Vue 完成更新 DOM，可以在資料變化之後立即使用 Vue.nextTick(callback)。這樣回調函數将在 DOM 更新完成後被調用。*/

//意思就是vue在更新視圖層得資料時是異步得，可是有時候我們在代碼中想要等待資料完全渲染上去dom節點之後再進行擷取節點資訊操作。比如使用selectorQuery.select(selector) 等相關api時，如果直接使用有時候會擷取不到正确的資料，此時可以通過this.$nextTick(callback)的方式在回調函數裡面進行操作dom節點

this.$nextTick(()=>{
let view = uni.createSelectorQuery().in(this).select(".test");

view.fields({
size: true,
scrollOffset: true
}, data => {
console.log("得到節點資訊" + JSON.stringify(data));
console.log("節點的寬為" + data.width);
}).exec();
})

//或者

await this.$nextTick()
let view = uni.createSelectorQuery().in(this).select(".test");

view.fields({
size: true,
scrollOffset: true
}, data => {
console.log("得到節點資訊" + JSON.stringify(data));
console.log("節點的寬為" + data.width);
}).exec();
           

封裝全局函數

//main.js


//權限跳轉 跳轉到該頁面前驗證是否登入
Vue.prototype.navigateTo = (options)=>{
//判斷使用者是否登入
if(!store.state.user.loginStatus){
uni.showToast({
title: '請先登入',
icon:'none'
});

return uni.navigateTo({
url: '/pages/login/login'
});
}

//通過驗證
uni.navigateTo(options);
}
           

mixin注入 有的時候有一部分代碼需要在多個頁面重複使用到，這時候就該使用mixin注入了

//loading.js裡的代碼

export default {
// 所在頁面沒有beforeReady屬性就注入到所在頁面的data中,若有該屬性則優先使用頁面中定義的那個
data(){
return{
beforeReady:true
}
},

//所在頁面有onReady生命周期就合并
onReady() {
this.beforeReady = false
}
}



//其他頁面 通過import導入進來，再使用mixins注冊一下就能注入該頁面了

<script>
import loading from "@/common/mixin/loading.js"

export default{
mixins:[loading]
}
</script>