小程序模板網(wǎng)

微信小程序開發(fā)必備神器-Grace

發(fā)布時(shí)間:2018-05-07 15:00 所屬欄目:小程序開發(fā)教程
  1. 下載:https://github.com/wendux/grace 到本地 grace目錄
  2. 創(chuàng)建頁面時(shí)用Grace 替換小程序的 Page 方法即可。
import createPage from "grace/index.js"
createPage({
  data:{
    userInfo:{},
    canIUse:true
  }
  onLoad(){
   //直接通過$data賦值更新數(shù)據(jù)
   this.$data.canIUse=false
   //通過$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)
	})
    //返回上一頁,并傳遞數(shù)據(jù)
    this.$goBack({retValue:"8"})
   }, 
   //跨頁面?zhèn)髦? 
   $onBackData(data){
     //接收頁面返回的數(shù)據(jù),
   }  
  ...         
})

注意:Grace 所有方法和屬性命名都以“$”開始。

數(shù)據(jù)響應(yīng)式

微信小程序中數(shù)據(jù)發(fā)生變化后都要通過setData顯式更新如:

//更新單個(gè)字段
this.setData({
    userInfo: res.userInfo
 })
//更新多個(gè)字段
this.setData({
    userInfo: res.userInfo
    canIUse: false
})

這很明顯是受了React的影響,好的不學(xué)??‍,如果你用過Vue, 你應(yīng)該會(huì)覺得這看起來很不優(yōu)雅,尤其是代碼中零零散散要更新的值多的時(shí)候,代碼看起來會(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)在,你可以直接通過賦值就能更新界面了。當(dāng)然,您依舊可以使用 this.setData 來更新數(shù)據(jù),grace會(huì)自動(dòng)同步 this.$data .

注意事項(xiàng)

grace的數(shù)據(jù)響應(yīng)式原理和Vue是一樣的,(如果你熟悉Vue,可以跳過),所以,和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可以避免如下問題:

  1. 頻繁的去 setData

    為了解決這個(gè)問題,grace引入了數(shù)據(jù)變更緩存機(jī)制,下面看一個(gè)例子:

    //開始緩存數(shù)據(jù)變更
    this.$data.$cache();
    
    //接下來是n次密集的數(shù)據(jù)更新
    this.$data.name="doris"
    this.$data.userCard.no="610xxx889"
    this.$data.balance=66666
    ....
    //統(tǒng)一提交變更
    this.$data.$commit();

    在調(diào)用 $cache() 之后,所有數(shù)據(jù)的變化將會(huì)緩存起來(不會(huì)觸發(fā) setData ), 知道調(diào)用$commit 后,才會(huì)統(tǒng)一刷新,這樣即避免了頻繁調(diào)用 setData 帶來的性能消耗。

  2. 后臺(tái)態(tài)頁面進(jìn)行 setData

    當(dāng)頁面進(jìn)入后臺(tái)態(tài)(用戶不可見),不應(yīng)該繼續(xù)去進(jìn)行 setData ,后臺(tái)態(tài)頁面的渲染用戶是無法感受的,另外后臺(tái)態(tài)頁面去 setData 也會(huì)搶占前臺(tái)頁面的執(zhí)行。當(dāng)頁面進(jìn)入后臺(tái)時(shí),grace會(huì)自動(dòng)停止數(shù)據(jù)更新,當(dāng)頁面再次轉(zhuǎn)到前臺(tái)時(shí)會(huì)自動(dòng)開啟渲染。

Http

Grace通過Promise封裝了wx.request, 并支持?jǐn)r截器、請(qǐng)求配置等:

  1. Restful API

    $http.get(url, [data], [options])
    $http.post(url, data, [options])
    $http.put(url, data, [options])
    $http.delete(url,[data],[options])
    $http.patch(url,[data],[options])
  2. 多個(gè)并發(fā)請(qǐng)求

    var getUserRecords=()=>{
      return this.$http.get('/user/133/records');
    }
    
    var getUserProjects=()=>{
      return this.$http.get('/user/133/projects');
    }
    
    this.$http.all([getUserRecords(), getUserProjects()])
      .then(this.$http.spread(function (records, projects) {
        // Both requests are now complete
      }))
      .catch(function(error){
        console.log(error)
      })
  3. 攔截器

    // Add a request interceptor
    this.$http.interceptors.request.use((config,promise)=>{
        // Do something before request is sent
        config.headers["X-Tag"]="grace";
        // Complete the request with custom data
        // promise.resolve("fake data")
        return config;
    })
    
    // Add a response interceptor
    this.$http.interceptors.response.use(
        (response,promise) => {
            // Do something with response data .
            // Just return the data field of response
            return response.data
        },
        (err,promise) => {
          // Do something with response error
            //promise.resolve("ssss")
        }
    )

Grace使用的http請(qǐng)求庫是 FLY , $http 是 FLY 的一個(gè)實(shí)例,詳情可以參照其官網(wǎng),如果您想創(chuàng)建新的 FLY 示例:

var newHttp=this.$creatHttpClient();

事件總線

全局事件總線可以在全局(跨頁面)觸發(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ì)列,如果沒有傳handler,則清空該事件的監(jiān)聽者隊(duì)列。

跨頁面?zhèn)髦?/h2>

在小程序中打開新頁面時(shí)可以通過url的query向新頁面?zhèn)髦?,這很容易,如:

wx.navigateTo({
  //傳遞id,在新頁面onLoad中獲取
  url: 'test?id=1'
})

但是,新頁面關(guān)閉時(shí)如何向前一個(gè)頁面返回?cái)?shù)據(jù)? 小程序中沒有提供直接的方法,grace給所有頁面添加了一個(gè)回調(diào),用于接收頁面回傳的數(shù)據(jù),如下:

createPage({
  data:{}
  $onBackData(data){
   //接收頁面返回的數(shù)據(jù),
  }  
  ...         
})

上面的頁面我們記為A, 假設(shè)你打開了一個(gè)新頁面B, 你需要在B中選擇一些信息后回傳給A,那么你在B中應(yīng)該:

createPage({
  data: {},
  bindViewTap(){
    //返回上一個(gè)頁面,并回傳一些數(shù)據(jù)
    this.$goBack({xxx:5});
  }
  ...
}

$goBack([data],[delta])

關(guān)閉當(dāng)前頁面,返回上一頁面或多級(jí)頁面,如果存在 data , 則會(huì)調(diào)用返回到的頁面的 $onBackData 回調(diào),若 data 不存在,則不會(huì)回調(diào) $onBackData .

delta 意義同 wx.navigateBack 參數(shù)的delta, 表示回退的頁面數(shù),默認(rèn)為1(上一頁),如果如果 delta 大于現(xiàn)有頁面數(shù),則返回到首頁。



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24290.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