我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，[点击查看活动详情](https://s.juejin.cn/ds/jooSN7t "https://s.juejin.cn/ds/jooSN7t") ## 前言最近在掘金上学习了一本小册——[《微信小程序底层框架实现原理》](https://juejin.cn/book/6982013809212784676)，加上以前做微信小程序的经验，结合自己的工作经历，深有感触，借此机会和大家分享一下学习工作心得。 **2017 年 1 月微信小程序正式发布** **。** 我从2018年接触学习前端时，曾仿写过一个性格评测类小程序demo，后来实习期间，完成了部门首个真正意义上小程序。做毕业设计时，结合微信小程序云开发能力，做了一个问答小程序（类似百度知道，360问答）。后来，做过一个大学信息资讯类小程序。正式工作之后，做过的小程序就很多了，借款类小程序，购物类小程序，消费类小程序，导流类小程序。 ## 为什么要掌握小程序有招聘需求，现在部分团队会有专门招聘小程序开发工程师，toC的产品招聘前端一般也会要求掌握微信小程序，有相关小程序开发经验。 ### 于开发者 - 目前开发的项目是小程序 - 想自己独立开发一个小程序 - 多掌握一门技术是好的 ### 于企业 - app 开发迭代成本较高，对于新业务小程序可以快速试错，探索渠道 - web端的生态不完整，收益小（游戏，抖音小程序，虎牙小程序，支付宝小程序） ## 双线程架构 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f59dd6330bbc47e9af27a2a7e64b9cbf~tplv-k3u1fbpfcp-zoom-1.image) 小程序与传统web单线程架构相比，是**双线程架构**。渲染层和逻辑层由两个线程管理，逻辑层采用JSCore运行js代码，渲染层使用 webview 进行渲染。小程序有多个页面，所以渲染层存在多个webview。两个线程之间由Native 层之间统一处理，无论是线程之间的通信，还是数据的传递，网络请求都是由Native层做转发。此处提到的小程序都特指微信小程序 ### 渲染一个hello world页面 ``` // index.wxml {{ msg }} // index.js Page({ onLoad: function () { this.setData({ msg: 'Hello World' }) } }) ``` - 渲染层和数据相关。 - 逻辑层负责产生、处理数据。 - 逻辑层通过 Page 实例的 setData 方法传递数据到渲染层。 ### 数据驱动 WXML可以先转成JS对象，然后再渲染出真正的Dom树，回到“Hello World”那个例子，我们可以看到转换的过程 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/20076817a0e64883b2582192ff4e41d3~tplv-k3u1fbpfcp-zoom-1.image) 通过setData把msg数据从“Hello World”变成“Goodbye”，产生的JS对象对应的节点就会发生变化，此时可以对比前后两个JS对象得到变化的部分，然后把这个差异应用到原来的Dom树上，从而达到更新UI的目的，这就是“**数据驱动**”。这一点和vue其实是一致的 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0524866115ee4f9b88d3668cf958adcc~tplv-k3u1fbpfcp-zoom-1.image) 既然小程序是基于双线程模型，那就意味着任何数据传递都是线程间的通信，也就是都会有一定的延时。 **一切都是异步。** ## 快速渲染设计原理小程序采用多个webview渲染，更加接近原生App的用户体验。如果为单页面应用，单独打开一个页面，需要先卸载当前页面结构，并重新渲染。多页面应用，新页面直接滑动出来并且覆盖在旧页面上即可。这样用户体验非常好。 ### 数量限制页面得载入是通过创建并插入webview 来实现的。微信小程序做了限制，在微信小程序中打开的页面不能超过10个，达到10个页面后，就不能再打开新的页面。 **所以我们在开发中，要避免路由嵌套太深。** ### PageFrame 我们在写小程序页面时，并不关心webview，只需要写页面ui和逻辑即可。我们通过调试**微信开发工具**，可以看到，有两个webview。一个加载的的是当前页面，加载地址和当前页面路径一致。一个是instanceframe.html。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7260d572fe7044a89e52f8a0667cb47c~tplv-k3u1fbpfcp-zoom-1.image) 微信小程序在初始化的时候，除了渲染首页之后，会帮我们提前额外的预加载一个webview,微信起名为instanceframe.html，用来新渲染webview的模板。我们通过微信开发者工具打开调试，打开这个 instanceframe.html ``` document.getElementsByTagName('webview')[1].showDevTools(true, null) ``` 下图是pageframe/instanceframe.html的模板 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/813ddf5c370347d3b401e4dc7b31de1b~tplv-k3u1fbpfcp-zoom-1.image) ### pageFrame的html结构中注入的js资源 - ./__dev__/wxconfig.js 小程序默认总配置项，包括用户自定义与系统默认的整合结果。在控制台输入__wxConfig可以看出打印结果 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15f303b37e4b4ea79c50e14335efe18b~tplv-k3u1fbpfcp-zoom-1.image) - ./__dev__/devtoolsconfig.js 小程序开发者配置，包括navigationBarHeight,标题栏的高度，状态栏高度，等等，控制台输入__devtoolsconfig可以看到其对应的信息 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6ffc4cee9d9f4526bb4c79010837ae6e~tplv-k3u1fbpfcp-zoom-1.image) - ./__dev__/deviceinfo.js 设备信息，包含尺寸/像素点pixelRatio - __dev__/jsdebug.js debug工具 - ./__dev__/WAWebview.js 渲染层底层基础库 - ./__dev__/hls.js 优秀的视频流处理工具 - ./__dev__/WARemoteDebug.js 底层基础库调试工具 - 注释占位符，整个页面的json wxss wxml编译之后都存储在这里，当前是一个预设的html模版，所以是空的 ### wxappcode.js 我们按同样的调试方法，去找到首页的wxappcode.js结构，简单说明下 ``` var decodeJsonPathName = decodeURI("pages/index/index") __wxAppCode__[decodeJsonPathName + ".json"]={"usingComponents":{}} var decodeWxmlPathName = decodeURI("pages/index/index") __wxAppCode__[decodeWxmlPathName + ".wxml"]=$gwx("./" + decodeWxmlPathName + ".wxml") var decodeWxssPathName = decodeURI("pages/index/index") __wxAppCode__[decodeWxssPathName + ".wxss"]=((window.eval || __global.__hackEval)('setCssToHead([\x22.\x22,[1],\x22test{ height: calc(\x22,[0,100],\x22-2px); ;wxcs_style_height : calc(100rpx-2px); width: \x22,[0,200],\x22; ;wxcs_style_width : 200rpx; ;wxcs_originclass: .test;;wxcs_fileinfo: ./pages/index/index.wxss 2 1; }\n\x22,],undefined,{path:\x22./pages/index/index.wxss\x22})')); window.__mainPageFrameReady__ && window.__mainPageFrameReady__() ``` 文件包含了所有文件的编译路径主要几个重要的函数和属性有 - decodeJsonPathName - .json配置 - .wxml编译后的$gwx函数。 - .wxss编译后的eval函数。后两个函数我们会在后文展开分析。 **当小程序需要打开某个页面的时候，只需要提取页面的者几个属性，注入到预加载的html模版中就可以快速生成一个新的webview** ### 快速启动在视图层内，每个页面都是一个webiew，当小程序启动时只有首页一个webview 执行wx.navigateTo新开一个页面的时候，就会创建一个新的webview并插入到视图层 wx.navigateBack则为销毁webview 小程序每个视图层页面内容都是通过pageframe.html模板来生成的。 - 首页启动时，即第一次通过pageframe.html生成内容后，后台服务会缓存pageframe.html模板首次生成的html内容 - 非首次新打开页面时，页面请求的pageframe.html内容直接走后台缓存 - 非首次新打开页面时，pageframe.html页面引入的外链js资源走本地缓存这样在后续新打开页面时，都会走缓存的pageframe的内容，避免重复生成，快速打开一个新页面。 ### 首次打开新页面 - 启动一个webview，src为空地址http://127.0.0.1:${global.proxyPort}/aboutblank?${c} - webview 初始化完毕后，设置地址src 为pageframe.html，开始加载注入的预设样式和预设js 代码 - pageframe.html在dom ready之后，触发注入并执行具体页面的相关代码下图代码中可以看到dom加载完毕之后，触发alert 通知 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9d9c09c6ea2645f2b1f8aed9cc179701~tplv-k3u1fbpfcp-zoom-1.image) - 此时通过history.pushState方法修改webview的src但是webview并不会发送页面请求。 - 因此webview 路径变化为 - - http://127.0.0.1:${global.proxyPort}/aboutblank?${c} - http://127.0.0.1::63444/__pageframe__/instanceframe.html - http://127.0.0.1:63444/__pageframe__/pages/index/index - 正好对应webview 加载过程 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/672d25a841a140f39200dab9b2c7006f~tplv-k3u1fbpfcp-zoom-1.image) ## wxml 设计思路网页编程一般采用的是HTML + CSS + JS的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。小程序自行搭建了组件组织框架Exparser框架 **Exparser的组件模型与WebComponents标准中的ShadowDOM高度相似** 如下代码，我们定义在wxml中 ``` Weixin 文本 ``` Exparser框架会将上述结构转换为下面这个样子 ``` Weixin 文本按钮 ``` 这样看的话是不是和WebComponents一样了，但是小程序并没有直接使用WebComponents，而是自行搭建了组件框架Exparser。 ### WebComponents Web Components 是一个浏览器原生支持的组件化方案，允许你创建新的自定义、可封装、可重用的HTML 标记。不用加载任何外部模块，直接就可以在浏览器中跑。如下代码，标签就是自定义组件的标签了，它不属于html语义化标签中的任何一个，是自定义的。 ```html ``` WebComponent主要就是三个规范： - **Custom Elements规范** 可以创建一个自定义标签。根据规范，自定义元素的名称必须包含连词线”-“，用与区别原生的 HTML 元素。可以指定多个不同的回调函数，它们将会在元素的不同生命时期被调用。 - **templates** **规范** 提供了`