微信小顺序开辟必备神器-Grace

2024年5月7日 99次阅读来源: 杜文

Grace

一个精致、易用的微信小顺序开辟辅佐库

Github: https://github.com/wendux/grace

特性

轻量、玲珑、上手简朴
支撑和Vue一样文雅的数据相应式
支撑数据自动更新、更改缓存、批量更新
壮大的收集功用
支撑全局事宜总线
支撑跨页面传值
支撑mixins

Demo

示例工程在源码 “quickstart-grace-demo”目次下, 用微信小顺序开辟工具翻开即可。

运用

将 https://github.com/wendux/grace 工程中src目次中一切文件拷贝到小顺序根目次下的grace目次
建立页面时用grace.page 替代 Page 即可。

import grace from "../../grace/index.js"
grace.page({
  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) {
    //吸收页面返回的数据，
  }
  ...
})

假如是注册组件（component）的话, 只需用 grace.component 替代 Component 组织器即可：

// grace.component 替代 Component
grace.component({
  properties: {
  },
  data: {
     text:"我是自定义组件",
     times:1
  },
  methods: {
    onTap(){
      //赋值更新
      this.$data.text="自定义组件点击 +"+this.$data.times++
    }
  }
}

注重：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，能够跳过）关于数组：

变异要领

grace包括一组视察数组的变异要领，所以它们也将会触发视图更新。这些要领以下：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

替代数组

变异要领 (mutation method)，望文生义，会转变被这些要领挪用的原始数组。相比之下，也有非变异 (non-mutating method) 要领，比方：filter(), concat() 和 slice() 。这些不会转变原始数组，但老是返回一个新数组。当运用非变异要领时，能够用新数组替代旧数组：

this.$data.items = this.$data.items.filter(function (item) {
  return item.message.match(/Foo/)
})

注重事项

因为 JavaScript 的限定，grace不能检测以下更改的数组：

当你应用索引直接设置一个项时，比方：this.$data.items[indexOfItem] = newValue
当你修正数组的长度时，比方：this.$data.items.length = newLength

为了处理第一类题目，以下两种体式格局都能够完成和 this.$data.items[indexOfItem] = newValue 雷同的结果，同时也将触发状况更新：


this.$data.$set(example1.items, indexOfItem, newValue)

// Array.prototype.splice
this.$data.items.splice(indexOfItem, 1, newValue)

为了处理第二类题目，你能够运用 splice：

this.$data.items.splice(newLength)

对象属性的增加

照样因为 JavaScript 的限定，grace 不能检测对象属性的增加或删除：

grace.page({
  data: {
    a: 1
  }
  onLoad(){
   //a如今是相应式的
   this.$data.a=2;
   //b不是相应式的
   this.$data.b = 2
  }
})

关于已建立的实例，grace 不能动态增加根级别的相应式属性。然则，能够运用 $data.$set(object, key, value) 要领向嵌套对象增加相应式属性。比方：

this.$data.$set(this.$data, 'b', 2)

数据变动缓存

依据微信小顺序官方优化发起，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=grace.createHttpClient();

注重：grace建立页面时，一切页面的$http都是同一个FLY 实例，所以对this.$http的设置，会在全局见效，所以假如你想要设置全局的拦截器、要求基地点、超时时候等能够建立一个帮助文件，然后页面引入这个文件即可：

import grace from "../grace/index.js"
grace.http.config.baseURL = 'http://www.dtworkroom.com/doris/1/2.0.0/'
grace.http.config.timeout = 5000;
grace.http.interceptors.request.use((config, promise) => {
    //拦截器逻辑
    //console.log(config.body);
});
export default grace;

事宜总线

全局事宜总线能够在全局（跨页面）触发、监听事宜。

$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给一切页面增加了一个回调，用于吸收页面回传的数据，以下：


grace.page({
  data:{}
  $onBackData(data){
   //吸收页面返回的数据，
  }  
  ...         
})

上面的页面我们记为A, 假定你翻开了一个新页面B, 你需要在B中挑选一些信息后回传给A，那末你在B中应当：

grace.page({
  data: {},
  bindViewTap(){
    //返回上一个页面，并回传一些数据
    this.$goBack({xxx:5});
  }
  ...
}

$goBack([data],[delta])

封闭当前页面，返回上一页面或多级页面，假如存在data, 则会挪用返回到的页面的$onBackData回调，若data不存在，则不会回调$onBackData.

delta 意义同 wx.navigateBack参数的delta, 示意回退的页面数，默以为1（上一页），假如假如 delta 大于现有页面数，则返回到首页。

mixin

混入 (mixins) 是一种分发页面（Page）可复用功用的异常天真的体式格局。简而言之，他能够在小顺序建立页面时，夹杂页面选项，能够完成给一切页面增加一些钩子的功用，假如还不明白，没关系，下面来看一个例子：

完成：在任何页面挪用onLoad、onShow 时打印日记，并输出当前页面id.

建立一个help.js文件

import grace from "../grace/index.js"
var page=grace.page;
grace.page=function(ob){
  mixin(ob,{
    onLoad(){
     //页面挪用onShow时打印出当前页面id 
     console.log("onLoad, pageID:"+this.$id)
    },
    onShow(){
     //页面挪用onShow时打印出当前页面id 
     console.log("onShow, pageID:"+this.$id)
      }
  })
  //建立页面
  page.call(grace,ob)
}
export default grace;

在建立Page时引入help.js

import grace from "../../utils/help.js"
grace.page({
  data:{}
})

//控制台输出
> onLoad, pageID:1
> onShow, pageID:1

如许一来，相当于给一切的Page增加了onLoad、onShow 预处理。

能够看到，mixin经由过程混入页面建立参数给页面增加一致的预处理功用，相当于增加了页面钩子。

选项兼并

当页面构建对象和混入对象含有同名选项时，这些选项将以适当的体式格局夹杂。

数据对象在内部会举行浅兼并 (一层属性深度)，在和页面构建数对象发生冲突时以页面构建数对象数据优先。

同名钩子函数将夹杂为一个数组，因而都将被挪用。别的，混入对象的钩子将在页面本身钩子之前挪用。

 
grace.mixin(ob,{
    onShow(){
     console.log("mixin onShow")
    }
 });

...

grace.page({
   onShow(){
     console.log("page onShow")
   }
})

//页面显现时会输出： 
> mixin onShow
> page onShow

和wepy比较

请参考：https://juejin.im/post/5aa0e4…

末了

再次贴出github地点，假如你喜好，迎接star , Github: https://github.com/wendux/grace

    原文作者：杜文
    原文地址: https://segmentfault.com/a/1190000013573982
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。