微信小程序开发必备神器-Grace

数据变更缓存

根据微信小程序官方优化建议，grace可以避免如下问题：

1. 频繁的去 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 带来的性能消耗。

2. 后台态页面进行 setData

   当页面进入后台态（用户不可见），不应该继续去进行 setData ，后台态页面的渲染用户是无法感受的，另外后台态页面去 setData 也会抢占前台页面的执行。当页面进入后台时，grace会自动停止数据更新，当页面再次转到前台时会自动开启渲染。

Http

Grace通过Promise封装了wx.request， 并支持拦截器、请求配置等：

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. 多个并发请求

   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")
       }
   )

var newHttp=this.$creatHttpClient();

事件总线

全局事件总线可以在全局（跨页面）触发、监听事件。

$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给所有页面添加了一个回调，用于接收页面回传的数据，如下：

createPage({
  data:{}
  $onBackData(data){
   //接收页面返回的数据，
  }  
  ...         
})

上面的页面我们记为A, 假设你打开了一个新页面B, 你需要在B中选择一些信息后回传给A，那么你在B中应该：

createPage({
  data: {},
  bindViewTap(){
    //返回上一个页面，并回传一些数据
    this.$goBack({xxx:5});
  }
  ...
}

$goBack([data],[delta])

关闭当前页面，返回上一页面或多级页面，如果存在 data , 则会调用返回到的页面的 $onBackData 回调，若 data 不存在，则不会回调 $onBackData .

delta 意义同 wx.navigateBack 参数的delta, 表示回退的页面数，默认为1（上一页），如果如果 delta 大于现有页面数，则返回到首页。