微信小程序面试题之理论篇

本文内容，来源于极客学院的分享，这里只做引用。

说说你对微信小程序的理解?优缺点?
- 背景
  - 小程序与H5
- 优缺点
  - 优点：
  - 缺点：
说说微信小程序的生命周期函数有哪些？
- 应用的生命周期
- 页面的生命期
- 组件的生命周期
- 执行过程
  - 应用的生命周期执行过程：
  - 页面生命周期的执行过程：
  - 当存在应用生命周期和页面周期的时候，相关的执行顺序如下:
说说微信小程序中路由跳转的方式有哪些?区别?
- 是什么
- 有哪些
- wx.navigateToobject
- wx.redirectToobject
- wx.switchTabobject
- wx.navigateBackobject
- wx.reLaunchobject
- 总结
  - 关于上述五种跳转方式，做下总结
  - 其中关于它们的页面栈的关系如下 :
说说微信小程序的实现原理?
- 背景
- 通信
- 运行机制
  - 需要注意
说说提高微信小程序的应用速度的手段有哪些？
- 加载白屏
- 解决方案
  - 加载
  - 渲染
- 总结
  - 小程序启动加载性能：
  - 小程序渲染性能：

说说你对微信小程序的理解?优缺点?

2017年，微信正式推出了小程序，允许外部开发者在微信内部运行自己的代码，开展业务。

截至目前，小程序已经成为国内前端的一个重要业务，跟 Web 和手机 App 有着同等的重要性

小程序是—种不需要下载安装即可使用的应用，它实现了应用"触手可及" 的梦想 , 用户扫-扫或者搜-下即可打开应用

也体现了 " 用完即走 " 的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载

注意的是，除了微信小程序，还有百度小程序、微信小程序、支付宝小程序、抖音小程序，都是每个平台自己开发的，都是有针对性平台的应用程序

背景

小程序并非凭空冒出来的一个概念，当微信中的 WebView 逐渐成为移动 Web 的一个重要入口时，微信就有相关的 JS-SDK 。

JS-SDK 解决了移动网页能力不足的问题，通过暴露微信的接口使得 Web 开发者能够拥有更多的能力 , 然而在更多的能力之外 JS-SDK 的模式并 没有解决使用移动网页遇到的体验不良 的问题。

因此需要设计 — 个比较好的系统，使得所有开发者在微信中都能获得比较好的体验：

快速的加载
更强大的能力
原生的体验
易用且安全的微信数据开放
高效和简单的开发

这些是 JS-SDK 做不到的，需要设计一个全新的小程序系统。

对于小程序的开发，提供一个简单、高效的应用开发框架和丰富的组件及 API ，帮助开发者开发出具有原生体验的服务

小程序与H5

其中相比H5，小程序与其的区别有如下：

运行环境：小程序基于浏览器内核重构的内置解析器
系统权限：小程序能获得更多的系统权限，如网络通信状态、数据缓存能力等
渲染机制：小程序的逻辑层和渲染层是分开的

小程序可以视为 只能用微信打开和浏览的H5，

小程序和网页的技术模型是一样的，用到的 JavaScript 语言和 CSS 样式也是一样的，只是网页的 HTML 标签被稍微修改成了 WXML 标签

因此可以说，小程序页面本质上就是网页

优缺点

优点：

随搜随用，用完即走：使得小程序可以代替许多APP ，或是做APP的整体嫁接，或是作为阉割版功能的承载体
流量大 , 易接受：小程序借助自身平台更加容易引入更多的流量
安全
开发门槛低
降低兼容性限制

缺点：

用户留存 ：及相关数据显示，小程序的平均次日留存在13%左右，但是双周留存骤降到仅有1%
体积限制 ：微信小程序只有2M的大小，这样导致无法开发大型-些的小程序
受控微信：比起APP ，尤其是安卓版的高自由度，小程序要面对很多来自微信的限制，从功能接
口，甚至到类别内容，都要接受微信的管控

说说微信小程序的生命周期函数有哪些？

跟vue 和 react 框架一样，微信小程序框架也存在生命周期，实质也是 -堆会在特定时期执行的函数

小程序中，生命周期主要分成了三部分 :

应用的生命周期
页面的生命周期
组件的生命周期

应用的生命周期

小程序的生命周期函数是在 app.js 里面调用的，通过 App(Object) 函数用来注册-个小程序，指定其小程序的生命周期回调

官网地址：https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html#%E5%8F%82%E6%95%B0

页面的生命期

页面生命周期函数就是当你每进入/切换到一个新的页面的时候，就会调用的生命周期函数同样通过 App(Object) 函数用来注册 — 个页面

组件的生命周期

组件的生命周期指的是 组件自身的 -些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发，通过 Component(Object) 进行注册组件

注意的是：

组件实例刚刚被创建好时， created 生命周期被触发 ，此时，组件数据 this. data 就是在component 构造器中定义的数据 data ，此时不能调用 setData
在组件完全初始化完毕、进入页面节点树后 ， attached 生命周期被触发 。此时， this. data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行
在组件离开页面节点树后， detached 生命周期被触发 。退出 — 个页面时，如果组件还在页面节点树中，则 detached 会被触发

