下载:https://github.com/wendux/grace 到本地 grace目录
创建页面时用Grace 替换小程序的 Page 方法即可。
import createPage from "grace/index.js" createPage({ data:{ userInfo:{}, canIUse:true } onLoad(){ //直接通过$data赋值更新数据 this.$data.canIUse=false //通过$http发起网络请求 this.$http.post("",{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){ //接收页面返回的数据, } ... }) 注意: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,可以跳过),所以,和Vue一样,由于 JavaScript 的限制,grace不能检测到数组下标赋值和对象添加或删除属性。但grace提供了 $set(target,key,value) 方法, 详情请移步: github.com/wendux/grac… 。
数据变更缓存根据微信小程序官方优化建议,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会自动停止数据更新,当页面再次转到前台时会自动开启渲染。
HttpGrace通过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=this.$creatHttpClient(); 事件总线全局事件总线可以在全局(跨页面)触发、监听事件。
$on(eventName,handler)