详细讲解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 中。

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

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

代码图片

相关文章
|
2天前
|
人工智能 移动开发 JavaScript
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
|
4天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
24天前
|
人工智能 小程序 JavaScript
【一步步开发AI运动小程序】十四、主包超出2M大小限制,如何将插件分包发布?
本文介绍了如何从零开始开发一个AI运动小程序,重点讲解了通过分包技术解决程序包超过2M限制的问题。详细步骤包括在uni-app中创建分包、配置`manifest.json`和`pages.json`文件,并提供了分包前后代码大小对比,帮助开发者高效实现AI运动功能。
|
2月前
|
人工智能 小程序 搜索推荐
uni app下开发AI运动小程序解决方案
本文介绍了在小程序中实现AI运动识别的解决方案。该方案依托于UNI平台,通过高效便捷的插件形式,实现包括相机抽帧控制、人体识别、姿态识别等在内的多项功能,无需依赖后台服务器,大幅提高识别效率和用户体验。方案内置多种运动模式,支持自定义扩展,适用于AI健身、云上赛事、AI体测等多场景,适合新开发和存量改造项目。
|
2月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
43 0
在线课堂+工具组件小程序uniapp移动端源码
|
3月前
|
XML 小程序 前端开发
小程序制作教程
小程序制作教程
88 3
小程序制作教程
|
3月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
407 3
|
3月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
62 0
微信小程序更新提醒uniapp
|
3月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
59 2
|
5月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
123 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目