微信小程序開發(fā)必備神器-Grace
import createPage from "grace/index.js"
createPage({
data:{
userInfo:{},
canIUse:true
}
onLoad(){
//直接通過(guò)$data賦值更新數(shù)據(jù)
this.$data.canIUse=false
//通過(guò)$http發(fā)起網(wǎng)絡(luò)請(qǐng)求
this.$http.post("http://www.dtworkroom.com/doris/1/2.0.0/test",{xx:7}).then((d)=>{
console.log(d)
}).catch(err=>{
console.log(err.status,err.message)
})
//全局事件總線-監(jiān)聽事件
this.$bus.$on("enventName",(data)=>{
console.log(data)
})
//返回上一頁(yè)，并傳遞數(shù)據(jù)
this.$goBack({retValue:"8"})
},
//跨頁(yè)面?zhèn)髦?
$onBackData(data){
//接收頁(yè)面返回的數(shù)據(jù)，
}
...
})
注意：Grace 所有方法和屬性命名都以“$”開始。數(shù)據(jù)響應(yīng)式微信小程序中數(shù)據(jù)發(fā)生變化后都要通過(guò)setData顯式更新如：
//更新單個(gè)字段
this.setData({
userInfo: res.userInfo
})
//更新多個(gè)字段
this.setData({
userInfo: res.userInfo
canIUse: false
})
這很明顯是受了React的影響，好的不學(xué)??，如果你用過(guò)Vue, 你應(yīng)該會(huì)覺(jué)得這看起來(lái)很不優(yōu)雅，尤其是代碼中零零散散要更新的值多的時(shí)候，代碼看起來(lái)會(huì)很冗余，還有，有時(shí)為了改變一個(gè)變量，也得調(diào)一次 setData . 現(xiàn)在，有了Grace， 它會(huì)讓你的代碼變的優(yōu)雅，你可以像使用Vue一樣更新數(shù)據(jù)：
this.$data.userInfo=res.userInfo;
//更新多個(gè)字段，并非重新賦值
this.$data={
userInfo: res.userInfo
canIUse: false
}
現(xiàn)在，你可以直接通過(guò)賦值就能更新界面了。當(dāng)然，您依舊可以使用 this.setData 來(lái)更新數(shù)據(jù)，grace會(huì)自動(dòng)同步 this.$data . 注意事項(xiàng)grace的數(shù)據(jù)響應(yīng)式原理和Vue是一樣的，（如果你熟悉Vue，可以跳過(guò)），所以，和Vue一樣，由于 JavaScript 的限制，grace不能檢測(cè)到數(shù)組下標(biāo)賦值和對(duì)象添加或刪除屬性。但grace提供了 $set(target,key,value) 方法, 詳情請(qǐng)移步： github.com/wendux/grac… 。 數(shù)據(jù)變更緩存根據(jù)微信小程序官方優(yōu)化建議，grace可以避免如下問(wèn)題：
HttpGrace通過(guò)Promise封裝了wx.request， 并支持?jǐn)r截器、請(qǐng)求配置等：
Grace使用的http請(qǐng)求庫(kù)是 FLY , $http 是 FLY 的一個(gè)實(shí)例，詳情可以參照其官網(wǎng)，如果您想創(chuàng)建新的 FLY 示例： var newHttp=this.$creatHttpClient(); 事件總線全局事件總線可以在全局（跨頁(yè)面）觸發(fā)、監(jiān)聽事件。 $on(eventName,handler)監(jiān)聽事件
this.$bus.$on("enventName",(arg1,arg2)=>{
//事件處理器參數(shù)為$emit觸發(fā)事件時(shí)傳遞的參數(shù)
console.log(arg1)
})
$emit(eventName,[…arguments])觸發(fā)事件
this.$bus.$emit("enventName", 1,2)
$off(eventName,[handler])取消監(jiān)聽
this.$bus.$off("eventName",cb)
當(dāng)提供hanlder時(shí)，只將該hanlder移出監(jiān)聽者隊(duì)列，如果沒(méi)有傳handler,則清空該事件的監(jiān)聽者隊(duì)列。 跨頁(yè)面?zhèn)髦?/h2>在小程序中打開新頁(yè)面時(shí)可以通過(guò)url的query向新頁(yè)面?zhèn)髦?，這很容易，如：
wx.navigateTo({
//傳遞id,在新頁(yè)面onLoad中獲取
url: 'test?id=1'
})
但是，新頁(yè)面關(guān)閉時(shí)如何向前一個(gè)頁(yè)面返回?cái)?shù)據(jù)？ 小程序中沒(méi)有提供直接的方法，grace給所有頁(yè)面添加了一個(gè)回調(diào)，用于接收頁(yè)面回傳的數(shù)據(jù)，如下：
createPage({
data:{}
$onBackData(data){
//接收頁(yè)面返回的數(shù)據(jù)，
}
...
})
上面的頁(yè)面我們記為A, 假設(shè)你打開了一個(gè)新頁(yè)面B, 你需要在B中選擇一些信息后回傳給A，那么你在B中應(yīng)該：
createPage({
data: {},
bindViewTap(){
//返回上一個(gè)頁(yè)面，并回傳一些數(shù)據(jù)
this.$goBack({xxx:5});
}
...
}
$goBack([data],[delta])關(guān)閉當(dāng)前頁(yè)面，返回上一頁(yè)面或多級(jí)頁(yè)面，如果存在 data , 則會(huì)調(diào)用返回到的頁(yè)面的 $onBackData 回調(diào)，若 data 不存在，則不會(huì)回調(diào) $onBackData . delta 意義同 wx.navigateBack 參數(shù)的delta, 表示回退的頁(yè)面數(shù)，默認(rèn)為1（上一頁(yè)），如果如果 delta 大于現(xiàn)有頁(yè)面數(shù)，則返回到首頁(yè)。 |
