用大型开发框架开发小程序那点事儿，微信小程序后端框架

最近在写支付宝小程序支付宝小程序相比较微信小程序更加缺少一些框架/工具/以及生态环境网站建设规划更加缺少一些框架/工具/以及生态环境借着这个时机我们一起来探讨一个问题

小程序最原始的开发模式有什么弊端？

怎么在小程序中科学的运用大型开发框架的设计思想？

如何在缺乏现成框架的情况下学习思想初步自己灵活运用起来

这其实是一篇循序渐进的小程序实践记录。对于支付宝小程序：从一开始缺乏整体框架深感不便。到决定自己融合框架思想自行实现。再到公司内有更优更全面的整体框架后追求的最佳实践。

目录：

原始小程序开发中面临的问题

构建一个 store 初步实现数据仓库

LunaX 的小程序上层开发组件库

Lux 单 store 数据仓库实践

LunaX 的其他工具

原始的小程序开发模式下天然具备了页面的 data 数据与 xml 渲染 mvvm 能力同时也维护好了整个 app 与页面 page 的生命周期在实际开发过程中已经比没有主流框架支持下的前端页面开发要便捷的多。但相比于前端广泛使用的 Vue 开发框架以及蚂蚁内部对 Vue 进一步封装出来的 Kylin 框架来说小程序的原始开发模式还是非常原始存在着非常多的弊端与开发效率问题逐一举例：

全局状态管理

跨页面跨组件通信

computed 计算能力

数据 Mock 能力

研发部署工作流问题

在原始的小程序开发模式下全局的状态只能挂在 app.js 内可以考虑给 app 对象加一个 globalData 的属性用来存放和管理全局变量并且可以在任意代码通过 app 进行访问。

App({ globalData: { userName:'hehe' }, onLaunch(options) {}, }) // 在页面访问全局状态 const app = getApp(); let userName = app.globalData.userName  

但是小程序的开发中其实是有一种 mvvm 的响应式设计思维融入其中的页面上的数据可以做到 setData 的时候响应式去改变界面中的渲染内容但仅限 page 页面内的 data 数据我能不能让 globalData 也做到这样的响应式。能让我 app 的每个页面每个组件但凡需要展示 UserName 的情况下只需要再 axml 中使用全局 globalData.userName 就能做到任何时候有任何人操作修改了 globalData.userName 其他的页面（包括已经展示出来的页面）都能响应式的变更渲染内容？汇总一下我们面临的痛点

希望在页面/组件的 axml 中能够可以直接使用全局 globalData 数据进行渲染

希望 globalData 在发生变化的时候能够响应式的通知所有用到的页面/组件更新对应渲染元素

说完了所有组件对全局状态的痛点我们再聊聊页面/组件间的通信小程序原始开发框架中最头疼的莫过于跨页面跨组件进行通信几乎是完全隔离的有限的通信手段也非常的不易用这里举一些例子

跨页面数据传递问题

page A 向 page B 传递数据有且只有一个方法将数据拼接成 url 的 query 然后通过 navigateTo 传递给下一个页面在 page B 的 onLoad 方法中读取 options 入参。

痛点1: 还有没有别的办法？有很山寨的让 page A 在 app 的 globalData 上挂一个全局变量在 page B 的 onLoad 时机读取这个全局变量这种方法实在太low了全局变量太多非常的不易维护并且 app 对象所有人都可以操作也会存在风险。

痛点2: 如果我要传递大量数据嵌套型数据怎么办？比如我要传递的是一个 object 对象里面不仅有很多 key value 还有一个 key 的 value 是一个数组数组里面依然是各种对象这种情况下怎么传递？各种 key value 还算可以通过拼 url 的方式那不知道长度的 Array 数组如何拼接 url ？整个 object 对象用 JSON.stringify 变成字符串然后经过 urlencode 后拼接进入 url ？ 太麻烦了。

深层组件嵌套数据传递问题

标签： 页面框架组件数据