下载: 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.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 会自动停止数据更新, 当页面再次转到前台时会自动开启渲染
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=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 大于现有页面数, 则返回到首页
来源: http://blog.csdn.net/rolan1993/article/details/79467890