小程序

• 微信客户端（渲染层webview、逻辑层jsCore、Native）
• 相比h5：运行环境内置解析器、更多系统权限、渲染机制（逻辑、渲染分开）
• 随用随搜，用完即走
• 微信流量入口
• 安全
• 开发门槛低
• 降低兼容性限制
• 缺点: 用户留存、体积受限（2M）、受控微信
• 优化: 压缩代码、及时清理无用代码和文件、图片等 cdn、分包加载、onLoad加载请求、减少https、缓存、骨架屏、合并setData）

小程序采用的是一种分离的渲染机制。双线程架构，逻辑层和渲染层是分开的，它们运行在两个不同的线程中。（PS: 敲重点！！ 因为渲染层和逻辑层分离，所以 js (逻辑层)不能直接访问 dom (渲染层)）

• 逻辑层运行在 JavaScriptCore 中，负责数据处理和事件处理等逻辑；
• 而渲染层则运行在 WebView 中，负责页面的渲染。
• 这两个线程通过一个数据桥进行通信，JS 线程将需要渲染的数据发送到渲染线程，然后由渲染线程根据这些数据来渲染页面。
• 性能提升 由于小程序的渲染过程并不依赖于 JS，因此即使 JS 线程发生阻塞，页面的渲染也不会受到影响。这种机制有利于提高渲染效率，减少卡顿，提升用户体验。
• 小程序由于不支持直接操作 DOM，因此所有的页面更新都是通过数据驱动的，这使得代码更为简洁，易于维护。

登录流程

说明

• 调用 wx.login() 获取 临时登录凭证 code，并回传到开发者服务器。
• 调用 auth.code2Session 接口，换取 用户唯一标识 OpenID 、 用户在微信开放平台账号下的唯一标识 UnionID（若当前小程序已绑定到微信开放平台账号） 和 会话密钥 session_key。

之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。

注意事项

• 会话密钥 session_key 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全，开发者服务器不应该把会话密钥下发到小程序，也不应该对外提供这个密钥。
• 临时登录凭证 code 只能使用一次。

特殊字段

• openid：openid 是用来唯一标识用户的一个字符串。在微信小程序中，每个用户的 openid 都是唯一的。通过 openid，小程序可以获取用户的基本信息，如头像、昵称等。

【注意】同一个用户在不同的小程序中拥有不同的openid。因此，在开发小程序时，不能使用openid来进行用户的唯一性判断。

• unionid：unionid 是在用户绑定同一微信开放平台账号下的多个应用时，用来唯一标识用户的一个字符串。如果用户在多个小程序中使用同一个微信号进行登录授权，那么这些小程序中的 unionid 都是相同的。

【注意】用户的 unionid 只有在用户将多个应用绑定到同一个微信开放平台账号下时才会生成。因此，如果用户没有绑定多个应用，那么小程序将无法获取用户的 unionid。

• code：code 是用户登录凭证，由微信服务器颁发给小程序。在用户授权登录后，小程序可以通过调用微信登录接口获取用户的 code。然后，通过 code 向微信服务器请求用户的 openid 和 session_key 等信息。

【注意】每个 code 只能使用一次，且有效期为 5 分钟。因此，在使用 code 进行登录时，需要及时将其转换成用户的 openid 和 session_key 等信息，以免出现 code 过期的情况。

小程序的增量更新

小程序的增量更新机制主要依赖于小程序平台的设计

当小程序开发者发布新版本时，小程序平台会比较新旧两个版本的差异，并生成一个包含差异信息的补丁文件。然后，当用户打开小程序时，小程序平台会检查用户设备上的小程序版本。如果发现用户的版本落后于服务器上的版本，那么就会下载补丁文件，而不是整个新版本的代码包。接着，小程序平台会应用补丁文件，将用户设备上的小程序更新到新版本。

性能优化

微信 IDE 的小程序评分功能位于调试器-> Audits 面板中

小程序性能优化的具体维度：

1. 避免过大的 WXML 节点数目
2. 避免执行脚本的耗时过长的情况
3. 避免首屏时间太长的情况
4. 避免渲染界面的耗时过长的情况
5. 对网络请求做必要的缓存以避免多余的请求
6. 所有请求的耗时不应太久
7. 避免 setData 的调用过于频繁
8. 避免 setData 的数据过大
9. 避免短时间内发起太多的图片请求
10. 避免短时间内发起太多的请求

工程化

webpack 提升小程序的研发效率

1. 管理第三方 npm 模块
2. 使用 TypeScript 编写源码
3. 使用预处理器编写模块化的样式
4. 使用 lint 工具统一源码规范
5. 图片压缩
6. 多环境支持

小程序框架

框架	技术栈	微信小程序	H5	App	支付宝/百度小程序
Taro	React/Vue	✅	✅	✅	✅
uni-app	Vue	✅	✅	✅	✅
WePY	Vue	✅	❌	❌	❌
mpvue	Vue	✅	✅	❌	❌

Taro

京东凹凸实验室

优缺点

• Taro 在 App 端使用的是 React Native 的渲染引擎，原生的 UI 体验较好，但据说在实时交互和高响应要求的操作方面不是很理想。 微信小程序方面，结合度感觉没有那么顺滑，有一些常见功能还是需要自己去封装。

• 另外就是开发环境难度稍高，需要自己去搭建 iOS 和 Android 的环境，对于想要一处开发到处应用的傻瓜式操作来讲，稍显繁琐。

• 但 Taro 3 的出现，支持了 React 和 Vue 两种 DSL，适合的人群会更多一点，并且对快应用的支持也更好。

uni-app

DCloud

优缺点1

• uni-app 在 App 渲染方面，提供了原生渲染引擎和小程序引擎的双选方案，加上自身的一些技术优化（renderjs），对于高性能和响应要求的场景展现得更为流畅。

• 另外它整体的开发配套流程也做得很容易上手。比如有丰富的插件市场，使用简单，支持大量常用场景。

• 还比如它的定制 IDE——HBuilder，提供了强大的整合能力。在用 HBuilder 之前，我心想：“还要多装一个编辑器麻烦，再好用能有 VS Code 好用？”用过之后：“真香！”

• 虽然用惯了 VS Code 对比起来还是有一些痛点没有解决，但是对于跨平台开发太友好了，其他缺点都可以忍受。HBuilder 里支持直接跳转到微信开发者工具调试，支持真机实时预览，支持直接打包小程序和App，零门槛上手。