我的编程空间,编程开发者的网络收藏夹
学习永远不晚

uniapp-微信小程序 分包--详解

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

uniapp-微信小程序 分包--详解

实际环境(用business举例,可以创建很多个分包)

先说好,如果代码模块多,就一个一个模块搞(照着做不会错)

直入主题,我代码写完了,一真机运行,g,发现超过2m(微信小程序不能超过2m),找办法,发现设置里面有个最大运行4M,打开后可以真机调试了,结果上传代码,g,必须小于2M。找办法

将静态资源放到服务器去,拿网络图片不占用项目资源(可行)但静态资源只能200k,其中tarbar的图标icon只能是png、jpg等,结果拿设计图太大了,改,改完之后,整个主包的静态资源也就是static文件夹,小于200k了,但是内存还是大了,可能是内置了其他的ui库的原因,没关系第二个办法。

使用分包,在这之前没用过,找了好几篇文章,又没说清楚。跟我走

    1°分包的概念,把你主页也就是小程序tarbar之外的页面、资源、组件,放出去,别再主包里面混资源,等待用的时候再拿过来。

    2°主包和分包区分:主包(pages、static、components)可能还有,其他的不重要了,除去他们其他基本都算分包(意思是你都可以用分包装起来)

    3°来个实际场景,跟我走

首先、最开始你们没想过分包的话,你所有的模块都应该是页面放在pages,静态资源放在static、组件放在components里面,此时pages里面的很多页面你们是不用初次进入直接使用的,所以分出去。看图
原本我的状态是:
在这里插入图片描述
在这里插入图片描述
上面的下面那张图片是接着上面的,懒得放回去了,意思就是pages下面的business文件夹下有很多vue页面,都是页面跳转的,初次进入index首页时并不会用到这些文件,所以把它丢出去。此时我们在pages同级下创建一个business文件夹。
在这里插入图片描述
我们把除了tarbar需要的那几个界面的其他界面全都放这个文件夹里面来,同时我们可以创建components文件夹和static文件夹,存放这个分包business文件夹中所用到的components组件和静态资源,但要注意,我们这篇文章是已经做好项目了,所以当你拉出组件和图片的时候,要看一下tarbar的那几个页面有没有用到这些组件和static,如果用到了,你要放到主包里面去的

(其实最简单的就是把全部复制出来之后,自己去主包的static和components里面删除tarbar页面不用的那些资源就OK了)

然后就到了配置环节,我们原本所有的界面都在pages.json文件里面写好了,现在已business为例,原本path应该都是pages/business/… 现在除了tarbar那个界面,其他的全部复制一份然后删除(指business下的)在pages.json的pages同级下创建一个
在这里插入图片描述
然后把你刚复制的那些粘贴到subPackages的pages里面,要改名字
举个例子:原本pages/business/caichan,放过来之后变成:caichan,为什么?这是路径,自己想(/business/caichan)
在这里插入图片描述
照着这个写下去就行,嫌麻烦,自己循环去。到这里pages.json写完了。
然后跟我走:找这个
在这里插入图片描述
在源码视图里面有个(项目是uniapp做微信小程序,转其他估计也差不多,但不保证完全一致,自己去翻对应文档)mp-weixin在这里插入图片描述
在他里面写属性:
在这里插入图片描述

(非常贴心,直接复制)

“optimization” : {
“subPackages” : true
},//开启分包
“lazyCodeLoading” : “requiredComponents” //按需注入

写完这个来到最后一步了——改路径
之前那些组件引入的时候不都是…/…/components/…吗还有/static/这些,你现在business提到了最外面,路径肯定改了,至于怎么改(用uniapp搜索然后替换是最快的,前提是你之前的代码都遵循了比较好的规范),自己想办法,反正你没改过去,代码会报错(跟着报错改),如果发现编译后页面没了,路径也对了,那多半是还没缓过来,等等就好,重新编译。

最后,是否成功分包,可以看得到,编译后弹出的微信开发者工具中有一个代码质量
在这里插入图片描述
选择代码质量,让他扫描一下,下面有一个
在这里插入图片描述
点击查看就可以看到整个项目的文件了
看看我的:
在这里插入图片描述
划重点,右边那个分包,以这个为标准,有就对了。
ok,如果没看懂,可以评论问我或私信,有空会回复的,如果觉得讲的不好,放上官网链接,自己看吧

如果看不懂,还是看我的,挺详细的,照着做,不会错,点这个就是官网链接

来源地址:https://blog.csdn.net/weixin_46666816/article/details/127731107

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

uniapp-微信小程序 分包--详解

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

uniapp分包(小程序分包)处理图文详解

小程序上传的时候,主包不能超过2M,如果超出,则会上传失败,这时候就需要把界面进行分包,下面这篇文章主要给大家介绍了关于uniapp分包(小程序分包)处理的相关资料,需要的朋友可以参考下
2023-01-15

微信小程序(分包)

文章目录 分包概念作用分包后的项目构成分包的加载规则分包的体积限制配置方法小程序打包原则引用原则独立分包分包预下载 分包 概念 分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分
2023-08-16

