提示

1. 了解小程序的基本原理
2. 了解小程序的相关 api
3. 了解小程序的发布流程

什么是小程序

⼩程序⻚⾯本质上是⽹⻚：

1. 使⽤技术栈与⽹⻚开发是⼀致的，都⽤到 HTML、CSS 和 JS；
2. 区别：不⽀持浏览器 API，只能⽤微信提供的 API；

外部代码通过⼩程序这种形式，在⼿机 App ⾥⾯运⾏：微信、⽀付宝， ⼩程序可以视为只能⽤微信等 APP 作为载体打开和浏览的⽹站。

技术选型

渲染界⾯的技术⽅案：

1. ⽤纯客户端原⽣技术渲染；
2. ⽤纯 Web 技术渲染；
3. ⽤客户端原⽣技术与 Web 技术结合的混合技术（简称 Hybrid 技术）渲染；

⽅案对⽐：

1. 开发⻔槛：Web ⻔槛低，Native 也有像 RN 这样的框架⽀持；
2. 体验：Native 体验⽐ Web 要好太多，Hybrid 在⼀定程度上⽐ Web 接近原⽣体验；
3. 版本更新：Web ⽀持在线更新，Native 则需要打包到微信⼀起审核发布；
4. 管控和安全：Web 可跳转或是改变⻚⾯内容，存在⼀些不可控因素和安全⻛险；

⽅案确定：

1. ⼩程序的宿主环境是微信等⼿机 APP，⽤纯客户端原⽣技术来编写⼩程序，那么⼩程序代码每次都 需要与⼿机 APP 代码⼀起发版 ❎；
2. Web ⽀持有⼀份副本资源包放在云端，通过下载到本地，动态执⾏后即可渲染出界⾯，但纯 Web 技术在⼀些复杂的交互上可能会⾯临⼀些性能问题 ❎； a. 在 Web 技术中，UI 渲染跟脚本执⾏都在⼀个单线程中执⾏，这就容易导致⼀些逻辑任务抢占 UI 渲染的资源。
3. 两者结合起来的 Hybrid 技术来渲染⼩程序，⽤⼀种近似 Web 的⽅式来开发，并且可以实现在线更 新代码 ✅； a. 扩展 Web 的能⼒。⽐如像输⼊框组件（input, textarea）有更好地控制键盘的能⼒； 3.3.2. 技术选型 4 b. 体验更好，同时也减轻 WebView 的渲染⼯作； c. ⽤客户端原⽣渲染内置⼀些复杂组件，可以提供更好的性能；

双线程模型

⼩程序的渲染层和逻辑层分别由 2 个线程管理：

1. 视图层 -> WebView 进⾏渲染；
2. 逻辑层 -> JsCore 线程运⾏ JS 脚本；

设计⽬的：为了管控和安全等问题，阻⽌开发者使⽤⼀些，例如浏览器的 window 对象，跳转⻚⾯、操 作 DOM、动态执⾏脚本的开放性接⼝； 使⽤沙箱环境提供纯 JavaScript 的解释执⾏环境

1. 客户端系统：JavaScript 引擎；
2. iOS ： JavaScriptCore 框架；
3. 安卓：腾讯 x5 内核提供的 JsCore ； ⼩程序双线程模型： 逻辑层：创建⼀个单独的线程去执⾏ JavaScript，在这⾥执⾏的都是有关⼩程序业务逻辑的代码， 负责逻辑处理、数据请求、接⼝调⽤等； 视图层：界⾯渲染相关的任务全都在 WebView 线程⾥执⾏，通过逻辑层代码去控制渲染哪些界 ⾯。⼀个⼩程序存在多个界⾯，所以视图层存在多个 WebView 线程； JSBridge 起到架起上层开发与 Native（系统层）的桥梁，使得⼩程序可通过 API 使⽤原⽣的功能， 且部分组件为原⽣组件实现，从⽽有良好体验；

数据驱动视图变化

问题：JS 逻辑代码放到单独的线程去运⾏，在 Webview 线程⾥没法直接操作 DOM。开发者如何实现 动态更改界⾯呢？