还有一些特殊的生命周期，它们并非与组件有很强的关联，但有时组件需要获知，以便组件内部处理。

这样的生命周期称为 "组件所在页面的生命周期 " ，在 pageLifetimes 定义段中定义，如下：

Component({
    pageLifetimes: {
        show: function() {
            // 页面被展示
        },
        hide: function() {
            // 页面被隐藏
        },
    }
})

执行过程

应用的生命周期执行过程：

用户首次打开小程序，触发 onLaunch (全局只触发一次)
小程序初始化完成后，触发onShow方法，监听小程序显示
小程序从前台进入后台，触发 onHide方法
小程序从后台进入前台显示，触发 onShow方法
小程序后台运行一定时间，或系统资源占用过高，会被销毁

页面生命周期的执行过程：

小程序注册完成后，加载页面，触发onLoad方法
页面载入后触发onShow方法，显示页面
首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次
当小程序后台运行或跳转到其他页面时，触发onHide方法
当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法
当使用重定向方法 wx.redirectTo()或关闭当前页返回上一页wx.navigateBack()，触发onUnload

当存在应用生命周期和页面周期的时候，相关的执行顺序如下:

打开小程序:(App)onLaunch -->(App)onShow --> (Pages)onLoad–>(Pages)onShow–>(pages)onRead
进入下一个页面:(Pages)onHide -->(Next)onLoad -->(Next)onShow -->(Next)onReady
返回上一个页面:(curr)onUnload -->(pre)onShow
离开小程序:(App)onHide
再次进入:小程序未销毁 -->(App)onShow(执行上面的顺序) ，小程序被销毁(App)onLaunch重新开始执行

说说微信小程序中路由跳转的方式有哪些?区别?

是什么

微信小程序拥有 web 网页和 Application 共同的特征

我们的页面都不是孤立存在的，而是通过和其他页面进行交互，来共同完成系统的功能

在微信小程序中，每个页面可以看成是一个 pageModel， pageModel 全部以栈的形式进行管理

有哪些

常见的微信小程序页面跳转方式有如下 :

wx.navigateTo(Object)
wx.redirectTo(Object)
wx.switchTab(Object)
wx.navigateBack(Object)
wx.reLaunch(Object)

wx.navigateTo(object)

wx.navigateTo() 用于保留当前页面、跳转到应用内的某个页面使用 wx.navigateBack 可以返回到原页面。

对于页面不是特别多的小程序 ，通常推荐使用 wx.navigateTo 进行跳转，以便返回原页面，以提高加载速度。当页面特别多时，则不推荐使用。

参数表如下所示：

wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

流程图如下:

wx.redirectTo(object)

重定向，当页面过多时，被保留页面会挤占微信分配给小程序的内存，或是达到 微信所限制的 10 层页面栈 的情况下，我们应该考虑选择 wx.redirectTo

wx.redirectTo() 用于关闭当前页面，跳转到应用内的某个页面

这样的跳转，可以避免跳转前页面占据运行内存，但返回时页面需要重新加载，增加了返回页面的显示时间

参数表如下所示：

wx.redirectTo({
  url: 'test?id=1'
})

流程图如下:

wx.switchTab(object)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

参数表如下所示 :

wx.navigateBack(object)

wx.navigateBack() 用于关闭当前页面，并 返回上—页面或多级页面

开发者可通过 getCurrentPages()获取当前的页面栈 ，决定需要返回几层则设置对象的 delta 属性 即可

参数表如下：

// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({
  delta: 2
})

wx.reLaunch(object)

关闭所有页面，打开到应用内的某个页面，返回的时候跳到首页

参数表如下所示：

wx.reLaunch({
  url: 'test?id=1'
})

总结

关于上述五种跳转方式，做下总结

navigateTo 保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回到原页
redirectTo 关闭当前页面，跳转到应用内的某个页面
switchTab 跳转到 tabBar 页面，同时关闭其他非 tabBar 页面
navigateBack 返回上 — 页面
reLanch 关闭所有页面，打开到应用内的某个页面

其中关于它们的页面栈的关系如下 :

navigateTo 新页面入栈
redirectTo 当前页面出栈，新页面入栈
navigateBack 页面不断出栈，直到目标返回页，新页面入栈
switchTab 页面全部出栈，只留下新的 Tab 页面
reLanch 页面全部出栈，只留下新的页面

说说微信小程序的实现原理?

背景

网页开发，渲染线程和脚本是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应的原因，本质就是我们常说的 JS是单线程的

而在小程序中，选择了 Hybrid 的渲染方式 ，将视图层和逻辑层是分开的， 双线程同时运行 :

视图层的界面使用 WebView 进行渲染，
逻辑层运行在 JsCore 中

