小程序模板网

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

发布时间:2018-05-07 15:00 所属栏目:小程序开发教程
  1. 下载:https://github.com/wendux/grace 到本地 grace目录
  2. 创建页面时用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可以避免如下问题:

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

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 大于现有页面数,则返回到首页。



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24290.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询