本文内容,来源于极客学院的分享,这里只做引用。
-
说说你对微信小程序的理解?优缺点?
-
背景
- 小程序与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对象的其他字段下
除此之外 , 对于 -些独立的模块我们尽可能抽离出来,这是因为 自定义组件的更新并不会影响页面上其他元素的更新文章来源:https://www.toymoban.com/news/detail-787544.html
各个组件也将具有各自独立的逻辑空间 。每个组件都分别拥有自己的独立的数据 、 setData 调用文章来源地址https://www.toymoban.com/news/detail-787544.html
总结
小程序启动加载性能:
- 控制代码包的大小
- 分包加载
- 首屏体验 (预请求, 利用缓存 ,避免白屏, 及时反馈
小程序渲染性能:
- 避免不当的使用setData
- 使用自定义组件
到了这里,关于微信小程序面试题之理论篇的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!