【详讲】微信小程序分包流程步骤

【详讲】微信小程序分包流程步骤 本文基于微信小程序的官方文档,对分包的概念以及具体的操作流程进行讲解。 一、为什么要使用分包? 主要原因就是微信小程序规定了主包大小不能超过 2M ,但我们随着开发的更新迭代,一个小程序往往是大于 2M
2023-08-21

uniapp微信小程序强制更新解决示例详解

这篇文章主要为大家介绍了uniapp微信小程序强制更新解决的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2022-11-13

uniapp是不是微信小程序

近年来,随着移动互联网技术的发展,微信小程序成为了很多企业、组织和个人推广自己的重要途径。而在微信小程序开发中,人们也经常听到一个新的名词——UniApp。那么,UniApp是不是微信小程序呢?本文将对此进行解析。UniApp是什么?UniApp是DCloud推出的开源跨平台应用开发框架,它能一次性开发出同时运行在多个平台上的应用,包括iOS、Android、Web、小程序等。
2023-05-14

使用uniapp打包微信小程序时主包和vendor.js过大解决(uniCloud的插件分包)

每个使用分包小程序必定含有一个主包,所谓的主包,即放置默认启动页面/TabBar页面,以及一些所有分包都需用到公共资源/JS脚本,下面这篇文章主要给大家介绍了关于使用uniapp打包微信小程序时主包和vendor.js过大解决的相关资料,,需要的朋友可以参考下
2023-02-21

使用uniapp打包上架微信小程序完整教程

这篇文章主要介绍了uniapp打包上架微信小程序完整教程,需要的朋友可以参考下
2022-12-24

使用uniapp打包微信小程序时主包和vendor.js过大如何解决

这篇文章主要介绍“使用uniapp打包微信小程序时主包和vendor.js过大如何解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“使用uniapp打包微信小程序时主包和vendor.js过大如何解
2023-07-05

编程热搜

  • Android:VolumeShaper
    VolumeShaper(支持版本改一下,minsdkversion:26,android8.0(api26)进一步学习对声音的编辑,可以让音频的声音有变化的播放 VolumeShaper.Configuration的三个参数 durati
    Android:VolumeShaper
  • Android崩溃异常捕获方法
    开发中最让人头疼的是应用突然爆炸,然后跳回到桌面。而且我们常常不知道这种状况会何时出现,在应用调试阶段还好,还可以通过调试工具的日志查看错误出现在哪里。但平时使用的时候给你闹崩溃,那你就欲哭无泪了。 那么今天主要讲一下如何去捕捉系统出现的U
    Android崩溃异常捕获方法
  • android开发教程之获取power_profile.xml文件的方法(android运行时能耗值)
    系统的设置–>电池–>使用情况中,统计的能耗的使用情况也是以power_profile.xml的value作为基础参数的1、我的手机中power_profile.xml的内容: HTC t328w代码如下:
    android开发教程之获取power_profile.xml文件的方法(android运行时能耗值)
  • Android SQLite数据库基本操作方法
    程序的最主要的功能在于对数据进行操作,通过对数据进行操作来实现某个功能。而数据库就是很重要的一个方面的,Android中内置了小巧轻便,功能却很强的一个数据库–SQLite数据库。那么就来看一下在Android程序中怎么去操作SQLite数
    Android SQLite数据库基本操作方法
  • ubuntu21.04怎么创建桌面快捷图标?ubuntu软件放到桌面的技巧
    工作的时候为了方便直接打开编辑文件,一些常用的软件或者文件我们会放在桌面,但是在ubuntu20.04下直接直接拖拽文件到桌面根本没有效果,在进入桌面后发现软件列表中的软件只能收藏到面板,无法复制到桌面使用,不知道为什么会这样,似乎并不是很
    ubuntu21.04怎么创建桌面快捷图标?ubuntu软件放到桌面的技巧
  • android获取当前手机号示例程序
    代码如下: public String getLocalNumber() { TelephonyManager tManager =
    android获取当前手机号示例程序
  • Android音视频开发(三)TextureView
    简介 TextureView与SurfaceView类似,可用于显示视频或OpenGL场景。 与SurfaceView的区别 SurfaceView不能使用变换和缩放等操作,不能叠加(Overlay)两个SurfaceView。 Textu
    Android音视频开发(三)TextureView
  • android获取屏幕高度和宽度的实现方法
    本文实例讲述了android获取屏幕高度和宽度的实现方法。分享给大家供大家参考。具体分析如下: 我们需要获取Android手机或Pad的屏幕的物理尺寸,以便于界面的设计或是其他功能的实现。下面就介绍讲一讲如何获取屏幕的物理尺寸 下面的代码即
    android获取屏幕高度和宽度的实现方法
  • Android自定义popupwindow实例代码
    先来看看效果图:一、布局
  • Android第一次实验
    一、实验原理 1.1实验目标 编程实现用户名与密码的存储与调用。 1.2实验要求 设计用户登录界面、登录成功界面、用户注册界面,用户注册时,将其用户名、密码保存到SharedPreference中,登录时输入用户名、密码,读取SharedP
    Android第一次实验

目录