文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-09-03 14:17

关注

实际环境(用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

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