HbuilderX微信小程序uniapp分包小白教程趟坑【伸手党福利】【干货】

2024-05-16 11:36:35

本教程为小白教程，主管操作，具体原理讲解欢迎评论区补充。

微信小程序分包原因：
1、多人开发
2、引入了大型js
3、单项目多模块需要分包
官方资料：
https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html
https://uniapp.dcloud.io/collocation/pages?id=subpackages
https://uniapp.dcloud.io/collocation/manifest?id=app-vue-optimization

重要：

分包基础教程：【我就是看着官网教程和他的教程做的】
https://blog.csdn.net/weixin_39921131/article/details/112267612
次级教程
https://blog.csdn.net/weixin_39918588/article/details/112327359

开始讲解：第一步：创建分包文件夹page2并创建index.vue文件

第二步：pages.json

在pages[]后面输入

// 分包开始"subPackages": [{"root": "page2","pages": [{"path": "index","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}]}],"preloadRule": {"pages/index/index": {"network": "all","packages": ["__APP__"]},"page2/index": {"network": "all","packages": ["page2"]}},// 分包结束

其内容为：创建分包page2并指向page2文件夹，其分包的主页为page2/index

manifest.json下》源码视图

在"mp-weixin" : {内添加

     "optimization": {"subPackages": true},"runmode" : "liberate" // 开启分包优化后，必须配置资源释放模式

这一段在新版的hbuilder当中貌似没有也行，我忘了添加也照样跑起来了。

第四步：编译运行小程序

在详情》基本信息》本地代码
中
看到主包和page2字样即为成功。

步骤五：（选做）static分包

https://ask.dcloud.net.cn/question/68773

综合教程

https://blog.csdn.net/weixin_45811884/article/details/108789618
https://www.cnblogs.com/jsccc520/p/13930358.html

超综合教程（带static）

https://blog.csdn.net/weixin_45077178/article/details/103581172

遇到报错趟坑

1、uniapp 在分包subPackages 不应该在分包 appJSON["subPackages"][0] 中
原因：目录写错，地址：pages.json、router/index.js等
改正方法：按照官方给出的，分包就要分目录，不要图省事。
https://ask.dcloud.net.cn/question/76575
2、thirdScriptError Cannot read property ‘$mp‘ of undefined
原因：使用了this.$route进行了跳转导致，实际原因不明，貌似没有影响程序本身的运行

改正方法：调整版本的基础库

https://blog.csdn.net/weixin_43459866/article/details/109953919

3、小程序编译时, 提示: 80051,scource size 8290KB exceed max limit 2MB
提示为微信小程序主包大于2MB，微信小程序每个包不能超过2MB，包括本地图片。
出现此提示时候需要分包。
https://blog.csdn.net/weixin_44852765/article/details/112280631

HbuilderX微信小程序uniapp分包小白教程趟坑【伸手党福利】【干货】相关推荐

hbuilderx 小程序分包_基于uniapp的微信小程序之分包
0. 缘由最近工作在接触uni-app,用它来开发微信小程序,也是第一次接触,找了很久,还有大佬用自己写的函数做的,俺觉得我不会也不配,刚好看到下面评论是官方也支持了,所以就用官方的了,这里记录一下 ...
微信小程序uni-app前端应用框架和HBuilderX工具使用及Git管理项目
微信小程序uni-app前端应用框架和HBuilderX工具使用及Git管理项目官方地址:https://uniapp.dcloud.io/ 1.起步 1.1.简介 uni-app 是一个使用 Vu ...
微信小程序/uni-app 蓝牙打印开发教程和常见问题总结【文末附源码】
微信小程序/uni-app 蓝牙打印开发教程和常见问题总结[文末附源码] 文章目录微信小程序/uni-app 蓝牙打印开发教程和常见问题总结[文末附源码] 1️⃣ 写在前面 2️⃣ 蓝牙连接流程 3 ...
开发微信小程序(uniapp)
@2021SC@SDUSC WebStorm开发微信小程序(uniapp) 创建项目采用cli方式创建的项目 vue create -p dcloudio/uni-preset-vue my-pro ...
微信小程序反编译wxss文件缺失_如何找回微信小程序源码？2020年微信小程序反编译最新教程小宇子李...
前言:在网上看了找回微信小程序源码很多教程,都没法正常使用.微信版本升级后,会遇到各种报错, 以及无法获取到wxss的问题.查阅各种资料,最终解决,于是贴上完整的微信小程序反编译方案与教程. 本文章仅 ...
微信小程序反编译wxss文件缺失_如何找回微信小程序源码？2019年微信小程序反编译最新教程...
前言:在网上看了找回微信小程序源码很多教程,都没法正常使用.微信版本升级后,会遇到各种报错, 以及无法获取到wxss的问题.查阅各种资料,最终解决,于是贴上完整的微信小程序反编译方案与教程. 本文章仅 ...
如何找回微信小程序源码？2020年微信小程序反编译最新教程
前言:在网上看了找回微信小程序源码很多教程,都没法正常使用.微信版本升级后,会遇到各种报错, 以及无法获取到wxss的问题.查阅各种资料,最终解决,于是贴上完整的微信小程序反编译方案与教程. 本文章仅 ...
微信小程序uni-app
文章目录一.微信小程序uni-app 二.下载微信开发者工具三.小程序开发一.微信小程序uni-app 小程序是一种不需要下载.安装即可使用的应用,它实现了应用触手可及的梦想,用户扫一扫或者搜一 ...
微信小程序云函数使用教程【超详细】
背景需求在本人的项目中,需要调用一个http的接口,而微信小程序所有的网络请求都得使用https,因而需要一个中转站,使得在正式发布的时候可以使用http接口.(在调试环境下,只要在本地设置里勾选& ...

最新文章

热门文章