小程序原理相关知识

用户971884103405
351 阅读5分钟

小程序

一、小程序实现原理

在 web 浏览器中渲染线程和 js 使用的是单线程模式，而小程序则是使用Hybrid模式

Hybrid模式介绍

  • 视图层view是通过webview来渲染的
  • 逻辑层js是通过 jscore来执行
  • js与view交互是通过native 进行通信的

view 输入框修改之后，是通过 native 来进行向 逻辑层 转发

js在请求HTTP请求时，不是通过 webview 进行请求的，而是通过 native 的中间层进行发送

二、运行机制

冷/热启动

  • 冷启动：小程序重新启动
  • 热启动：后台状态切换到前台状态

冷启动触发时机：

  1. 当第一次打开小程序时，会触发冷启动。
  2. 当退出小程序时，小程序不会立即销毁，会在后台运行一段时间，当到达一定的时间如果没有激活小程序，微信则会主动进行销毁，再次打开则会进行冷启动
  3. 当短时间内，系统收到两次以上的内存警告时，微信也会主动进行销毁

由此可以在程序中判断当前小程序冷启动时，可以先进行校验，用户是否更新小程序，如果没有更新，则可以对用户进行提示，是否立即重启更新或者在下一次打开小程序时更新

const updateManager = wx.getUpdateManager()
​
updateManager.onCheckForUpdate(function (res) {
  // 请求完新版本信息的回调
  console.log(res.hasUpdate)
})
​
updateManager.onUpdateReady(function () {
  wx.showModal({
    title: '更新提示',
    content: '新版本已经准备好，是否重启应用？',
    success: function (res) {
      if (res.confirm) {
        // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
        updateManager.applyUpdate() // 强制小程序重启并使用新版本。在小程序新版本下载完成后（即收到 onUpdateReady 回调）调用。
      }
    }
  })
})
​
updateManager.onUpdateFailed(function () {
  // 新版本下载失败
})

三、页面栈原理

小程序中的页面栈是一个重要的概念，用于管理小程序页面的加载、显示和切换。页面栈的工作原理类似于操作系统中的任务栈，它记录了用户在小程序中访问过的页面顺序，以及当前活动页面的信息。页面栈的管理对于理解小程序的导航逻辑、页面生命周期和资源管理至关重要。

1 页面栈的基本特性

  1. 先进后出原则（LIFO） ：页面栈遵循先进后出的原则，即最后打开的页面位于栈顶，最先打开的页面位于栈底。这意味着当用户从一个页面返回上一个页面时，当前页面会从栈顶移除，前一个页面重新成为活动页面。
  2. 栈深度限制：微信小程序规定页面栈的最大深度为10个页面。如果尝试加载第11个页面，第1个页面（栈底的页面）会被销毁并移除，以保证栈的深度不超过限制。

2. 页面栈的操作

小程序提供了几种主要的页面栈操作方法，用于控制页面的加载和切换：

  • wx.navigateTo：这个API用于跳转到应用内的某个页面，但是不关闭当前页面。新页面会被加入页面栈的顶部，形成嵌套导航。使用此方法时，当前页面不会销毁，而是暂停运行，直到用户返回。
  • wx.redirectTo：这个API用于跳转到应用内的某个页面并关闭当前页面。新页面会直接成为当前页面，之前的页面从页面栈中移除，不会保留状态。
  • wx.switchTab：这个API用于在几个指定的tab bar页面间进行切换。它会保留页面栈中已存在的目标页面，如果目标页面不存在，则新建一个并推入页面栈。
  • wx.reLaunch：这个API用于关闭所有页面，打开到应用内的某个页面。它会清空页面栈，只保留目标页面。
  • wx.navigateBack：这个API用于关闭当前页面，返回上一级页面或多级页面。可通过传入参数delta来指定返回的层级。

3. 页面栈的作用

页面栈不仅帮助管理页面的生命周期，还对用户体验和性能优化有重要影响。例如，通过合理设置页面栈的深度和使用适当的导航方法，可以避免不必要的页面重建，减少资源消耗，提高应用的流畅度和响应速度。

三、 提升小程序速度

1. 加载速度

  • 控制小程序包大小
  • 代码包压缩
  • 无用代码、资源 及时清理
  • 减少包中固定资源的内容 icon assets 通过 CND 来获取
  • 分包加载
  • 分包预加载
  • 数据预拉取
  • 减少网络请求次数，使用缓存策略，优化图片资源

2. 渲染优化

  • onLoad 加载页面请求
  • 尽量减少不必要的请求，合并请求，
  • 部分必要的数据可以通过 get/set storageSync 来存储到本地
  • 列链接到详情页时，可以通过列表页的字段对详情页的核心信息进行骨架屏的渲染，提高用户体验
  • 正确使用 setData，并减少默认 data 的大小
  • 注意及时释放不再使用的数据引用，避免闭包导致的内存占用

参考链接

小程序开发指南

参考链接可以深入看一下，官方文档说明还是比较详细的，个人的只是一个简单的介绍，想要更加深入了解，可以先仔细看看官方描述，之后可以查阅一些资料结合 可以更加容易理解

其他小程序相关知识 小程序面试题

关于 Vue 相关的问题可以阅读一下文章！

Vue 双向绑定原理

Vue Computed 原理

关于webpack 相关的问题可以阅读一下文章！

Webpack-基础

avatar
文章
阅读
粉丝