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

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

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

輕量、小巧、上手簡單

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

支持數(shù)據(jù)自動更新、更改緩存、批量更新

強大的網(wǎng)絡功能

支持全局事件總線

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

支持mixins

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

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

創(chuàng)建頁面時用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)絡請求
    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ù)，
  }
  ...
})

如果是注冊組件（component）的話, 只需用 grace.component 替換 Component 構造器即可：

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

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

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

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

這很明顯是受了React的影響，好的不學??，如果你用過Vue, 你應該會覺得這看起來很不優(yōu)雅，尤其是代碼中零零散散要更新的值多的時候，代碼看起來會很冗余，還有，有時為了改變一個變量，也得調(diào)一次setData.

現(xiàn)在，有了Grace， 它會讓你的代碼變的優(yōu)雅，你可以像使用Vue一樣更新數(shù)據(jù)：

this.$data.userInfo=res.userInfo;
//更新多個字段，并非重新賦值
this.$data={
    userInfo: res.userInfo
    canIUse: false
}

現(xiàn)在，你可以直接通過賦值就能更新界面了。當然，您依舊可以使用this.setData來更新數(shù)據(jù)，grace會自動同步 this.$data.

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

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

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

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

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

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

當你利用索引直接設置一個項時，例如：this.$data.items[indexOfItem] = newValue

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

為了解決第一類問題，以下兩種方式都可以實現(xiàn)和 this.$data.items[indexOfItem] = newValue 相同的效果，同時也將觸發(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 不能檢測對象屬性的添加或刪除：

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

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

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

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

頻繁的去 setData

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

//開始緩存數(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ù)的變化將會緩存起來（不會觸發(fā)setData）, 知道調(diào)用 $commit后，才會統(tǒng)一刷新，這樣即避免了頻繁調(diào)用setData帶來的性能消耗。

后臺態(tài)頁面進行 setData

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

Grace通過Promise封裝了wx.request， 并支持攔截器、請求配置等：

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

多個并發(fā)請求

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請求庫是 FLY , $http是 FLY的一個實例，詳情可以參照其官網(wǎng)，如果您想創(chuàng)建新的 FLY 實例：

var newHttp=grace.createHttpClient();

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

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ù)
        console.log(arg1)
})

$emit(eventName,[…arguments])

觸發(fā)事件

this.$bus.$emit("enventName", 1,2) 

$off(eventName,[handler])

取消監(jiān)聽

this.$bus.$off("eventName",cb)

當提供hanlder時，只將該hanlder移出監(jiān)聽者隊列，如果沒有傳handler,則清空該事件的監(jiān)聽者隊列。

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

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

grace.page({
  data: {},
  bindViewTap(){
    //返回上一個頁面，并回傳一些數(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時打印出當前頁面id 
     console.log("onLoad, pageID:"+this.$id)
    },
    onShow(){
     //頁面調(diào)用onShow時打印出當前頁面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:{}
})

//控制臺輸出
> onLoad, pageID:1
> onShow, pageID:1

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

...

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

//頁面顯示時會輸出： 
> mixin onShow
> page onShow