使用uniapp框架开发微信小程序的分包具体流程

最新推荐文章于 2024-05-09 08:26:35 发布
最新推荐文章于 2024-05-09 08:26:35 发布
阅读量536 收藏 3
点赞数 7
文章标签： uni-app 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47491045/article/details/136378186
版权

uniapp框架开发微信小程序分包

1、为什么要分包

分包能够解决小程序的加载缓慢的问题，能够实现微信小程序的按需加载

2、分包的具体思路

因为在uniapp的框架下，配置与微信小程序有所不同大致如下

首先：打卡微信小程序配置

在这里插入图片描述

在这里插入图片描述

找到微信小程序相关配置

在这里插入图片描述

在原有基础上加入以上框选代码

"optimization":{
			"subPackages": true//开启分包
		},
		"lazyCodeLoading":"requiredComponents",//懒加载

3、pages.json配置

主包的pages.json配置可以不用管，在其后面加上如下配置

在这里插入图片描述

也可以参考uniapp官网配置

其中root指分包的包名称 注意分包的包名称和主包位于同级目录

在这里插入图片描述

preloadRule加载规则

蘩藜**
关注
  • 7
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详细讲解uniapp转小程序分包教程！！！
2401_84436058的博客
05-04 740
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-VcMkMh4K-1714762046730)][外链图片转存中…(img-Cm4Ew2X5-1714762046731)]
uniapp小程序如何分包？完整详细步骤教给你【小白教程】
热门推荐
Leijiang0504的博客
02-15 1万+
首先我们为什么要分包？ ​ 好像是规定小程序不能超过2M,一旦超过就需要分包,我这里是公众号项目，想转成小程序用的是uniapp框架做的，本身这个项目肯定是大于2M,我们在不删减项目的同时需要改成小程序的话，就需要分包，我理解的是，分包就是把财产分给自己的兄弟，但是又属于自己的大家庭，就想下面这样 上面给大家看了分包目录，下面教大家如何快速分包，改成小程序需要的大小内存 首先是分包的大小 微信小程序每个分包的大小是2M，总体积一共不能超过16M。 uni-app内支持对微信小程序、QQ小.
uniapp和小程序如何分包，详细步骤手把手（图解，前端高级开发岗必问知识点
2401_83621095的博客
03-19 1619
我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。分包里的components是单个分包自己的组件目录，分包vue页面的引用只能是在自己page_zhaoshang分包目录下才可以引用。最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。
uniapp和小程序如何分包，详细步骤手把手（图解）
WJud11的博客
03-29 1678
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里即可获取！！！！1877)**[外链图片转存中…(img-UaTZ0W1t-1711725348729)][外链图片转存中…(img-CZlgSLYu-1711725348729)][外链图片转存中…(img-Cqp31pJS-1711725348729)]
uni-app 分包
jifaliwo123的博客
09-14 2429
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。当用户进入分包的某个页面时，再去下载对应的整个分包，然后再显示该页面。【解决】如果使用了uni-app的导入uni_modules方式导入组件，那么就会有这个情况。大多情况下，我们需要对主包进行瘦身——分包，把不属于公共的组件，不是属于小程序主体页面的模块分出去。
uniapp-微信小程序分包操作步骤详解
南北极之间
01-15 5982
（就是以前全都放在pages里面的模块。现在把次要的模块剪切到新目录里去。我这里还建了一个pages目录。也可以不建这个目录。而且里面的结构也可以多层次。结构变了，访问的路径也要变。测试可以成功访问之后，再把刚才剪切到新包里的那些文件路径都检查一下。没问题就可以发布上传了。想分几个包就建几个新目录。比如package2、package3……然后把刚复制的那些粘贴到package1的pages里面。（分包的参数结构也和原来的pages里面是一样的。url就是由分包的root加上path组成的。
uniapp开发微信小程序设置分包，简单易学
New个对象喝咖啡
03-29 617
我们使用uniapp开发微信小程序的时候，当我们的包体积过大的时候，无法真机模拟。因为小程序单个包只支持2MB（现已支持预览4MB），所以这时候我们要选择去分包。有人要问了分包难吗？分包很简单。但是最重要的来了，分包这个决定，要早做决定，当你开发之前，评估一下，就觉得你这个小程序不值2MB，所以我们可以开始的时候就分包。具体分包是怎么样做的呢?uniapp分包步骤。
uniapp 微信小程序分包配置
I_JAVA_U的博客
03-27 540
原来是在pages目录下 原path是”pages/pip_con/pip-con-list“ 放在分包内之后需要修改path，并且原来页面跳转的地方也需要修改为分包之后的路径。官方要求，微信小程序发布上线，（不分包）小程序大小不超过2M，使用分包后 小程序主包大小不超过2M，总包不超过20M，，超过限制则无法编译上线。使用分包可以有效的使你的程序快速进入（不需要加载所有的资源，页面，只是加载主包（一般来说就是你的所有Tabbar页面）肯定是快。比如package2、package3……
uniapp开发微信小程序-人脸采集功能
05-16
uniapp开发微信小程序-人脸采集功能
基于uniapp设计的微信小程序源码.zip
05-27
基于uniapp设计的微信小程序源码.zip
uniapp微信小程序使用Echarts组件
07-28
uniapp微信小程序使用Echarts组件,使用实例 <echarts class="uni-ec-canvas" ref="echarts2" :option="option" canvasId="echarts1" id='echarts2'></echarts>
uniapp分包demo
11-03
uniapp多页面配置效果，项目代码subPackages 里的pages的路径是 root 下的相对路径，不是全路径。 微信、百度小程序每个分包的大小是2M，总体积一共不能超过8M。 支付宝小程序每个分包的大小是2M，总体积一共不能超过4M。 分包下支持独立的 static 目录，用来对静态资源进行分包。 uni-app内支持对微信小程序、QQ小程序、百度小程序分包优化，即将静态资源或者js文件放入分包内不占用主包大小。详情请参考：关于分包优化的说明 针对vendor.js过大的情况可以使用运行时压缩代码 HBuilderX创建的项目勾选运行–>运行到小程序模拟器–>运行时是否压缩代码
一个基于 uniapp 开发的微信小程序商城项目源码.zip
05-26
一个基于 uniapp 开发的微信小程序商城项目源码.zip
基于uniapp开发的微信商城小程序通用模板.zip
02-24
包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python...
uni-app微信小程序分包处理
weixin_42543235的博客
05-19 2716
场景 由于微信小程序规定不能超过2M，在做了精简优化代码之后还是太大了，无法上传代码怎么办？使用官方支持的分包来解决。 官方文档：https://uniapp.dcloud.io/collocation/pages?id=subpackages subPackages里的pages的路径是root下的相对路径，不是全路径。 微信小程序每个分包的大小是2M，总体积一共不能超过16M。 百度小程序每个分包的大小是2M，总体积一共不能超过8M。 支付宝小程序每个分包的大小是2M，总体积一共不能...
Web前端最新详细讲解uniapp转小程序分包教程！！！，阿里P8前端架构师谈
最新发布
2401_84411018的博客
05-09 514
*JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串。**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式。root为打包的根路径。
手把手教你uniapp和小程序分包
Allen-Ye博客
08-01 608
手把手教你uniapp和小程序分包
uniapp-微信小程序分包： 配置和注意事项
chenjunlcl的博客
07-17 4041
1.pages.json 中添加以下配置： 2.pages.json 将需要分包的页面 从pages数组中删除，配置到subPackages下面的pages数组中 "subPackages": [{ "root": "pagesB", //文件夹名称， pages文件夹同级新建一个就行 "pages": [ { "path": "liancui/add/add", //相对于pagesB文件夹的位置 "style": {} } ] .
uniapp 小程序分包
09-15
uni-app内支持对微信小程序、QQ小程序、百度小程序分包优化。分包优化的目的是将静态资源或js文件放入分包内，以减少主包的大小。在构建小程序分包项目时，会输出一个或多个分包。每个有分包的小程序必定包含一个主包，在主包下放置默认启动页面、tabBar页面和一些所有分包都需要使用的公共资源。分包的划分根据开发者的配置进行。需要注意的是，微信小程序规定整个小程序所有分包大小不超过20M，单个分包/主包大小不能超过2M。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值