小程序

用户8008663494819
540 阅读5分钟

小程序打包上线流程

  • 在uni-app端完成微信小程序的打包；

  • 在微信开发者工具中将代码上传到微信公众平台，形成体验版；

  • 测试人员根据扫描体验版二维码进行最后的测试工作；

  • 测试通过后，点击提交审核，进入审核流程，通常24小时就能出结果；

  • 审核通过后，用户即可通过维系小程序搜索到我们的小程序；同时我们还可以在微信公众平台生成小程序的葵花码，交给推广人员进行推广；

小程序的性能优化

开启代码压缩

  • 上传代码时勾选开发者工具中“压缩代码”选项；

处理静态资源

  • 预先对图片、视频等静态资源进行物理压缩，推荐大家一个在线压缩图片的网站 TinyPNG；
  • 能使用CDN服务的图片视频等就尽量不要打到代码包中；

对页面进行分包

  • 主包只打首页等高频页面；
  • 用户可能不会访问的页面分模块打到子包中，如果用户果然不访问这些页面，就不会对这些分包进行下载了；

对分包进行预加载

微信小程序的分包预加载是一种优化手段，可以提高小程序的加载速度和性能。以下是进行分包预加载的步骤：

  • 首先，在微信小程序的项目配置文件 app.json 中，设置 preloadRule 字段来定义需要预加载的分包。可以使用正则表达式来匹配分包的路径，例如：
{
  "preloadRule": {
    "pages/subpackageA/": true,
    "pages/subpackageB/": true
  }
}

上述代码将会预加载 pages/subpackageA/ 和 pages/subpackageB/ 这两个分包。

  • 接下来，在小程序的入口页面中，通过 wx.loadSubpackage() 方法进行分包的预加载。例如：
wx.loadSubpackage({
  name: 'subpackageA',
  success: function(res) {
    // 分包预加载成功后的回调
  },
  fail: function(res) {
    // 分包预加载失败后的回调
  }
})

上述代码将会预加载名为 subpackageA 的分包。在 success 回调中可以进行相关逻辑处理，例如跳转到分包页面。

通过以上步骤，你可以实现微信小程序的分包预加载，提高用户体验和性能。注意，为了避免过多的预加载影响页面加载速度，建议仅对关键的分包进行预加载。

合理使用缓存

  • 尽量减少HTTP请求的次数：拿到数据setStorage缓存起来，下次需要使用相同数据时先getStorage，没有再发起网络请求，
  • 如果使用的是uniapp/Vue2框架，则可以使用Vuex作为存储的store；
  • 组件内缓存状态数据，在uniapp/Vue2中合理使用computed；

在uni-app 如何区分机型

// 在代码中使用条件编译指令区分 Android 和 iOS 平台
if(process.env.UNI_PLATFORM === 'h5') {
    // 在 H5 平台下执行的代码
    console.log('This is H5 platform');
} else if(process.env.UNI_PLATFORM === 'android') {
    // 在 Android 平台下执行的代码
    console.log('This is Android platform');
} else if(process.env.UNI_PLATFORM === 'ios') {
    // 在 iOS 平台下执行的代码
    console.log('This is iOS platform');
}

image.png

微信小程序的分包配置

分包配置

  • 微信小程序【单个代码包的最大体积】不能超过2M，如果因为某些页面引用的静态资源文件较大较多的原因，导致单个代码包体积超过2M时，我们就需要进行页面的分包配置了；
  • 可以将小程序的众多页面分配到不同子包中，每个子包大小均不超过2M，所有子包的总体积加起来不能超过20M；
  • 下图展示了页面分包配置方式：

image.png

  • 在进行页面跳转的时候，也需要注意按具体分包调整页面位置
// 分包之前
// uni.navigateTo({
//    url: "/pages/cities/cities",
// });
		 
// 分包之后
uni.navigateTo({
    url: "/pages/sub/cities/cities",
});
  • 在微信小程序中查看分包大小：

image.png

微信小程序的路由跳转 分为多少层

  • 微信所限制的 10 层页面栈

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

  • 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.redirectTo(Object)

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

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

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

参数表如下所示：

流程图如下所示：

wx.switchTab(Object)

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

参数表如下所示：

wx.navigateBack(Object)

wx.navigateBack() 用于关闭当前页面，并返回上一页面或多级页面，开发者可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层则设置对象的delta属性即可

参数表如下：

wx.reLaunch(Object)

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

流程图如下所示：

参数表如下所示：

三、总结

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

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

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

  • navigateTo 新页面入栈
  • redirectTo 当前页面出栈，新页面入栈
  • navigateBack 页面不断出栈，直到目标返回页，新页面入栈
  • switchTab 页面全部出栈，只留下新的 Tab 页面
  • reLanch 页面全部出栈，只留下新的页面
avatar
文章
阅读
粉丝