作者：wwayne 原文：基于Proxy的小程序状态管理 Fundebug经授权转载，版权归原作者所有。 微信小程序的市场在进一步的扩大，而背后的技术社区仍在摸索着最好的实践方案。我在帮助Nike，沃尔玛以及一些创业公司开发小程序后，依旧认为使用小程序原生框架是一个更高效，稳定的选择，而使用原生框架唯独缺少一个好的状态管理库，如果不引入状态管理则会让我们在模块化，项目结构以及单元测试上都有些捉襟见肘。 目前相对比较稳健的做法是针对redux或者mobx做一个adaptor应用到小程序中，但这样需要自己想办法打包引入外部库，还要想怎么去写这个adaptor，总显得有些麻烦。于是我迸发出一个想法去写一个专用于小程序的状态管理库，它使用起来足够简单并且可以通过小程序自己的npm机制安装。 目前我已经用这个开源库开发了两个电商小程序，在提高我开发效率的同时亦保证了程序的性能，所以接下来我想谈谈这背后的理念以启发更多开发者尝试新的解决方案。 基于Proxy的状态管理实现 Proxy在小程序中已经得到了足够好的支持，目前并没有发现在任何iPhone或者Android上不能使用Proxy的情况。而基于Proxy的状态管理其实也就是订阅监听的模式，一方面监听数据的变化，另一方面将这些变化传达给订阅的小程序页面。 举一个比较常见的例子，当一个用户从自己的主页进入用户编辑页面，然后更改了自己的用户名点击保存后，用户主页和用户编辑页上的用户名这时候都应该被更新。这背后的程序逻辑则是：更新这个行为将触发Proxy去通知状态管理库，然后状态管理库负责检查此时还在页面栈中的所有页面，更新订阅了用户名这个数据的页面，如下图： [图片] Part1: 监听数据变化 监听数据变化其实就是监听各个Store的属性变化，实现上就是在各个Store前面加了一层Proxy，用更直观的图片来表示就是这样： [图片] 当一个Store被观察以后，它的属性就都变成了Proxy实例，当这个属性值是Object或者Array的时候，它内部的值也会被包装成Proxy实例，这样无论多深层的数据变动都能被监听到。 而在Proxy的后面，Store的属性其实是被另一套数据(紫色部分)所维护，这套数据不负责监听，它就是纯数据，针对属性的任何变动最后都会应用到这套数据上来，它的作用是维护和返回最新的数据。 实现细节： https://github.com/wwayne/min… Part2: 页面数据绑定 因为小程序每个页面的js都是向Page中传递一个对象，这就让我们有机会包装这个对象，从而实现： 进入页面后，将页面保存在页面栈中 将来自状态管理库的数据映射到这个页面的data上来 页面退出时，将页面从页面栈中移除 实现细节： https://github.com/wwayne/min… Part3： 页面订阅更新 当数据被监听到变化后，我们需要依次做两件事，先是找到所有存储在页面栈里的页面，然后根据各个页面订阅的数据来检查变化，如果有变化就通知这些页面，从而让它们去触发setData更新页面。 实现细节：https://github.com/wwayne/min… 使用状态管理的例子 有了状态管理库，现在我们就来实现一开始举例的更新用户信息的操作，我们的文件路径如下： [代码]stores/ user.js pages/ userEdit/ index.js index.wxml [代码] 1. 首先我们创建一个Store保存用户的信息，并且监听它的变化： [代码]// stores/user.js import { observe } from 'minii' Class UserStore { constructor () { this.name = 'bob' } changeName (name) { this.name = name } } export default observe(new UserStore(), 'user') [代码] 2. 接着在我们的小程序页面订阅Store的信息 [代码]// pages/userEdit/index.js import { mapToData } from 'minii' import userStore from '../../stores/user' const connect = mapToData(state => (({ myName: state.user.name })) Page(connect({ updateNameToJames () { userStore. changeName('james') } })) [代码] 3. 完成，现在可以在页面中使用和更新数据了 [代码]// pages/userEdit/index.wxml <text>{{ myName }}</text> <button bindtap="updateNameToJames">update name to James</button> [代码] 最后 小程序因为有体积的限制，所以我希望在代码量上也尽量做到轻量和便捷，所以目前这个状态管理库并没有太多很复杂的功能，在小程序打包后所占用的体积也不到1kb，颇有点够用就好的意思。 我也已经用它开发了两款小程序，在经历了一段时间的用户使用后，我也更有信心说这个方案在小程序中是可行的。如果你有任何想法和建议，都欢迎告诉我。 项目Github: https://github.com/wwayne/minii 关于作者 Hi, 我是wwayne，是一名居住在上海的独立软件工程师，我正在开发我的新产品 talk-to-kim, 你可以在Github 或者专栏 一个人写代码找到我

为方便公众号/服务号快捷接入小程序，并在各功能中使用小程序的服务，上线复用公众号/服务号资质注册小程序流程。快速注册认证小程序，境内非个人主体小程序无需重新提交主体材料、无需对公打款、无需支付300元认证费用。境外主体小程序无须重复提交主体材料对小程序认证，无需支付99美元认证费用。 条件：1、境内主体：已认证的企业、媒体、政府、其他组织类型的公众号/服务号（包括企业和个体工商户）； 2、境外主体：已认证的服务号（包括境外主体的企业和政府机构）。 限制：1、境内主体非个体工商户类型（企业、媒体、政府、其他组织类型）公众号或服务号一个月可以复用资质注册5个小程序，个体户一个月可以复用资质注册1个小程序； 2、境外主体服务号一个月可以复用资质注册5个小程序。 开通入口： 登录公众号/服务号后台->小程序管理->添加->快速注册并认证小程序 相关规则： 1、复用资质创建的小程序默认与该公众号/服务号关联； 2、复用资质创建的小程序默认关联该公众号/服务号，不占一个月新增关联13个小程序的限制； 3、复用资质创建的小程序默认关联公众号/服务号，不下发模板消息，不默认出现在公众号/服务号资料页； 4、一个公众号/服务号若存在“待完成注册”的小程序，不可发起复用资质创建小程序； 5、一个公众号/服务号一个月内可复用资质注册小程序不多于5个。（创建成功才占用）； 6、使用复用公众号/服务号资质注册小程序，将以本公众号/服务号的主体作为该小程序的开发者，可选择以本公众号/服务号运营者作为该小程序的管理员； 7、若选择了复用认证资质，则小程序完成注册后即是“已认证”状态； 8、若选择了复用认证资质，小程序初始认证有效期与公众号/服务号认证有效期一致，后续小程序认证年审需要在小程序后台独立申请。 创建流程： 第一步：登录公众号/服务号后台->小程序管理->添加->快速注册并认证小程序 [图片] 第二步：同意协议 [图片] 第三步：管理员扫码验证 [图片] 第四步：勾需要选快速创建小程序的资质 [图片] 注：复用微信认证资质不需要再次支付认证审核服务费，也不需要审核。 如不复用运营者信息，后续登录小程序时需绑定管理员 第五步：填写小程序账号信息 [图片] 注：邮箱需要是未绑定任何个人微信、公众号、服务号、小程序、微信开放平台的邮箱。 第六步：邮件激活小程序账号，激活完成后即可使用邮箱账号密码登录小程序。 [图片] 第七步：绑定小程序管理员 [图片] 注：绑定管理员，如果有在第四步有勾选复用运营者信息。最终以绑定管理员信息为准。 以上注册流程创建的小程序，不用再走小额打款验证主体。生成的账号具有独立的邮箱账号、密码，跟走正常注册流程注册的小程序具有一样的能力权限。