小程序解决方案 Westore - 组件、纯组件、插件开发
数据流转
先上一张图看清 westore 怎么解决小程序数据难以管理和维护的问题:
非纯组件的话,可以直接省去 triggerevent 的过程,直接修改 store.data 并且 update,形成缩减版单向数据流。
github: https://github.com/dntzhang/westore
组件
这里说的组件便是自定义组件,使用原生小程序的开发格式如下:
component({ properties: { }, data: { }, methods: { } })
使用 westore 之后:
import create from '../../utils/create' create({ properties: { }, data: { }, methods: { } })
看着差别不大,但是区别:
- component 的方式使用 setdata 更新视图
- create 的方式直接更改 store.data 然后调用 update
- create 的方式可以使用函数属性,component 不可以,如:
export default { data: { firstname: 'dnt', lastname: 'zhang', fullname:function(){ return this.firstname + this.lastname } } }
绑定到视图:
<view>{{fullname}}</view>
小程序 setdata 的痛点:
- 使用 this.data 可以获取内部数据和属性值,但不要直接修改它们,应使用 setdata 修改
- setdata 编程体验不好,很多场景直接赋值更加直观方便
- setdata 卡卡卡慢慢慢,jscore 和 webview 数据对象来回传浪费计算资源和内存资源
- 组件间通讯或跨页通讯会把程序搞得乱七八糟,变得极难维护和扩展
没使用 westore 的时候经常可以看到这样的代码:
使用完 westore 之后:
上面两种方式也可以混合使用。
可以看到,westore 不仅支持直接赋值,而且 this.update 兼容了 this.setdata 的语法,但性能大大优于 this.setdata,再举个例子:
this.store.data.motto = 'hello westore' this.store.data.b.arr.push({ name: 'ccc' }) this.update()
等同于
this.update({ motto:'hello westore', [`b.arr[${this.store.data.b.arr.length}]`]:{name:'ccc'} })
这里需要特别强调,虽然 this.update 可以兼容小程序的 this.setdata 的方式传参,但是更加智能,this.update 会先 diff 然后 setdata。原理:
纯组件
常见纯组件由很多,如 tip、alert、dialog、pager、日历等,与业务数据无直接耦合关系。
组件的显示状态由传入的 props 决定,与外界的通讯通过内部 triggerevent 暴露的回调。
triggerevent 的回调函数可以改变全局状态,实现单向数据流同步所有状态给其他兄弟、堂兄、姑姑等组件或者其他页面。
westore里可以使用 create({ pure: true })
创建纯组件(当然也可以直接使用 component),比如 :
import create from '../../utils/create' create({ pure : true, properties: { text: { type: string, value: '', observer(newvalue, oldvalue) { } } }, data: { privatedata: 'privatedata' }, ready: function () { console.log(this.properties.text) }, methods: { ontap: function(){ this.store.data.privatedata = '成功修改 privatedata' this.update() this.triggerevent('random', {rd:'成功发起单向数据流' + math.floor( math.random()*1000)}) } } })
需要注意的是,加上 pure : true
之后就是纯组件,组件的 data 不会被合并到全局的 store.data 上。
组件区分业务组件和纯组件,他们的区别如下:
- 业务组件与业务数据紧耦合,换一个项目可能该组件就用不上,除非非常类似的项目
- 业务组件通过 store 获得所需参数,通过更改 store 与外界通讯
- 业务组件也可以通过 props 获得所需参数,通过 triggerevent 与外界通讯
- 纯组件与业务数据无关,可移植和复用
- 纯组件只能通过 props 获得所需参数,通过 triggerevent 与外界通讯
大型项目一定会包含纯组件、业务组件。通过纯组件,可以很好理解单向数据流。
小程序插件
小程序插件是对一组 js 接口、自定义组件或页面的封装,用于嵌入到小程序中使用。插件不能独立运行,必须嵌入在其他小程序中才能被用户使用;而第三方小程序在使用插件时,也无法看到插件的代码。因此,插件适合用来封装自己的功能或服务,提供给第三方小程序进行展示和使用。
插件开发者可以像开发小程序一样编写一个插件并上传代码,在插件发布之后,其他小程序方可调用。小程序平台会托管插件代码,其他小程序调用时,上传的插件代码会随小程序一起下载运行。
插件开发
westore 提供的目录如下:
|--components |--westore |--plugin.json |--store.js
创建插件:
import create from '../../westore/create-plugin' import store from '../../store' //最外层容器节点需要传入 store,其他组件不传 store create(store, { properties:{ authkey:{ type: string, value: '' } }, data: { list: [] }, attached: function () { // 可以得到插件上声明传递过来的属性值 console.log(this.properties.authkey) // 监听所有变化 this.store.onchange = (detail) => { this.triggerevent('listchange', detail) } // 可以在这里发起网络请求获取插件的数据 this.store.data.list = [{ name: '电视', 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 | 在组件实例进入页面节点树时执行,注意此时不能调用 setdata |
attached | 在组件实例进入页面节点树时执行 |
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) }
总结
- 组件 - 对 wxml、wxss 和 js 的封装,与业务耦合,可复用,难移植
- 纯组件 - 对 wxml、wxss 和 js 的封装,与业务解耦,可复用,易移植
- 插件 - 小程序插件是对一组 js 接口、自定义组件或页面的封装,与业务耦合,可复用
star & fork 小程序解决方案
license
mit
上一篇: struts2_项目运行报404