详细讲解uniapp转小程序分包教程!!!

简介: 详细讲解uniapp转小程序分包教程!!!

1.分包

小程序主包或分包不能超过2M,总包大小不能超过16M,分包还可以优化小程序的首次启动时间。

分包前后对比

分包前

分包后

小程序分包预加载

我们在第一次加载分包中页面时,通常会提示“正在加载模块”,影响用户体验!!!

uniapp分包配置

对manifest.json文件进行配置一下,参考官网,在manifest配置以下节点,可以在App端启动分包。

"app-plus": {
  "optimization": {
    "subPackages": true
  },
  "runmode" : "liberate" // 开启分包优化后,一定要配置一下资源释放模式
}

建立分包文件夹

在pages同级目录下创建文件夹为分包文件夹,如pagesA,这个文件夹就是分包的页面路径,以及这些页面所用到的组件资源都可以放在pagesA这个文件中。(建议静态资源放在网络上,减少包的内存占有)

├── components
├── App.vue
├── main.js
├── pagesA
│ └── my
├── pagesB
│ └── list
├── pages
│ ├── index
│ └── logs
└── static

分包配置

root为打包的根路径。其下pages为分包的页面配置(注意分包配置的path,在其他包中不能重复设置)

配置page.json文件,在和pages同级配置subpackages

"subPackages": [{
    "root": "pagesA",  //分包根路径
          "name": "pack2", //分包名字可写可不写
    "pages": [{
        "path": "video/video", //分包根路径下的页面路径
        "style": { // 页面样式
          "navigationStyle": "custom"
        }
      },
    ]
  }],
  //预加载配置,可以提高用户体验
   "preloadRule": {
   "pagesA/video/video": {   //想要实现预加载的页面路径
      "network": "all", //指定网络 all 不限网络   wifi:仅wifi
      "packages": ["subpages"]  // 进入页面后预下载分包的 root 或 name。__APP_表示主包。
    }
 },

建议:

推荐一个包的页面在12个内,以防后期更改需求,需要增加页面等,导致超出小程序上传的每个包的最大容量,在定义在Taber的页面,必须放在主包下;

preloadRule属性

预载入属性,但通常情况下不建议使用。

效果

在你进入到某个页面时,如果是你设定了preloadRule的页面,他就会默认的加载你需要加载的那整个分包,即便时之前以及预载过了。大大浪费了许多加载资源,延迟了小程序的人机体验度

预加载成功使用 preloadSubpackages查看

进入触发预加载页面时查看log 会打印 preloadSubpackages 信息,显示 success即为成功

触发页面的选取也要注意,既要能满足用户的体验但也要注意预加载分包会对当前页面的加载速度有一定的影响

图片分包

图片放在根目录的static下面,打包的时候是直接打包到我们的主包下面,这样主包的负荷就会非常大,项目相对大一点的时候,图片也是非常占据资源的,所以这里也做一个分包处理。

一个图片文件夹,命名按需求,图片下面的分包图片必须和你分包的页面名称一致,方便改路径

静态文件分包

在HBuilderX中文件manifest.json中选择源码视图,找到mp-weixin添加以下代码:

“optimization”:{
"subPackages":true
}
//开启分包优化

然后在分包文件夹下新建文件夹static用于存放图片就可以了,在微信开发者工具中会把静态文件直接打包到分包内

打包

声明 subpackages 后,将按 subpackages 配置路径进行打包,subpackages 配置路径外的目录将被打包到

app(主包) 中,tabBar 页面必须在 app(主包)内

文件大的话,就只有把图片放线上,少用静态图片

分包加载如何进行低版本兼容

微信后台会编译两份代码包,用来处理旧版本客户端的兼容性,一份是分包后代码,一份是整包的兼容代码。

新客户端用分包,老客户端用的整包,完整包会把各个 subpackage 里面的路径放到 pages 中。

上面几种方式都可以使用,选最合适的即可,教程不详细之处,望大神指出!!!

本人求前端学习伙伴一名,有意可以私信!!!

代码图片

相关文章
|
人工智能 移动开发 JavaScript
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
1785 18
|
10月前
|
开发者
Uniapp开发鸿蒙应用教程之自定义导航栏
本文介绍了在Uniapp跨平台开发鸿蒙应用时,如何实现自定义导航栏。通过修改pages.json文件可调整默认导航栏样式,但若需添加组件(如搜索框、按钮等),则需手动创建自定义导航栏组件,以适配鸿蒙系统。文中给出了详细的配置代码与实现步骤,帮助开发者灵活控制界面布局。#鸿蒙 #Uniapp #跨平台开发
|
10月前
|
容器
Uniapp开发鸿蒙购物应用教程之商品列表
本教程分享如何使用UniApp开发鸿蒙应用首页商品列表,通过网格布局实现商品分类与商品展示,详解布局方式与代码实现。
|
10月前
|
前端开发 开发者 容器
Uniapp开发鸿蒙购物项目教程之样式选择器
本篇教程介绍了uniapp开发鸿蒙应用中的样式选择器,包括类选择器、ID选择器、属性选择器、内联选择器和后代选择器,并讲解了它们的基本用法与优先级规则。通过简单示例帮助开发者理解如何为组件设置样式,同时提醒合理使用!important以避免样式管理混乱。适合初学者掌握鸿蒙跨平台开发中的基础样式控制方法。
|
10月前
|
JavaScript API 开发者
Uniapp开发鸿蒙应用教程之选项式api和组合式api
本文介绍了在Uniapp开发鸿蒙应用时,如何通过选项式API和组合式API进行数据操作。以修改年龄值为例,对比展示了两种API的代码结构与区别,并重点演示了组合式API中更简洁、灵活的写法,帮助开发者理解并掌握现代Vue开发模式。#鸿蒙三方框架 #Uniapp
|
前端开发 小程序 Java
uniapp-网络数据请求全教程
这篇文档介绍了如何在uni-app项目中使用第三方包发起网络请求
1014 3
|
人工智能 小程序 JavaScript
【一步步开发AI运动小程序】十四、主包超出2M大小限制,如何将插件分包发布?
本文介绍了如何从零开始开发一个AI运动小程序,重点讲解了通过分包技术解决程序包超过2M限制的问题。详细步骤包括在uni-app中创建分包、配置`manifest.json`和`pages.json`文件,并提供了分包前后代码大小对比,帮助开发者高效实现AI运动功能。
|
人工智能 小程序 搜索推荐
uni app下开发AI运动小程序解决方案
本文介绍了在小程序中实现AI运动识别的解决方案。该方案依托于UNI平台,通过高效便捷的插件形式,实现包括相机抽帧控制、人体识别、姿态识别等在内的多项功能,无需依赖后台服务器,大幅提高识别效率和用户体验。方案内置多种运动模式,支持自定义扩展,适用于AI健身、云上赛事、AI体测等多场景,适合新开发和存量改造项目。
下一篇
开通oss服务