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è)。 |