omix 简介 omix 主要提供了以下几种能力 像 vue 一样修改 data、创建函数属性 [代码]// 修改 oData，页面中的 data 也会实时修改 this.oData.userName = 'jie' [代码] [代码]data: { motto: 'Hello World', reverseMotto() { return this.motto.split('').reverse().join('') } }, [代码] 监听、触发自定义事件 可以定义全局的事件，在不同的页面，页面中的组件触发、监听事件。 能想到的适用场景：从列表页进入到详情页，在详情页修改列表页对应的项为已读。 mitt 来自开源库 mitt [代码]const emitter = mitt() // listen to an event emitter.on('foo', e => console.log('foo', e) ) // listen to all events emitter.on('*', (type, e) => console.log(type, e) ) // fire an event emitter.emit('foo', { a: 'b' }) [代码] 给页面中的组件注入上下文 [代码]// page create.Page({ //页面级别上下文，跨页面不共享 context: { abc: '公共数据从页面注入到页面的所有组件' //事件发送和监听器,或者 create.mitt() emitter: create.emitter }, } // component create.Component({ ready: function () { //这里可以获取组件所属页面注入的 store console.log(this.context) //触发事件 this.context.emitter.emit('foo', { a: 'b' }) }, }) [代码] 定义 store 跨页面共享数据 [代码]import create from '../../utils/create' import store from '../../store' create(store, { onLoad: function () { // 所有 页面的 store 都会更新 this.store.data.logs = (wx.getStorageSync('logs') }, }) [代码] 拆解 暂时只打算用 store 和 mitt，mitt 直接拿来用就行，所以依照 omix 作者的实现方式仿写了一下 store。 store 原理 原理挺简单的，就是修改 onLoad 把每个页面的实例保存起来，修改 store 就让保存的页面实例调用 setData 同步更新数据 仿写代码 使用 先定义 store [代码]export default { data: { test: 'haha', }, onChange (data) { console.log(data); }, } [代码] [代码]// 使用 import store from '../store' import customPage from '../utils/customPage' customPage({ store, data: { }, onLoad () { // 多个页面同步更新 this.store.setData({ test: 'lala', }) }, }) [代码] 源代码地址 https://github.com/jinglen/wx-mini-store/blob/master/utils/customPage.js 收获 原来微信会把 Page(options) 中的 options 克隆一下

为什么不能频繁 setData 先科普下 setData 做的事情： 在数据传输时，逻辑层会执行一次 JSON.stringify 来去除掉 setData 数据中不可传输的部分，之后将数据发送给视图层。同时，逻辑层还会将 setData 所设置的数据字段与 data 合并，使开发者可以用 this.data 读取到变更后的数据。 因此频繁调用，视图会一直更新，阻塞用户交互，引发性能问题。 但频繁调用是常见开发场景，能不能频繁调用的同时，视图延迟更新呢？ 参考 Vue，我们能知道，Vue 每次赋值操作并不会直接更新视图，而是缓存到一个数据更新队列中，异步更新，再触发渲染，此时多次赋值，也只会渲染一次。 [代码]let newState = null; let timeout = null; const asyncSetData = ({ vm, newData, }) => { newState = { ...newState, ...newData, }; clearTimeout(timeout); timeout = setTimeout(() => { vm.setData({ ...newState, }); newState = null }, 0); }; [代码] 由于异步代码会在同步代码之后执行，因此，当你多次使用 asyncSetData 设置 newState 时，newState 都会被缓存起来，并异步 setData 一次 但同时，这个方案也会带来一个新的问题，同步代码会阻塞页面的渲染。 同步代码会阻塞页面的渲染的问题其实在浏览器中也存在，但在小程序中，由于是逻辑、视图双线程架构，因此逻辑并不会阻塞视图渲染，这是小程序的优点，但在这套方案将会丢失这个优点。 鱼与熊掌不可兼得也！ 对于信息流页面，数据过多怎么办 单次设置的数据不能超过 1024kB，请尽量避免一次设置过多的数据 通常，我们拉取到分页的数据 newList，添加到数组里，一般是这么写： [代码]this.setData({ list: this.data.list.concat(newList) }) [代码] 随着分页次数的增加，list 会逐渐增大，当超过 1024 kb 时，程序会报 [代码]exceed max data size[代码] 错误。 为了避免这个问题，我们可以直接修改 list 的某项数据，而不是对整个 list 重新赋值： [代码]let length = this.data.list.length; let newData = newList.reduce((acc, v, i)=>{ acc[`list[${length+i}]`] = v; return acc; }, {}); this.setData(newData); [代码] 这看着似乎还有点繁琐，为了简化操作，我们可以把 list 的数据结构从一维数组改为二维数组：[代码]list = [newList, newList][代码]， 每次分页，可以直接将整个 newList 赋值到 list 作为一个子数组，此时赋值方式为： [代码]let length = this.data.list.length; this.setData({ [`list[${length}]`]: newList }); [代码] 同时，模板也需要相应改成二重循环： [代码]<block wx:for="{{list}}" wx:for-item="listItem" wx:key="{{listItem}}"> <child wx:for="{{listItem}}" wx:key="{{item}}"></child> </block> [代码] 下拉加载，让我们一夜回到解放前 信息流产品，总避免不了要做下拉加载。 下拉加载的数据，需要插到 list 的最前面，所以我们应该这样做： [代码]this.setData({ `list[-1]`: newList }) [代码] 哦不，对不起，上面是错的，应该是下面这样： [代码]this.setData({ list: this.data.list.unshift(newList) }); [代码] 这下好，又是一次性修改整个数组，一夜回到解放前… 为了解决这个问题，这里需要一点奇淫巧技： 为下拉加载维护一个单独的二维数组 pullDownList 在渲染时，用 wxs 将 pullDownList reverse 一下 此时，当下拉加载时，便可以只修改数组的某个子项： [代码]let length = this.data.pullDownList.length; this.setData({ [`pullDownList[${length}]`]: newList }); [代码] 关键在于渲染时候的反向渲染： [代码]<wxs module="utils"> function reverseArr(arr) { return arr.reverse() } module.exports = { reverseArr: reverseArr } </wxs> <block wx:for="{{utils.reverseArr(pullDownList)}}" wx:for-item="listItem" wx:key="{{listItem}}"> <child wx:for="{{listItem}}" wx:key="{{item}}"></child> </block> [代码] 问题解决！ 参考资料 终极蛇皮上帝视角之微信小程序之告别 setData, 佯真愚, 2018年08月12日