小程序概要
- 小程序运行环境
- 小程序与H5的区别
- 小程序编译原理及反编译的实现
- 错误日志监控平台FrontJs
- 小程序运营数据及埋点
微信小程序运行在三端：iOS、Android 和 用于调试的开发者工具
- 在 iOS 上，小程序的 javascript 代码是运行在 JavaScriptCore 中
- 在 Android 上，小程序的 javascript 代码是通过 X5 内核来解析
- 在 开发工具上， 小程序的 javascript 代码是运行在 nwjs（chrome内核） 中
表1-1 小程序的运行环境
| 运行环境 | 逻辑层 | 渲染层 |
|---|---|---|
| iOS | JavaScriptCore | WKWebView |
| 安卓 | X5 JSCore | X5浏览器 |
| 小程序开发者工具 | NWJS | Chrome WebView |
小程序与普通网页开发的区别
- 网页开发渲染线程和脚本线程是互斥的，长时间的脚本运行会导致页面失去响应, 小程序中，二者是分开的，分别运行在不同的线程中
- 网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作， 小程序的逻辑层和渲染层是分开的，不是一个完整浏览器对象，缺少相关的DOM API和BOM API。
- 网页开发者需要面对的环境是各式各样的浏览器，小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端
真机运行环境
微信小程序的运行环境应该更类似 ReactNative 之类，而不是纯 Html5。两者最大的不同在于，ReactNative 的界面是由原生控件渲染出来的，而 Html5 的界面是由浏览器内核渲染出来的,原理上小程序是如何在微信 App 里运行的
- 微信 App 里包含 javascript 运行引擎
- 微信 App 里包含了 WXML/WXSS 处理引擎，最终会把界面翻译成系统原生的控件，并展示出来。这样做的目的是为了提供和原生 App 性能相当的用户体验。
开发工具
小程序的 javascript 代码运行在 nwjs 中,nwjs 合并 Browser 和 Node.js的运行时，可以使用前端开发技术来开发跨平台的应用程序。借助 Node.js 访问操作系统原生 API 的能力，可以开发中跨平台的应用程序,如果你是Mac用户，进入目录/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app,可以看到开发工具的实现代码，当然代码是经过混淆的。网上流行的破解版本开发工具原理上就是修改这里面的代码。
小程序加载运行的过程
- 用户点击打开一个小程序
- 微信 App 从微信服务器下载这个小程序
- 分析 app.json 得到应用程序的配置信息（导航栏，窗口样式，包含的页面列表等）
- 加载并运行 app.js
- 加载并显示在 app.json 里配置的第一个页面 小程序架构
小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型如图3-1所示。
生命周期
至于微信 App 是如何与小程序的逻辑层 javascript 交互的呢？可以简单地归纳如下： JavaScript 是脚本语言，可以在运行时解释并执行。微信 App 里包含了一个 JavaScript 引擎，由它来负责执行逻辑层的 JavaScript 代码。那么 JavaScript 调用的小程序相关 API最终会被翻译成实现在微信 App 里的原生接口
编译
通过微信开发者工具上传, 编译经过一系列的混淆, 压缩加密后, 变成微信小程序所对应的 wxapkg 包文件 , 其位置位于Android 手机中的 /data/data/com.tencent.mm/MicroMsg/{User}/appbrand/pkg({User}, 其中User 为当前用户的用户名，类似于2bc******b65 命名的文件夹
错误监控
推荐FrontJS : https://www.frontjs.com/home/tour
常见错误: http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1360&highlight=%E9%9D%A2%E5%90%91%E6%96%B0%E6%89%8B
运营数据
有两种方式可以方便的看到小程序的 运营数据
方法一：
登录 小程序管理后台 - 数据分析
点击相应的 tab 可以看到相关的数据。
方法二：
使用小程序数据助手，在微信中方便的查看运营数据
几个不足：
- 不支持从 node_modules 中加载模块。这样无形中就把 npm 排除在外了。从开发生态角度，这个应该是微信小程序下一步要重点解决的问题吧。
- 开发工具自带的代码编辑器还是太简陋了， 生态不够完善
