本文主要是介绍微信小程序开发必备神器-Grace，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
- 下载：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("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){//接收页面返回的数据，} ...
})
注意：Grace 所有方法和属性命名都以“$”开始。
数据响应式
微信小程序中数据发生变化后都要通过setData显式更新如：
//更新单个字段
this.setData({userInfo: res.userInfo})
//更新多个字段
this.setData({userInfo: res.userInfocanIUse: false
})
这很明显是受了React的影响，好的不学��，如果你用过Vue, 你应该会觉得这看起来很不优雅，尤其是代码中零零散散要更新的值多的时候，代码看起来会很冗余，还有，有时为了改变一个变量，也得调一次 setData .
现在，有了Grace， 它会让你的代码变的优雅，你可以像使用Vue一样更新数据：
this.$data.userInfo=res.userInfo;
//更新多个字段，并非重新赋值
this.$data={userInfo: res.userInfocanIUse: 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会自动停止数据更新，当页面再次转到前台时会自动开启渲染。
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 sentconfig.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)
监听事件
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 大于现有页面数，则返回到首页。
作者：lazydu
链接：微信小程序开发必备神器-Grace-教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
这篇关于微信小程序开发必备神器-Grace的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
