uni-app分包

uni-app分包

  问题引入:为什么uni-app分包?

  原因:小程序有体积和资源加载限制,各家小程序平台提供了分包方式,优化小程序的下载和启动速度。而uni-app是做跨端开发看,所以也就引入了分包机制。App默认为整包。从uni-app 2.7.12+ 开始,也兼容了小程序的分包配置。其目的不用于下载提速,而用于首页是vue时的启动提速。App下开启分包,除在pages.json中配置分包规则外,还需要在manifest中设置在app端开启分包设置,详见:https://uniapp.dcloud.io/collocation/manifest?id=app-vue-optimization

  总结分包的好处:启动加载主包,按需要加载分包。提高进入页面时的加载速度,不至于必须等所有页面加载完

1.分包注意事项

  • 微信小程序每个分包的大小是2M,总体积一共不能超过20M。
  • 百度小程序每个分包的大小是2M,总体积一共不能超过8M。
  • 支付宝小程序每个分包的大小是2M,总体积一共不能超过4M。
  • QQ小程序每个分包的大小是2M,总体积一共不能超过24M。
  • 字节小程序每个分包的大小是2M,总体积一共不能超过16M。

  具体请查看官网:分包-uniapp
  将uni-app运行到微信开发者工具,可查看主包和分包的大小
在这里插入图片描述

2.在pages同级创建分包

在这里插入图片描述

3.pages.json配置

  注意:在subPackages里配置了页面路由,就不要再pages配置页面路由了


{
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
				"path" : "pages/message/message",
				"style" :                                                                                    
				{
						"navigationBarTitleText": "",
						"enablePullDownRefresh": false
				}
		},
		{
				"path" : "pages/list/list",
				"style" :                                                                                    
				{
						"navigationBarTitleText": "",
						"enablePullDownRefresh": false
				}
            
    }
  ],
	"subPackages": [
	 {
				"root": "subPages",
				"pages": [{
						"path": "detail/detail",
						"style": {
							
						}
				}]
	 }
	],
	"preloadRule": {
		 "pages/list/list": {
				 "network": "all",
				 "packages": ["subPages"]
		 }
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

  代码分析
    1)上面代码preloadRule配置表示意思是:进入pages/list/list就预下载subPages分包,提升提升进入后续分包页面时的启动速度。
    2)上面代码subPackages配置:
    注意:subPackages 里的pages的路径是 root 下的相对路径,不是全路径。

    subPackages 节点接收一个数组,数组每一项都是应用的子包,其属性值如下:

属性类型是否必填描述
rootString子包的根目录
pagesArray子包由哪些页面组成(数组)

4.怎么跳转分页的呢?

  在需要点击跳转的地方就好啦

  代码如下

<template>
	<view>
		  
				<button type="primary" size="mini" @click="clickButton">get请求</button>
				<view v-for="(item, index) in arr" :key="index" class="link" @click="jumpPage(item.id)">
						{{item.name}}
				</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr: []
			}
		},
		methods: {
			async clickButton() {
				let _data = await this.$mpApi.getListData({
					url: '/api/books',
					method: 'GET',
					data: {}
				});
				this.arr = _data.data;
			},
			jumpPage(id) {
				 uni.navigateTo({
					url: '/subPages/detail/detail'
				})
			}
		}
		
	}
</script>

<style>
	.link {
		color: #007AFF;
	}
</style>

  效果如下
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述


文章标签:

原文连接:https://blog.csdn.net/atu1111/article/details/119027281

相关推荐

【uniCloud】云对象的应用与提升

记一次uni-app Android原生插件开发

基于uni-app的微信小程序Map事件穿透处理

跨端必须要掌握的uniapp(3),前端基础

使用 Uniapp + UniCloud 云开发微信小程序获取用户信息

Uniapp 实现全民分销功能

跨平台应用开发进阶(十四) :uni-app 实现IOS原生APP-本地打包集成极光推送(JG-JPUSH)详细教程

Uni-App急速上手

uni-app与Android混合开发

三分钟打造自己专属的uni-app工具箱

一款uni-app日历插件是如何从开发到发布的

uni-app微信小程序订阅消息推送实践

uniapp微信小程序scroll-view的下拉加载

uni-app微信小程序授权登录实操演战

无限踩坑之如何在uniapp版微信小程序中做一个全局Notify组件?

uni-simple-router

uniapp基础掌握及面试题整理(2022持续更新...)

【实战】使用 uniapp 开发一个面试刷题小程序

uni-app 中实现 onLaunch 异步回调后执行 onLoad 最佳实践

用uniapp实现微信小程序的电子签名效果