摘要：一個(gè)精巧易用的微信小程序開發(fā)輔助庫特點(diǎn)輕量小巧上手簡(jiǎn)單支持和一樣優(yōu)雅的數(shù)據(jù)響應(yīng)式支持?jǐn)?shù)據(jù)自動(dòng)更新更改緩存批量更新強(qiáng)大的網(wǎng)絡(luò)功能支持全局事件總線支持跨頁面?zhèn)髦抵С质纠こ淘谠创a目錄下用微信小程序開發(fā)工具打開即可。

一個(gè)精巧、易用的微信小程序開發(fā)輔助庫

Github: https://github.com/wendux/grace

輕量、小巧、上手簡(jiǎn)單

支持和Vue一樣優(yōu)雅的數(shù)據(jù)響應(yīng)式

支持?jǐn)?shù)據(jù)自動(dòng)更新、更改緩存、批量更新

強(qiáng)大的網(wǎng)絡(luò)功能

支持全局事件總線

支持跨頁面?zhèn)髦?/p>

支持mixins

示例工程在源碼 “quickstart-grace-demo”目錄下, 用微信小程序開發(fā)工具打開即可。

將 https://github.com/wendux/grace 工程中src目錄中所有文件拷貝到小程序根目錄下的grace目錄

創(chuàng)建頁面時(shí)用grace.page 替換 Page 即可。

import grace from "../../grace/index.js"
grace.page({
  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ù)，
  }
  ...
})

如果是注冊(cè)組件（component）的話, 只需用 grace.component 替換 Component 構(gòu)造器即可：

// grace.component 替換 Component
grace.component({
  properties: {
  },
  data: {
     text:"我是自定義組件",
     times:1
  },
  methods: {
    onTap(){
      //賦值更新
      this.$data.text="自定義組件點(diǎn)擊 +"+this.$data.times++
    }
  }
}

注意：Grace 注入到實(shí)例中的所有方法和屬性命名都以“$”開始。

微信小程序中數(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.

grace的數(shù)據(jù)響應(yīng)式原理和Vue是一樣的，（如果你熟悉Vue，可以跳過）對(duì)于數(shù)組：

grace包含一組觀察數(shù)組的變異方法，所以它們也將會(huì)觸發(fā)視圖更新。這些方法如下：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

變異方法 (mutation method)，顧名思義，會(huì)改變被這些方法調(diào)用的原始數(shù)組。相比之下，也有非變異 (non-mutating method) 方法，例如：filter(), concat() 和 slice() 。這些不會(huì)改變?cè)紨?shù)組，但總是返回一個(gè)新數(shù)組。當(dāng)使用非變異方法時(shí)，可以用新數(shù)組替換舊數(shù)組：

this.$data.items = this.$data.items.filter(function (item) {
  return item.message.match(/Foo/)
})

由于 JavaScript 的限制，grace不能檢測(cè)以下變動(dòng)的數(shù)組：

當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如：this.$data.items[indexOfItem] = newValue

當(dāng)你修改數(shù)組的長度時(shí)，例如：this.$data.items.length = newLength

為了解決第一類問題，以下兩種方式都可以實(shí)現(xiàn)和 this.$data.items[indexOfItem] = newValue 相同的效果，同時(shí)也將觸發(fā)狀態(tài)更新：

this.$data.$set(example1.items, indexOfItem, newValue)

// Array.prototype.splice
this.$data.items.splice(indexOfItem, 1, newValue)

為了解決第二類問題，你可以使用 splice：

this.$data.items.splice(newLength)

還是由于 JavaScript 的限制，grace 不能檢測(cè)對(duì)象屬性的添加或刪除：

grace.page({
  data: {
    a: 1
  }
  onLoad(){
   //a現(xiàn)在是響應(yīng)式的
   this.$data.a=2;
   //b不是響應(yīng)式的
   this.$data.b = 2
  }
})

對(duì)于已經(jīng)創(chuàng)建的實(shí)例，grace 不能動(dòng)態(tài)添加根級(jí)別的響應(yīng)式屬性。但是，可以使用 $data.$set(object, key, value) 方法向嵌套對(duì)象添加響應(yīng)式屬性。例如：

this.$data.$set(this.$data, "b", 2)

根據(jù)微信小程序官方優(yōu)化建議，grace可以避免如下問題：

頻繁的去 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帶來的性能消耗。

后臺(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)開啟渲染。

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

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])

多個(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)
  })

攔截器

// 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 實(shí)例：

var newHttp=grace.createHttpClient();

注意：grace創(chuàng)建頁面時(shí)，所有頁面的$http都是同一個(gè)FLY 實(shí)例，所以對(duì)this.$http的配置，會(huì)在全局生效，所以如果你想要配置全局的攔截器、請(qǐng)求基地址、超時(shí)時(shí)間等可以創(chuàng)建一個(gè)幫助文件，然后頁面引入這個(gè)文件即可：

import grace from "../grace/index.js"
grace.http.config.baseURL = "http://www.dtworkroom.com/doris/1/2.0.0/"
grace.http.config.timeout = 5000;
grace.http.interceptors.request.use((config, promise) => {
    //攔截器邏輯
    //console.log(config.body);
});
export default grace;

全局事件總線可以在全局（跨頁面）觸發(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ì)列。

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

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

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

import grace from "../grace/index.js"
var page=grace.page;
grace.page=function(ob){
  mixin(ob,{
    onLoad(){
     //頁面調(diào)用onShow時(shí)打印出當(dāng)前頁面id 
     console.log("onLoad, pageID:"+this.$id)
    },
    onShow(){
     //頁面調(diào)用onShow時(shí)打印出當(dāng)前頁面id 
     console.log("onShow, pageID:"+this.$id)
      }
  })
  //創(chuàng)建頁面
  page.call(grace,ob)
}
export default grace;

import grace from "../../utils/help.js"
grace.page({
  data:{}
})

//控制臺(tái)輸出
> onLoad, pageID:1
> onShow, pageID:1

 
grace.mixin(ob,{
    onShow(){
     console.log("mixin onShow")
    }
 });

...

grace.page({
   onShow(){
     console.log("page onShow")
   }
})

//頁面顯示時(shí)會(huì)輸出： 
> mixin onShow
> page onShow