一 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>
