前言
昨天分析了一下 小程序基础架构解析，我们知道了 wxml通过wcc编译成js，wxss 通过 wcsc 编译成js，我们改变不了，整个过程是黑盒的，针对开发而言不是很好，想做工程化，不知从何入手，之前写过一篇简单的原生小程序工程化探索，而对于大型应用而言，这远远是不够的，还是应该选择成熟的应用框架。目前市面上主要提供两类工程化框架，编译时框架与运行时框架
编译时框架
- 如 taro、wepy 等,离线打包出 wxml、wxss、js
taro：类 react 语法
component -> render -> 类jsx (数据[props、state]、事件、data diff) => wxml
--------------------------------
如何做的data diff
a: {b: { c: 1 }} => a: {b: { c: 2 }}
diff： a.b.c = 2
--------------------------------
css -> 预处理器 => wxss
js => js（生命周期、逻辑）
运行时框架
- 如 mpvue、uni-app、kbone 等基于 vue，remax 基于 react（基于vue/react的运行时与小程序端的运行时）
基于 vue 的框架
vue: 双向数据绑定、virtrual dom、dom diff、编译模版
template => wxml、生成vue运行时render函数，例如 div -> view、@click -> bindtap等
script => js、json、new Vue => new App() 、 new Page（）
sttyle => wxss，编译时打包成 wxss
vue与小程序映射：模版、生命周期
-
vue 原本的运行时
-
结合小程序的运行时,不是做dom-diff，而是调用小程序的setData，同时在创建页面的Vue实例的同时要创建对应的小程序Page实例
基于 React 的框架
- Remax 的运行时本质是一个通过 react-reconciler 实现的一个小程序端的渲染器，感觉跟 react 太像了，具体看文档 remax
- 学不动了，有点闹心了，搂宝觉觉去喽～
❤️ 加入我们
字节跳动 · 幸福里团队
Nice Leader：高级技术专家、掘金知名专栏作者、Flutter中文网社区创办者、Flutter中文社区开源项目发起人、Github社区知名开发者，是dio、fly、dsBridge等多个知名开源项目作者
期待您的加入，一起用技术改变生活！！！
