小程序

175 阅读5分钟

这里总结了一下我觉得很重要的小程序的面试题,有的来自jym的分享,有的是我从官方文档中提取的,觉得蛮重要的一些思想。

1.什么是小程序,小程序的由来,小程序解决了移动网页的什么问题

小程序是一种轻量级的应用,通常运行在移动端的app中。比如微信小程序,支付宝小程序,抖音小程序。

小程序其实是从移动网页开发衍生出来的。

有以下几个原因催生了小程序:

  1. 移动网页开发需要使用客户端的能力。微信中的 WebView 逐渐成为移动 Web 的一个重要入口。微信的用户量大,许多用户从微信这个入口去访问web。微信为了扩展自己公司内部业务的移动网页的功能和提升用户体验,微信通过JS-SDK(​JS-SDK是对之前的 WeixinJSBridge 的一个包装)为网页开发注入了微信的原生能力,开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个API。 后来越来越多网页开发者发现了JS-SDK使用。 从数据监控来看,绝大部分在微信内传播的移动网页都使用到了相关的接口。
  2. 移动网页开发中存在的问题。JS-SDK 解决了移动网页能力不足的问题,通过暴露微信的接口使得 Web 开发者能够拥有更多的能力,然而在更多的能力之外,JSSDK也有解决不了一些糟糕到用户体验,比如白屏,页面切换的生硬和点击的迟滞感。 所以,微信面临的问题是如何设计一个比较好的系统,使得所有开发者在微信中都能获得比较好的体验。

所以,需要一个全新的系统来解决移动网页开发的问题,它需要使得所有的开发者都能做到:

- 快速的加载

- 更强大的能力

- 原生的体验

- 易用且安全的微信数据开放

- 高效和简单的开发

2.小程序的框架

小程序的运行环境分成渲染层和逻辑层,其中 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。 这里小程序的运行机制和我们网页在浏览器中的运行机制很不一样。网页的运行机制可以看看这一个系列的文章developer.chrome.com/blog/inside…

小程序的 渲染层逻辑层 分别由2个线程管理:渲染层的界面使用了WebView进行渲染;逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面,所以渲染层存在多个WebView线程,这两个线程的通信会经由微信客户端(下文中也会采用Native来代指微信客户端)做中转,逻辑层发送网络请求也经由Native转发,小程序的通信模型下图所示。

image.png

程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发 JavaScript 代码的运行环境以及微信小程序的特有功能。

2.1 渲染层介绍

逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。

开发者写的所有代码最终将会打包成一份 JavaScript 文件,并在小程序启动的时候运行,直到小程序销毁。这一行为类似 ServiceWorker,所以逻辑层也称之为 App Service。

在 JavaScript 的基础上,我们增加了一些功能,以方便小程序的开发:

  • 增加 App 和 Page 方法,进行程序注册页面注册
  • 增加 getApp 和 getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。
  • 提供丰富的 API,如微信用户数据,扫一扫,支付等微信特有能力。
  • 提供模块化能力,每个页面有独立的作用域

注意:小程序框架的逻辑层并非运行在浏览器中,因此 JavaScript 在 web 中一些能力都无法使用,如 windowdocument 等。

2.2 视图层介绍

框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。

将逻辑层的数据反映成视图,同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language) 用于描述页面的结构。

WXS(WeiXin Script) 是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。

WXSS(WeiXin Style Sheet) 用于描述页面的样式。

组件(Component)是视图的基本组成单元。

3.小程序的运行机制

小程序从启动到最终被销毁,会经历很多不同的状态,小程序在不同状态下会有不同的表现。

image.png

  • 挂起

    小程序进入「后台」状态一段时间后(目前是 5 秒),微信会停止小程序 JS 线程的执行,小程序进入「挂起」状态。此时小程序的内存状态会被保留,但开发者代码执行会停止,事件和接口回调会在小程序再次进入「前台」时触发。

    当开发者使用了后台音乐播放后台地理位置等能力时,小程序可以在「后台」持续运行,不会进入到「挂起」状态

4.从页面的生命周期看小程序渲染层和逻辑层的交互

下图说明了页面 Page 实例的生命周期。

image.png

5.微信小程序页面件的跳转方式有哪些,有什么区别?