渲染层：界面渲染相关的任务全都在 webview 线程里执行。-个小程序存在多个界面，所以渲染层存在多个 webview 线程
逻辑层：采用 JsCore 线程运行 JS 脚本，在这个环境下执行的都是有关小程序业务逻辑的代码

通信

小程序在渲染层，宿主环境会 把wxml 转化成对应的JS对象

在逻辑层发生数据变更的时候，通过宿主环境提供的 setData 方法 把数据从逻辑层传递到染层，再经过对比前后差异，把差异应用在原来的 Dom 树上，染出正确的视图

当视图存在交互的时候，例如用户点击你界面上某个按钮，这类反馈应该通知给开发者的逻辑层，需要将对应的处理状态呈现给用户

对于事件的分发处理，微信进行了特殊的处理，将所有的事件拦截后，丢到逻辑层交给 JavaScript 进行处理

由于小程序是基于双线程的 ，也就是任何在视图层和逻辑层之间的数据传递都是线程间的通信，会有-
定的延时，因此在小程序中，页面更新成了异步操作

异步会使得各部分的运行时序变得复杂-些，比如在渲染首屏的时候，逻辑层与渲染层会同时开始初始
化工作，但是渲染层需要有逻辑层的数据才能把界面渲染出来

如果渲染层初始化工作较快完成，就要等逻辑层的指令才能进行下-步工作

因此逻辑层与渲染层需要有一定的机制保证时序正确，在每个小程序页面的生命周期中，存在着若干次
页面数据通信

运行机制

小程序启动运行两种情况：

冷启动 (重新开始) ：用户首次打开或者小程序被微信主动销毁后再次打开的情况，此时小程序需
要重新加载启动，即为冷启动
热启动： 用户已经打开过小程序，然后在-定时间内再次打开该小程序，此时无需重新启动，只需
要将后台态的小程序切换到前台，这个过程就是热启动

需要注意

小程序没有重启的概念
当小程序进入后台，客户端会维持 —段时间的运行状态，超过 — 定时间后会被微信主动销毁
短时间内收到系统两次以上内存警告，也会对小程序进行销毁，这也就为什么-旦页面内存溢出，页面会奔溃的本质原因了

开发者在后台发布新版本之后，无法立刻影响到所有现网用户，但最差情况下，也在发布之后 24 小时之
内下发新版本信息到用户

每次冷启动时，都会检查是否有更新版本，如果发现有新版本 , 将会异步下载新版本的代码包，并同时
用客户端本地的包进行启动，即 新版本的小程序需要等下一次冷启动才会应用上

说说提高微信小程序的应用速度的手段有哪些？

加载白屏

小程序启动会常常遇到如下图场景 :

这是因为，小程序首次启动前，微信会在小程序启动前为小程序准备好通用的运行环境，如运行中的线程和一些基础库的初始化

然后才开始进入启动状态，展示一个固定的启动界面，界面内包含小程序的图标名称和加载提示图标。

此时，微信会在背后完成几项工作 :

下载小程序代码包
加载小程序代码包
初始化小程序首页

下载到的小程序代码包不是小程序的源代码，而是编译、压缩、打包之后的代码包

整体流程如下图：

解决方案

围绕上图小程序的启动流程我们可以从：

加载
渲染

两个纬度进行切入。

加载

提升体验最直接的方法是 控制小程序包的大小 ，常见手段有如下：

代码包的体积压缩可以通过勾选开发者工具中" 上传代码时，压缩代码 "选项
及时清理无用的代码和资源文件
减少资源包中的图片等资源的数量和大小 (理论上除了小icon ，其他图片资源从网络下载) , 图片资源压缩率有限
分包

采取分包加载的操作，将用户访问率高的页面放在主包里，将访问率低的页面放入子包里，按需加载

当用户点击到子包的目录时，还是有一个代码包下载的过程，这会感觉到明显的卡顿，所以 子包也不建议拆的太大

当然我们可以采用 子包预加载技术 ，并不需要等到用户点击到子包页面后在下载子包

渲染

关于微信小程序首屏渲染优化的手段如下：

请求可以在页面onLoad就加载，不需要等页面ready后在异步请求数据
尽量减少不必要的https请求，可使用 getStorageSync() 及 setStorageSync() 方法将数据存储在本地
可以在前置页面将 — 些有用的字段带到当前页，进行首次渲染 (列表页的某些数据–> 详情页) ,没有数据的模块可以进行骨架屏的占位

在微信小程序中，提高页面的多次渲染效率主要在于 正确使用setData

不要过于频繁调用setData ，应考虑将多次setData合并成-次setData调用
数据通信的性能与数据量正相关，因而如果有-些数据字段不在界面中展示且数据结构比较复杂或包含长字符串，则不应使用 setData 来设置这些数据
与界面渲染无关的数据最好不要设置在data中，可以考虑设置在page对象的其他字段下

除此之外，对于 -些独立的模块我们尽可能抽离出来,这是因为 自定义组件的更新并不会影响页面上其他元素的更新

各个组件也将具有各自独立的逻辑空间。每个组件都分别拥有自己的独立的数据、 setData 调用