这里总结了一下我觉得很重要的小程序的面试题,有的来自jym的分享,有的是我从官方文档中提取的,觉得蛮重要的一些思想。
1.什么是小程序,小程序的由来,小程序解决了移动网页的什么问题
小程序是一种轻量级的应用,通常运行在移动端的app中。比如微信小程序,支付宝小程序,抖音小程序。
小程序其实是从移动网页开发衍生出来的。
有以下几个原因催生了小程序:
- 移动网页开发需要使用客户端的能力。微信中的 WebView 逐渐成为移动 Web 的一个重要入口。微信的用户量大,许多用户从微信这个入口去访问web。微信为了扩展自己公司内部业务的移动网页的功能和提升用户体验,微信通过JS-SDK(JS-SDK是对之前的 WeixinJSBridge 的一个包装)为网页开发注入了微信的原生能力,开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个API。 后来越来越多网页开发者发现了JS-SDK使用。 从数据监控来看,绝大部分在微信内传播的移动网页都使用到了相关的接口。
- 移动网页开发中存在的问题。JS-SDK 解决了移动网页能力不足的问题,通过暴露微信的接口使得 Web 开发者能够拥有更多的能力,然而在更多的能力之外,JSSDK也有解决不了一些糟糕到用户体验,比如白屏,页面切换的生硬和点击的迟滞感。 所以,微信面临的问题是如何设计一个比较好的系统,使得所有开发者在微信中都能获得比较好的体验。
所以,需要一个全新的系统来解决移动网页开发的问题,它需要使得所有的开发者都能做到:
- 快速的加载
- 更强大的能力
- 原生的体验
- 易用且安全的微信数据开放
- 高效和简单的开发
2.小程序的框架
小程序的运行环境分成渲染层和逻辑层,其中 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。 这里小程序的运行机制和我们网页在浏览器中的运行机制很不一样。网页的运行机制可以看看这一个系列的文章developer.chrome.com/blog/inside…
小程序的 渲染层 和 逻辑层 分别由2个线程管理:渲染层的界面使用了WebView进行渲染;逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面,所以渲染层存在多个WebView线程,这两个线程的通信会经由微信客户端(下文中也会采用Native来代指微信客户端)做中转,逻辑层发送网络请求也经由Native转发,小程序的通信模型下图所示。
程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发 JavaScript 代码的运行环境以及微信小程序的特有功能。
2.1 渲染层介绍
逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。
开发者写的所有代码最终将会打包成一份 JavaScript 文件,并在小程序启动的时候运行,直到小程序销毁。这一行为类似 ServiceWorker,所以逻辑层也称之为 App Service。
在 JavaScript 的基础上,我们增加了一些功能,以方便小程序的开发:
- 增加
App和Page方法,进行程序注册和页面注册。 - 增加
getApp和getCurrentPages方法,分别用来获取App实例和当前页面栈。 - 提供丰富的 API,如微信用户数据,扫一扫,支付等微信特有能力。
- 提供模块化能力,每个页面有独立的作用域。
注意:小程序框架的逻辑层并非运行在浏览器中,因此 JavaScript 在 web 中一些能力都无法使用,如 window,document 等。
2.2 视图层介绍
框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。
将逻辑层的数据反映成视图,同时将视图层的事件发送给逻辑层。
WXML(WeiXin Markup language) 用于描述页面的结构。
WXS(WeiXin Script) 是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。
WXSS(WeiXin Style Sheet) 用于描述页面的样式。
组件(Component)是视图的基本组成单元。
3.小程序的运行机制
小程序从启动到最终被销毁,会经历很多不同的状态,小程序在不同状态下会有不同的表现。
-
挂起
小程序进入「后台」状态一段时间后(目前是 5 秒),微信会停止小程序 JS 线程的执行,小程序进入「挂起」状态。此时小程序的内存状态会被保留,但开发者代码执行会停止,事件和接口回调会在小程序再次进入「前台」时触发。
4.从页面的生命周期看小程序渲染层和逻辑层的交互
下图说明了页面 Page 实例的生命周期。