微信小程序分包

微信小程序主体包最大 也就20M,分包最大是2M 超过就会报错,tabBar页面不能分包。

分包教程

第一步:在项目的根目录下找到 【manifest.json文件】 打开后 最底下有个【源码视图】打开后找到 【小程序特有相关】的注释,然后添加"optimization":{"subPackages": true}意思是开启分包。 

下面就是配置一些小程序的代码

       "mp-weixin" : {
			"appid" : "xxxxxxxxxxxxx",//微信小程序的id
			"setting" : {
				"urlCheck" : false
			},
			"usingComponents" : true,
			
			"optimization": { //开启分包
				"subPackages": true
			}
		},

第二步:开启完分包后,在项目的根目录新建一个文件 【pagesA】(名字是自己算便起的)。

把你觉得文件较大的可以单独拿出来,扔进pagesA文件中,扔进来以后 pages.json里面的文件路径需要删掉。当然我们 需要在 pages:[]下面,自己写一个分包路径。

分包 (tabBar 页面不能分)

"root" 是子包的根目录, 这里写了pagesA 下面的 "path" 里面就不用再写pagesA/xxx/xxx 了,直接写pagesA 里面的路径即可。

          "subPackages":[
				{
					"root": "pagesA",//子包的目录
					"pages": [
						{
							"path": "pages1/BOFAANG/BOFAANG", //这里的路径需要格外注意
							"style" :
							{
								"navigationBarTitleText" : "星星眨着小眼睛",
								"navigationStyle":"custom",//小程序禁用原生导航
								"app-plus": {
									"titleNView": false//h5+APP 禁用原生导航
								}
								
							}
						},
					]
				},
			],

分包完成。 

怎么查看包的大小?

打开微信开发者工具 右上角有一个详情,打开后找到【本地代码】 旁边有代码依赖分析,点击后就能看到 主包多大 分包多大。

### UniApp 中实现微信小程序分包的方法 在 UniApp 开发环境中,为了提升微信小程序的性能并优化用户体验,可以采用分包策略。具体来说,在 `manifest.json` 文件中进行配置是必要的一步[^3]。 #### 主要步骤如下: - **创建新目录**:建立一个新的文件夹作为子包的一部,该文件夹应位于与 `pages` 同级别的位置,比如命名为 `pages_user`。 - **编辑 `pages.json`**:在此 JSON 文件内定义分包结构以及其内部页面的信息。例如: ```json { "subPackages": [ { "root": "pages_user", "pages": [ { "path": "index/index", "style": { "navigationBarTitleText": "", "backgroundColor": "#fff", "enablePullDownRefresh": false } } ] } ], "preloadRule": { "pages_user/index/index": { "network": "all", "packages": ["__APP__"] } } } ``` 此部描述了如何设置分包及其加载规则,确保当访问特定页面时能正确加载对应的资源。 #### 注意事项 对于那些计划初期就引入分包机制的应用程序而言,建议将主要交互界面(如 TabBar 页面)放置于主包之中,以便用户首次打开应用即可快速响应和显示内容[^2]。 另外,在实际部署过程中还需注意以下几点: - 当使用 uni-app 构建项目时,记得启用“运行时是否压缩代码”的选项以减少最终打包体积; - 如果遇到组件标签样式不生效的情况,则尝试用 `<view>` 标签包裹这些元素,并把 CSS 类名放在外层容器上处理[^4];
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值