├── .babelrc ├── .gitignore ├── README.md ├── dist └── vox.js ├── example ├── dist │ └── index.js ├── index.html ├── index.js ├── page.js └── page.vxml.js ├── package-lock.json ├── package.json ├── src ├── index.js ├── index.worker.js └── init.js ├── webpack.config.js └── webpack.example.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env" 4 | ] 5 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .entry 3 | .happypack 4 | _package 5 | .alipay 6 | _dist 7 | yarn.lock 8 | yarn-error.log 9 | .idea 10 | /_tmp 11 | 12 | src/.tea -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## vox 小程序框架雏形 2 | 3 | 4 | ## run example 5 | ``` 6 | npm i 7 | npm run dev 8 | npm run exapmle 9 | ``` 10 | 11 | ## 小程序内部实现原理概览 12 | 13 | [小程序原理demo](https://github.com/muwoo/vox) 14 | 15 | 对于小程序框架实现原理，在支付宝小程序官方文档上有这样一段描述： 16 | >与传统的 H5 应用不同，小程序运行架构分为 webview 和 worker 两个部分。webview 负责渲染，worker 则负责存储数据和执行业务逻辑。 17 | 1.webview 和 worker 之间的通信是异步的。这意味着当我们调用 `setData` 时，我们的数据并不会立即渲染，而是需要从 worker 异步传输到 webview。 18 | 2.数据传输时需要序列化为字符串，然后通过 evaluateJavascript 方式传输，数据大小会影响性能。 19 | 20 | 概括一下，大致意思是小程序框架核心是通过2个线程来完成的，主线程负责webView的渲染工作，worker线程负责js执行。说到这里，你是不是会产生一个疑问：**为什么多线程通信损耗性能还要搞多线程呢？** 可能大多数人都知道因为Web技术实在是太开放了，开发者可以为所欲为。这种情况在小程序中是不允许的，不允许使用