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可以避免如下问题:
HttpGrace通过Promise封装了wx.request, 并支持拦截器、请求配置等:
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 大于现有页面数,则返回到首页。 |