uni

2024-01-05 13:55| 来源: 网络整理| 查看: 265

uni-app分包优化、页面预加载、页面跳转封装等优化方式优化一、分包优化1.目录2.分包配置3.页面预加载二、页面跳转1.UNI跳转方法2.封装为vue全局方法

优化因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。一、分包优化

注意：

subPackages 里的pages的路径是 root 下的相对路径，不是全路径。微信小程序每个分包的大小是2M，总体积一共不能超过16M。分包下支持独立的 static 目录，用来对静态资源进行分包。uni-app内支持对微信小程序、QQ小程序、百度小程序、支付宝小程序、字节小程序(HBuilderX 3.0.3+)分包优化，即将静态资源或者js文件放入分包内不占用主包大小。针对vendor.js过大的情况可以使用运行时压缩代码 HBuilderX创建的项目勾选运行–>运行到小程序模拟器–>运行时是否压缩代码cli创建的项目可以在package.json中添加参数–minimize，示例：“dev:mp-weixin”: “cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize” 1.目录

pages是我们的主包，里面有登录页和index开头的3个底部tabBar选项卡页面。pagesOther里面是我们的分包，里面有个人中心的一些订单和消息页面。

注意：tabBar 页面以及引用的页面都需要放在主包，静态文件夹名为 static

┌─pages │ ├─index │ │ └─index.vue │ ├─index2 │ │ └─index2.vue │ ├─index3 │ │ └─index3.vue │ └─login │ └─login.vue ├─pagesOther │ ├─static │ └─personal │ └─order.vue │ └─message.vue ├─static ├─main.js ├─App.vue ├─manifest.json └─pages.json 2.分包配置

修改 mainfest.json 配置，点击源码视图，在 mp-weixin 中加入以下代码

在这里插入图片描述

修改 pages.json 配置，在 pages 同级下新增 subPackages，分包中配置了 page 路径后，主包 pages 中就不需要了

"pages": [ // 登录 { "path": "pages/login/login", "style": { "navigationBarTitleText": "登录" } }, // 选项卡 { "path": "pages/idnex1/idnex1", "style": { "navigationBarTitleText": "选项卡一" } }, { "path": "pages/idnex2/idnex2", "style": { "navigationBarTitleText": "选项卡二" } }, { "path": "pages/idnex3/idnex3", "style": { "navigationBarTitleText": "选项卡三" } } ], "subPackages": [{ "root": "pagesOther", // 分包名称 "pages": [ // 省略无数个页面路径 ... // 个人中心 { "path": "personal/order", "style": { "navigationBarTitleText": "订单" } }, { "path": "personal/message", "style": { "navigationBarTitleText": "消息" } } ] }], 3.页面预加载

配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度

在刚刚 pages.json 中继续添加 preloadRule 预加载配置

packages：表示进入 pages/index/index1 这个页面后加载pagesOther这个分包，值为 __APP__ 时表示主包

network：在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载）

"preloadRule": { "pages/index/index1": { "network": "all", "packages": ["pagesOther"] } },

然后我们可以看下运行时的依赖分析

在这里插入图片描述

二、页面跳转

类似HTML中的组件，但只能跳转本地页面。目标页面必须在pages.json中注册

1.UNI跳转方法

uni方法进行跳转

uni.navigateTo

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面

uni.redirectTo

关闭当前页面，跳转到应用内的某个页面

uni.reLaunch

关闭所有页面，打开到应用内的某个页面

uni.switchTab

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

uni.navigateBack

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层

uni.preloadPage

预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快

2.封装为vue全局方法

我们可以自己封装为Vue方法，来调用跳转与传参跳转

vue2写法

在 main.js 中use一下就可以在页面用了

import utils from './common/util.js' Vue.use(utils)

携带 userid 跳转到 order 页面

togoOrderList(userid) { this.togo('/pagesOther/personal/order',{userId: userid}) }

vue3写法

import { App } from 'vue' import http from './http' const setupUtils = (app: App) => { // 请求 app.config.globalProperties.$http = http // 页面跳转 app.config.globalProperties.jump = (path: string) => { uni.navigateTo({ url: path, }) } // 返回 app.config.globalProperties.back = (obj: Object) => { uni.navigateBack(obj) } // 跳转传参 app.config.globalProperties.togo = (url: string, data: Array) => { url += (url.indexOf('?') let url = '' for (let k in data) { let value = data[k] !== undefined ? data[k] : '' url += '&' + k + '=' + encodeURIComponent(value) } return url ? url.substring(1) : '' } // 获取文件API app.config.globalProperties.getFileApi = () => { return 'http://localhost:8089/api/file/' } // 日期处理等等... } export default setupUtils

代码暂时放在了 gitee 上 uni-mc，方便大家查看

目前 uni-mc 项目使用 cli 方式运行，使用了阿里云函数

【本文地址】

公司简介

联系我们