note

Appearance

概念 01 ​

逻辑层 与 视图层 载入必需的代码后，是同时初始化的，然后 视图 会 等待 逻辑 准备完成。
完成后，逻辑会发送数据给 视图，视图开始渲染。

URI ​

小程序遵循 URI 的 RFC3986

App 与 Page ​

微信是一个 App 和 若干过 Page 组成。

整个小程序只有一个 App 实例！

js
const appInstance = getApp();
js
{
  path:String,// 打开小程序的页面路径
  query:Object,// 打开小程序的页面参数query
  scene:Number,//	打开小程序的场景值，详细场景值请参考小程序官方文档
  shareTicket:String,//	shareTicket，详见小程序官方文档
  referrerInfo:{//	当场景为由从另一个小程序或公众号或App打开时，返回此字段
    appId:String,//	来源小程序或公众号或App的 appId，详见下方说明
    extraData:Object,//	来源小程序传过来的数据，scene=1037或1038时支持
  }
}

生命周期 ​

初次进入，从 网络下载 或 从本地缓存中 拿到 小程序的代码包，注入宿主环境。

onLaunch：初始化完毕后

onHide：用户点击关闭、按 Home 键离开小程序，进入 “后台状态”。

onShow：当再次回到 微信 或 再次打开小程序时。

onLaunch 和 onShow 的 options 参数 提供了 进入小程序的 方式（扫码/会话）

js
Page({
  data: { text: "This is page data." },

  // 以下为 生命周期
  onLoad: function (options) {},
  onReady: function () {},
  onShow: function () {},
  onHide: function () {},
  onUnload: function () {},

  // 以下为 用户行为
  onPullDownRefresh: function () {},
  onReachBottom: function () {},
  onShareAppMessage: function () {},
  onPageScroll: function () {},
});

onLoad 只会触发 1 次

onShow 页面显示。一般从别的页面返回时被调用。

onReady 只会触发 1 次。当页面初次渲染完成时调用，表示页面已经准备妥当，逻辑层 和 视图层 可以进行交互了。

onHide 页面不可见时。常见情况有 wx.navigateTo、底部 tab 切换时触发。

onUnload 页面被销毁。

onPullDownRefresh 下拉刷新

  • 需要设置 enablePullDownRefresh:true
  • wx.stopPullDownRefresh 可以停止当前页面的下拉刷新

onReachBottom 上拉触底

  • 需要设置 onReachBottomDistance:number

onPageScroll 页面滚动

  • 监听用户滑动页面事件

onShareAppMessage 用户转发

  • 需要返回一个对象
{
title: '自定义转发标题',
path: '/page/user?id=123'
}

onResize 页面尺寸变化时

onTabItemTap 当 tab 点击时执行

Runtime ​

开发者工具仅供调试使用，最终的表现以客户端为准。

小程序等 runtime 是不统一的。
小程序 内置了一份 core-js Polyfill 对付平台 diff IOS 的 Promise 是一个使用 setTimeout 模拟的 Polyfill。这意味着 IOS 的 Promise 为普通任务，而非微任务

iOS、iPadOS、Mac OS，

  • JavaScript 运行在 JavaScriptCore
  • 视图层 由 WKWebView 来渲染的

JavaScriptCore 无法开启 JIT 编译 (Just-In-Time Compiler)，同等条件下的运行性能要明显低于其他平台。

Android

  • JavaScript 代码运行在 V8 中
  • 视图层是由 XWeb 引擎（基于 Mobile Chromium 内核的微信自研）

Windows

  • JavaScript 和 视图层 都是用 Chromium 内核

开发工具上

  • JavaScript 代码是运行在 NW.js 中
  • 视图层是由 Chromium Webview 来渲染的

运行机制 ​

概念：

  • 冷启动，小程序需要 加载 而后启动 。
  • 热启动，小程序并未被销毁，只是从后台状态进入前台状态。

热启动：支持 path，如果有 path 会 reLaunch 相对应页面

冷启动：带 path 跳转至相对应 页面 ，否则准寻 restartStrategy（重新启动策略）

js
// homePage，首页启动。
// homePageAndLatestPage ，如果从这个页面退出，下次直接从这个页面启动，页面参数保持不变。
{
  "restartStrategy": "homePage" | "homePageAndLatestPage"
}

挂起：后台状态 一段时间后（5 秒）

销毁：后台状态一段时间（30 秒）或 收到 wx 内存不足警告

使用 wx.onMemoryWarning 监听内存告警事件

退出状态：当程序可能被销毁时，onSaveExitState 会被调用，然后可以借此保存一些信息。

js
Page({
  onLoad: function () {
    var prevExitState = this.exitState; // 尝试获得上一次退出前 onSaveExitState 保存的数据
    if (prevExitState !== undefined) {
      // 如果是根据 restartStrategy 配置进行的冷启动，就可以获取到
      prevExitState.myDataField === "myData";
    }
  },
  onSaveExitState: function () {
    var exitState = { myDataField: "myData" }; // 需要保存的数据
    return {
      data: exitState,
      expireTimeStamp: Date.now() + 24 * 60 * 60 * 1000, // 超时时刻
    };
  },
});

退出状态是有 时间限制的！

更新机制 ​

「设置」-「功能设置」-「优先使用本地版本设置」：先使用旧版，后台下载新版，下次更新

「设置」-「功能设置」-「小程序最低可用版本设置」：低于最低版本强制升级

正常情况下，在全量发布 24 小时之后，新版本可以覆盖 99% 以上的用户。

手动强制升级

js
const updateManager = wx.getUpdateManager();

updateManager.onCheckForUpdate(function (res) {
  // 请求完新版本信息的回调
  console.log(res.hasUpdate);
});

updateManager.onUpdateReady(function () {
  wx.showModal({
    title: "更新提示",
    content: "新版本已经准备好，是否重启应用？",
    success(res) {
      if (res.confirm) {
        // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
        updateManager.applyUpdate();
      }
    },
  });
});

updateManager.onUpdateFailed(function () {
  // 新版本下载失败
});