摘要：一個精巧易用的微信小程序開發輔助庫特點輕量小巧上手簡單支持和一樣優雅的數據響應式支持數據自動更新更改緩存批量更新強大的網絡功能支持全局事件總線支持跨頁面傳值支持示例工程在源碼目錄下用微信小程序開發工具打開即可。

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

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

輕量、小巧、上手簡單

支持和Vue一樣優雅的數據響應式

支持數據自動更新、更改緩存、批量更新

強大的網絡功能

支持全局事件總線

支持跨頁面傳值

支持mixins

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

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

創建頁面時用grace.page 替換 Page 即可。

import grace from "../../grace/index.js"
grace.page({
  data: {
    userInfo: {},
    canIUse: true
  },
  onLoad() {
    //直接通過$data賦值更新數據
    this.$data.canIUse = false
    //通過$http發起網絡請求
    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)
    })
    //全局事件總線-監聽事件
    this.$bus.$on("enventName", (data) => {
      console.log(data)
    })
    //返回上一頁，并傳遞數據
    this.$goBack({retValue: "8"})
  },
  //跨頁面傳值  
  $onBackData(data) {
    //接收頁面返回的數據，
  }
  ...
})

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

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

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

微信小程序中數據發生變化后都要通過setData顯式更新如：

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

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

現在，有了Grace， 它會讓你的代碼變的優雅，你可以像使用Vue一樣更新數據：

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

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

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

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

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

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

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

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

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

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

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

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現在是響應式的
   this.$data.a=2;
   //b不是響應式的
   this.$data.b = 2
  }
})

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

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

根據微信小程序官方優化建議，grace可以避免如下問題：

頻繁的去 setData

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

//開始緩存數據變更
this.$data.$cache();

//接下來是n次密集的數據更新
this.$data.name="doris"
this.$data.userCard.no="610xxx889"
this.$data.balance=66666
....
//統一提交變更
this.$data.$commit();

在調用$cache()之后，所有數據的變化將會緩存起來（不會觸發setData）, 知道調用 $commit后，才會統一刷新，這樣即避免了頻繁調用setData帶來的性能消耗。

后臺態頁面進行 setData

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

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

多個并發請求

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的一個實例，詳情可以參照其官網，如果您想創建新的 FLY 實例：

var newHttp=grace.createHttpClient();

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

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;

全局事件總線可以在全局（跨頁面）觸發、監聽事件。

$on(eventName,handler)

監聽事件

this.$bus.$on("enventName",(arg1,arg2)=>{
      //事件處理器參數為$emit觸發事件時傳遞的參數
        console.log(arg1)
})

$emit(eventName,[…arguments])

觸發事件

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

$off(eventName,[handler])

取消監聽

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

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

在小程序中打開新頁面時可以通過url的query向新頁面傳值，這很容易，如：

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

但是，新頁面關閉時如何向前一個頁面返回數據？ 小程序中沒有提供直接的方法，grace給所有頁面添加了一個回調，用于接收頁面回傳的數據，如下：

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

上面的頁面我們記為A, 假設你打開了一個新頁面B, 你需要在B中選擇一些信息后回傳給A，那么你在B中應該：

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

$goBack([data],[delta])

關閉當前頁面，返回上一頁面或多級頁面，如果存在data, 則會調用返回到的頁面的$onBackData回調，若data不存在，則不會回調$onBackData.

delta 意義同 wx.navigateBack參數的delta, 表示回退的頁面數，默認為1（上一頁），如果如果 delta 大于現有頁面數，則返回到首頁。

混入 (mixins) 是一種分發頁面（Page）可復用功能的非常靈活的方式。簡而言之，他可以在小程序創建頁面時，混合頁面選項，可以實現給所有頁面添加一些鉤子的功能，如果還不理解，不要緊，下面來看一個例子：

實現：在任何頁面調用onLoad、onShow 時打印日志，并輸出當前頁面id.

創建一個help.js文件

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

在創建Page時引入help.js

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

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

這樣一來，相當于給所有的Page添加了onLoad、onShow 預處理。

可以看到，mixin通過混入頁面創建參數給頁面添加統一的預處理功能，相當于添加了頁面鉤子。

當頁面構建對象和混入對象含有同名選項時，這些選項將以恰當的方式混合。

數據對象在內部會進行淺合并 (一層屬性深度)，在和頁面構建數對象發生沖突時以頁面構建數對象數據優先。

同名鉤子函數將混合為一個數組，因此都將被調用。另外，混入對象的鉤子將在頁面自身鉤子之前調用。

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

...

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

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

?

請參考：https://juejin.im/post/5aa0e4...

再次貼出github地址，如果你喜歡，歡迎star , Github: https://github.com/wendux/grace