uniapp分包subPackages如何使用?

这篇具有很好参考价值的文章主要介绍了uniapp分包subPackages如何使用?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

小伙伴们,大家在使用uniapp开发各种小程序时候是否有遇到主包过大,无法上传的情况?
那么小编在这带你们了解一下uniapp的分包机制
首先我们看到uniapp的官网uniapp subPackages使用
我们可以看到在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,会把对应分包自动下载下来,下载完成后再进行展示。此时终端界面会有等待提示。
所以分包后的页面是在打开分包内的某个页面以后才会加载分包的内容,这里我们呢也不用担心会不会空白的,他会有对应的等待提示。
值得注意的是

注意

  1. subPackages 里的pages的路径是 root 下的相对路径,不是全路径。
  2. 微信小程序每个分包的大小是2M,总体积一共不能超过20M。
  3. 百度小程序每个分包的大小是2M,总体积一共不能超过8M。
  4. 支付宝小程序每个分包的大小是2M,总体积一共不能超过8M。
  5. QQ小程序每个分包的大小是2M,总体积一共不能超过24M。
  6. 字节小程序每个分包的大小是2M,总体积一共不能超过16M(字节小程序基础库 1.88.0 及以上版本开始支持,字节小程序开发者工具请使用大于等于 2.0.6 且小于 3.0.0 的版本)。
  7. 分包下支持独立的 static 目录,用来对静态资源进行分包。
综上:第一点指的是"subPackages"配置下的"pages"里面的"path"是我们分的包(文件夹)里的文件路径;
第二到五点指的是总包(主包+分包)的大小不能超过对应的大小,也可以算出包的个数,例如:20/2=10个包
第七点还是比较舒服的,我们呢可以将静态文件放在对应的独立包的static里面,这样就可以不用都算在主包里面了,图片也可以在分包里面

那么我们要怎么分包呢?

步骤

首先,在uniapp结构里原本已经有一个pages的包(文件夹)了,我们在pages同级里新建一个pages-second包与pages-third包
uniapp subpackages,小程序,uni-app,前端,uni-app,微信小程序,小程序
然后在pages.json文件中配置如下
uniapp subpackages,小程序,uni-app,前端,uni-app,微信小程序,小程序
分包以后值得注意的是我们跳转分包中的页面的路径得这样配置

<navigator  url="/pages-second/wm/order/order" hover-class='none' >
</navigator>
<!--或者-->
<navigator  url="../../../pages-second/wm/order/order" hover-class='none' >
</navigator>


使用uni.navigateTo如下:

uni.navigateTo({
    url: '/pages-second/wm/order/order'
});
//或者
uni.navigateTo({
    url: '../../../pages-second/wm/order/order'
});

好了,这是小编的一些开发思路,如果各位大佬有更好的方法,麻烦在下方评论或者私聊小编哦~
让小编一起学习。文章来源地址https://www.toymoban.com/news/detail-653531.html

到了这里,关于uniapp分包subPackages如何使用?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app 小程序主包、分包优化方案

    先看效果 图1  图2是点图1的那个蓝色的字 代码依赖分析看的 好,如果博主这2两张图是你要的效果,来,说说具体操作方案 一、manifest.json加代码,如下,官方的文旦地址点右边---》uni-app官网 二、 目录结构 1、新建一个pageCity(你自己命名) 2、移动你原本的子页面文件(非

    2024年02月15日
    浏览(40)
  • 使用uniapp在打包微信小程序时主包和vendor.js过大(uniCloud的插件分包)

    正常的的微信小程序在编译后,主包应保持在2MB左右(限制最大2MB),其余的文件通过分包来进行加载  但是有的情况下,微信小程序的主包能达到3MB,vendor.js会达到1.5MB 当你发现的你的微信vendor.js只有1个文件夹,且这个文件非常大时,首先需要检查 manifest.json 在这个文件夹

    2024年02月02日
    浏览(65)
  • uni-app做微信小程序的分包处理

    我们的都知道微信小程序有随即随用,用完即走的优点,并且它开发门槛低,但是它也有一个致命的缺点,就是代码包体积的限制,这一缺点让小程序的开发有了一定的限制,现在有一方法可以减少代码包的体积,能够让小程序的功能得到一定的扩展,这一方法就是——分包

    2023年04月08日
    浏览(54)
  • uniapp 配置小程序分包

    分包可以减少小程序首次启动时的加载时间 分包页面(例如:商品详情页、商品列表页)。在 uni-app 项目中,配置分包的步骤如下: 1、右键点击根目录,新建,点击创建分包的根目录,命名为  subpkg。 2、在  pages.json  中,和  pages  节点平级的位置声明  subPackages  节点,

    2024年02月11日
    浏览(42)
  • uniapp项目如何分包

    一:分包相关概念 本质上是改变项目的路由以及优化项目各个模块的启动时间的一种优化技术。 主包与分包的概念 1). 主包:本项目中初始化时所必须的页面。 项目在启动时,将从主包进入,分包在用户未进入时不会加载,只有在进入分包模块时才会加载。 tabbar页面以及模

    2024年02月10日
    浏览(25)
  • uniapp写小程序 小程序分包处理

    这是分包小程序之后的目录结构 分包步骤如下 1、在根目录下新建一个 subPackages 文件夹, 之后在 subPackages 文件夹下创建 pages 用来存放页面文件 主包和分包是不能再同一目录下 根目录下的pages,我只放了 tabbar切换的两个页面,其余的页面都在subPackagespages 下面 subPackagespage

    2024年02月15日
    浏览(37)
  • uniapp分包,小程序分包处理 ,小程序发布包体积过大解决方案

    分包就是把一个完整的小程序项目,按照需求划分为不同的子包,构建的时候打包城不同的分包,按需加载 1、 可以减少小程序首次启动的下载时间 2、 可以多人开发中更好的解耦协作 3、 小程序发布主包体积过大 1、 整个小程序,主包加分包不能超过20M,单个包不能超过2M,主包也

    2024年02月04日
    浏览(46)
  • uniapp微信小程序之分包异步化之组件分包

    日渐增加的通用组件造成的主包空间不足; 提升小程序访问速度,降低白屏率; 如何进行占位组件配置; 如何解决通过$refs访问异步组件报错; 如何判断所有异步组件都已加载完毕; 多分包组件之间互相调用如何配置; 占位组件配置         直接在页面路由配置文件

    2024年02月07日
    浏览(53)
  • uniapp微信小程序分包

    目录 一. 分包的概念 1. 什么是分包 2. 分包的好处 3. 分包后项目的构成 4. 分包加载规则 5. 分包体积限制 二. 分包的方法 1. 分包后的目录结构 2. 配置manifest.json 3. 配置pages.json 4. 全局修改分包文件路径 1. 什么是分包 2. 分包的好处 3. 分包后项目的构成 4. 分包加载规则

    2024年02月11日
    浏览(51)
  • uniapp 微信小程序分包

    uniapp项目编译到微信小程序上传代码时提示体积过大,这个时候就要做优化了,大致就以下几个方面 1.减少或压缩本地图片 2.删减重复代码,删减无用CSS样式 3.减少无用组件引用 这个时候做完发现也优化不了多少体积,代码包还是过大,所以就要用到分包了 分包步骤 1.在p

    2024年02月14日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包