一 js部分:
1.promise方式的封裝函數(shù)
//1.想要執(zhí)行完一個函數(shù)之后再傳入一個回調(diào)函數(shù)
getData(callback = false){
if(typeof callback === 'function'){
callback()
}
}
//使用
this.getData(()=>{
console.log('執(zhí)行回調(diào)')
})
//2.promise風(fēng)格封裝
requestTest(options){
return new Promise((res,rej)=>{
uni.request({
...options,
success:(data)=>{
//成功執(zhí)行res
res(data)
},
fail:(err)=>{
//失敗執(zhí)行rej
rej(err)
}
})
})
}
//使用
this.reqyestTest({
url:this.url,
method:'GET',
token:true
}).then(res=>{
//這里的res是上面success里res(data)返回回來的data數(shù)據(jù)
console.log(res)
}).catch(err=>{
//這里的err是上面fail里rej(err)返回的err信息
console.log(err)
})
//3.當(dāng)需要使用幾個promise函數(shù)的時候就頭疼了，代碼嵌套十分嚴(yán)重 這時候可以使用async/await
requestTest(options){
return new Promise((res,rej)=>{
uni.request({
...options,
success:(data)=>{
//成功執(zhí)行res
res(data)
},
fail:(err)=>{
//失敗執(zhí)行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
//方式一 直接復(fù)制
// 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 解構(gòu)賦值
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.復(fù)制一個新列表 防止引用賦值 使用拓展字符串 以后凡是使用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
}
//相當(dāng)于 return{
// key:value
// }
}
5.判斷是否為數(shù)組
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.數(shù)組的遍歷與過濾
//1. forEach 直接修改原素組里的值
let arr = [1, 2,3, 4];
let r1=arr.forEach(v=>{
return v+=1;
});
// arr= [2,3,4,5]
//2. map 用于對數(shù)組或?qū)ο筮M(jìn)行處理,并返回處理之后的數(shù)組
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 用于篩選出符合要求的數(shù)據(jù),并返回該數(shù)據(jù)集合 以數(shù)組形式返回滿足條件（判斷結(jié)果為true）
//的值。如果都不滿足，則返回一個空數(shù)組
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 數(shù)組中的每一個元素都滿足條件才返回true。有一個不滿足，就返回false并停止尋找
//與some相反
8.異步更新隊列
//以下摘自官方文檔
/*Vue 在更新 DOM 時是異步執(zhí)行的。只要偵聽到數(shù)據(jù)變化，Vue 將開啟一個隊列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更。例如，當(dāng)你設(shè)置 vm.someData = 'new value'，該組件不會立即重新渲染。當(dāng)刷新隊列時，組件會在下一個事件循環(huán)“tick”中更新。多數(shù)情況我們不需要關(guān)心這個過程，但是如果你想基于更新后的 DOM 狀態(tài)來做點什么，這就可能會有些棘手。雖然 Vue.js 通常鼓勵開發(fā)人員使用“數(shù)據(jù)驅(qū)動”的方式思考，避免直接接觸 DOM，但是有時我們必須要這么做。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM，可以在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback)。這樣回調(diào)函數(shù)將在 DOM 更新完成后被調(diào)用。*/
//意思就是vue在更新視圖層得數(shù)據(jù)時是異步得，可是有時候我們在代碼中想要等待數(shù)據(jù)完全渲染上去dom節(jié)點之后再進(jìn)行獲取節(jié)點信息操作。比如使用selectorQuery.select(selector) 等相關(guān)api時，如果直接使用有時候會獲取不到正確的數(shù)據(jù)，此時可以通過this.$nextTick(callback)的方式在回調(diào)函數(shù)里面進(jìn)行操作dom節(jié)點
this.$nextTick(()=>{
let view = uni.createSelectorQuery().in(this).select(".test");
view.fields({
size: true,
scrollOffset: true
}, data => {
console.log("得到節(jié)點信息" + JSON.stringify(data));
console.log("節(jié)點的寬為" + data.width);
}).exec();
})
//或者
await this.$nextTick()
let view = uni.createSelectorQuery().in(this).select(".test");
view.fields({
size: true,
scrollOffset: true
}, data => {
console.log("得到節(jié)點信息" + JSON.stringify(data));
console.log("節(jié)點的寬為" + data.width);
}).exec();
封裝全局函數(shù)
//main.js
//權(quán)限跳轉(zhuǎn) 跳轉(zhuǎn)到該頁面前驗證是否登錄
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注入 有的時候有一部分代碼需要在多個頁面重復(fù)使用到，這時候就該使用mixin注入了
//loading.js里的代碼
export default {
// 所在頁面沒有beforeReady屬性就注入到所在頁面的data中,若有該屬性則優(yōu)先使用頁面中定義的那個
data(){
return{
beforeReady:true
}
},
//所在頁面有onReady生命周期就合并
onReady() {
this.beforeReady = false
}
}
//其他頁面 通過import導(dǎo)入進(jìn)來，再使用mixins注冊一下就能注入該頁面了
<script>
import loading from "@/common/mixin/loading.js"
export default{
mixins:[loading]
}
</script>
