uni-app分包优化、页面预加载、页面跳转等封装
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中的 <a>
组件,但只能跳转本地页面。目标页面必须在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写法
var utils = {};
//公共处理方法
utils.install = function(Vue, option) {
// 页面跳转
Vue.prototype.jump = function(path) {
uni.navigateTo({
url: path
})
};
// 返回
Vue.prototype.back = function(obj) {
uni.navigateBack(obj);
};
// 带参跳转
Vue.prototype.togo = function(url,data){
url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
uni.navigateTo({
url
})
};
function param(data) {
let url = ''
for (var k in data) {
let value = data[k] !== undefined ? data[k] : ''
url += '&' + k + '=' + encodeURIComponent(value)
}
return url ? url.substring(1) : ''
};
// 获取登录用户
Vue.prototype.getUserInfo = function() {
let res = uni.getStorageSync('userInfo');
if (res) {
return res
} else {
return {}
}
};
};
export default utils;
在 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<any>) => {
url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
uni.navigateTo({
url,
})
}
const param = (data: Array<any>) => {
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 方式运行,使用了阿里云函数
更多推荐
所有评论(0)