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

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

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

代码图片

相关文章
|
7天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
38 3
|
7天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的电子商城购物平台的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的电子商城购物平台的详细设计和实现
35 3
|
7天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的英语学习交流平台的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的英语学习交流平台的详细设计和实现
24 2
|
7天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
34 2
|
7天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的移动学习平台的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的移动学习平台的详细设计和实现
31 1
|
7天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的教师管理系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的教师管理系统的详细设计和实现
35 2
|
7天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的学生公寓电费信息的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的学生公寓电费信息的详细设计和实现
30 1
|
14天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
14天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
14天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。