DOM 的更新通过简单的数据通信来实现 逻辑层和视图层的通信会由 Native （微信客户端）做中转，逻辑层发送⽹络请求也经由 Native 转发。 JS 对象模拟 DOM 树 -> ⽐较两棵虚拟 DOM 树的差异 -> 把差异应⽤到真正的 DOM 树上。

1. 在渲染层把 WXML 转化成对应的 JS 对象；
2. 在逻辑层发⽣数据变更的时候，通过宿主环境提供的 setData ⽅法把数据从逻辑层传递到 Native，再 转发到渲染层；
3. 经过对⽐前后差异，把差异应⽤在原来的 DOM 树上，更新界⾯；

事件的处理

视图层需要进⾏交互，这类反馈应该通知给开发者的逻辑层，需要将对应的处理状态呈现给⽤户。 视图层的功能只是进⾏渲染，因此对于事件的分发处理，微信进⾏了特殊的处理，将所有的事件拦截 后，丢到逻辑层交给 JS 处理。

事件的派发处理包括事件捕获和冒泡两种： 通过 native 传递给 JSCore，通过 JS 来响应响应的事件之后，对 Dom 进⾏修改，改动会体现在虚拟 Dom 上，然后再进⾏真实的渲染

运⾏机制

⼩程序启动机制：

1. 冷启动：⽤户⾸次打开或⼩程序被微信主动销毁后再次打开的情况，此时⼩程序需要重新加载启 动。
2. 热启动：假如⽤户已经打开过某⼩程序，然后在⼀定时间内再次打开该⼩程序，此时⽆需重新启 动，只需将后台状态的⼩程序切换到前台；

注意：

• ⼩程序没有重启的概念；
• 当⼩程序进⼊后台，客户端会维持⼀段时间的运⾏状态，超过⼀定时间后（⽬前是 5 分钟）会被微信 主动销毁；
• 当短时间内（5s）连续收到两次以上收到系统内存告警，会进⾏⼩程序的销毁；

小程序相关

⾯试常⻅问题

框架相关

为什么要分包？

⽬前⼩程序分包⼤⼩有以下限制：

1. 整个⼩程序所有分包⼤⼩不超过 20M；
2. 单个分包/主包⼤⼩不能超过 2M；

对⼩程序进⾏分包，可以优化⼩程序⾸次启动的下载时间，以及在多团队共同开发时可以 更好的解耦协作；

如何提升⼩程序 SEO？

1. 官⽅⽂档： https://developers.weixin.qq.com/miniprogram/dev/framework/search/seo.html (opens new window)

2. ⼩程序⾥跳转的⻚⾯ (url) 可被直接打开；

3. ⻚⾯跳转优先采⽤ navigator 组件；

4. 清晰简洁的⻚⾯参数；

5. 配置⼩程序 sitemap；

6. 必要的时候才请求⽤户进⾏授权、登录、绑定⼿机号等；

7. 我们不收录 web-view 中的任何内容；

8. 设置⼀个清晰的标题和⻚⾯缩略图；

如何进⾏⻚⾯间通信？

使⽤ wx.navigateTo 打开，这两个⻚⾯间将建⽴⼀条数据通道：

1. 被打开的⻚⾯可以通过 this.getOpenerEventChannel() ⽅法来获得⼀个 EventChannel 对象；
2. wx.navigateTo 的 success 回调中也包含⼀个 EventChannel 对象；
3. 这两个 EventChannel 对象间可以使⽤ emit 和 on ⽅法相互发送、监听事件；

性能相关

a. ⼩程序启动流程 官⽅⽂档： https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips/start (opens new window)_ process.html b. ⼩程序切换⻚⾯流程 官⽅⽂档： https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips/runti (opens new window) me_nav.html c. 如何提升⼩程序性能 ⅰ. 启动时性能优化

1. 代码包体积优化；
2. 代码注⼊优化；
3. ⾸屏渲染优化；
4. 其他优化；

ⅱ. 运⾏时性能优化；

1. 合理使⽤ setState；
2. 渲染性能优化；
3. ⻚⾯切换优化；
4. 资源加载优化；
5. 内存优化；