微信小程序開發神器-Grace

時間 2019-11-06

標籤微信程序開發神器 grace 简体版

原文原文鏈接

Grace

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

Github: github.com/wendux/grac…html

特色

輕量、小巧、上手簡單
支持和Vue同樣優雅的數據響應式
支持數據自動更新、更改緩存、批量更新
強大的網絡功能
支持全局事件總線
支持跨頁面傳值
支持mixins

Demo

示例工程在源碼「quickstart-grace-demo」目錄下, 用微信小程序開發工具打開便可。java

使用

將 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 構造器便可：git

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

注意：Grace 注入到實例中的全部方法和屬性命名都以「$」開始。github

數據響應式

微信小程序中數據發生變化後都要經過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.promise

數組更新檢測

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會自動中止數據更新，當頁面再次轉到前臺時會自動開啓渲染。

Http

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 大於現有頁面數，則返回到首頁。

mixin

混入 (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
複製代碼