Westore发布小程序插件开发模板等主要更新和原则

我们开源在两天内突破了1000星，并且达到了Github日报排行榜的榜首。在此期间，我受到了很大的关注，收到了很多中肯实用的反馈和意见。小程序插件开发的需求是最重要的观点之一。所以我连夜努力更新，从Github提交记录知道凌晨3点有合并PR，提交代码==！

让我们首先回顾一下applet :的现有痛点。

使用this.data获取内部数据和属性值，但不要直接修改它们。相反，使用设置数据来修改设置数据。编程体验不好。在很多场景中，直接赋值更加直观方便。setData卡卡卡又慢又慢。JsCore和Webview数据对象返回浪费的计算资源和内存资源。组件之间的通信或跨页通信会打乱程序，变得极难维护和扩展。所以不使用westore的时候经常可以看到这样的代码3360。

使用Westore :提高编程体验

以上两种方法也可以混合使用。

这里需要强调的是，虽然this.update可以以与applet的this.setData兼容的方式传输参数，但它更智能，并且this.update将根据需要通过Diff或transparency传输到setData。原则：

再举一个例子：

This.store.data .座右铭=' hello store 222 ' this . store . data . b . arr . push({ name 3360 ' CCC ' })this . update()复制代码等同于this . update({ motto 3360 ' hello store 222 '，[` b.arr [$ {this。store . data . b . arr . length }]`]: { name : ' CCC ' })Copy code

小程序插件

小程序插件是一组js接口、自定义组件或页面的封装，用于嵌入到小程序中。插件不能独立运行，必须嵌入其他小程序才能被用户使用。而第三方小程序在使用插件时看不到插件代码。因此，插件适合封装自己的功能或服务，并提供给第三方小程序显示和使用。插件开发人员可以像开发小程序一样编写一个插件并上传代码。插件发布后，其他小程序可以调用它。小程序平台将托管插件代码，当其他小程序调用时，上传的插件代码将被下载并与小程序一起运行。

开发者文档插件用户文档

插件开发

Westore提供以下目录：

|-组件|-我们存储|-插件. JSON |-存储. js复制代码创建插件：导入创建自'././我们存储/创建-插件'从导入存储'././Store'//最外面的容器节点需要传入Store，而其他组件不传入Store Create (Store，{ Properties : { authkey 3360 { type : String，Value :''}}，Data : {List3360 []}，Attached: function () {//可以获取属性值console . log(this . Properties . authkey)//Monitor所有更改this . Store . onchange=(detail)={ this。triggerevent ('list change '，detail)}//你可以在这里发起一个网络请求来获取这个插件的数据。store.data.list=[{name :' TV '，

price: 1000 }, { name: '电脑', price: 4000 }, { name: '手机', price: 3000 }] this.update() //同样也直接和兼容 setData 语法 this.update( { 'list[2].price': 100000 } ) }})复制代码

在你的小程序中使用组件：

<list auth-key="{{authKey}}" bind:listChange="onListChange" />复制代码

这里来梳理下小程序自定义组件插件怎么和使用它的小程序通讯:

• 通过 properties 传入更新插件，通过 properties 的 observer 来更新插件
• 通过 store.onChange 收集 data 的所有变更
• 通过 triggerEvent 来抛事件给使用插件外部的小程序

这么方便简洁还不赶紧试试Westore插件开发模板！

特别强调

插件内所有组件公用的 store 和插件外小程序的 store 是相互隔离的。

原理

页面生命周期函数

名称描述onLoad监听页面加载onShow监听页面显示onReady监听页面初次渲染完成onHide监听页面隐藏onUnload监听页面卸载

组件生命周期函数

名称描述created在组件实例进入页面节点树时执行，注意此时不能调用 setDataattached在组件实例进入页面节点树时执行ready在组件布局完成后执行，此时可以获取节点信息（使用 SelectorQuery ）moved在组件实例被移动到节点树另一个位置时执行detached在组件实例被从页面节点树移除时执行

由于开发插件时候的组件没有 this.page，所以 store 是从根组件注入，而且可以在 attached 提前注入:

export default function create(store, option) {    let opt = store    if (option) {        opt = option        originData = JSON.parse(JSON.stringify(store.data))        globalStore = store        globalStore.instances = []        create.store = globalStore    }    const attached = opt.attached    opt.attached = function () {        this.store = globalStore        this.store.data = Object.assign(globalStore.data, opt.data)        this.setData.call(this, this.store.data)        globalStore.instances.push(this)        rewriteUpdate(this)        attached && attached.call(this)    }    Component(opt)}复制代码