草庐IT

【微信小程序】-- 分包(四十四)

我是夜阑的狗 2023-04-09 原文

  • 💌 所属专栏:【微信小程序开发教程】

  • 😀 作  者:我是夜阑的狗🐶

  • 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询!

  • 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘

文章目录


前言

  大家好,又见面了,我是夜阑的狗🐶,本文是专栏【微信小程序开发教程】专栏的第44篇文章;
  今天开始学习微信小程序的第25天💖💖💖,开启新的征程,记录最美好的时刻🎉,每天进步一点点。
  专栏地址:【微信小程序开发教程】, 此专栏是我是夜阑的狗微信小程序开发过程的总结,希望能够加深自己的印象,以及帮助到其他的小伙伴😉😉。
  如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。


一、分包 - 基础概念

  前面已经介绍了 全局数据共享,通过栗子学习了 MobX 安装和使用,分别能够将全局数据对象在页面和组件上进行引用。接下来就来学习一下小程序中另外一个概念-分包。话不多说,让我们原文再续,书接上回吧。

1、什么是分包

  分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用
时按需进行加载。

2、分包的好处

  对小程序进行分包的好处主要有以下两点:

  • 分包之后,可以先加载主包,也就是主页面,这样的话就能优化小程序首次启动的下载时间。
  • 在多团队共同开发时,可以按照功能的不同分为不同的子包,从而分配给不同的人,开发效率更高效,更具有更好的解耦协作。

3、 分包前项目的构成

  分包前,小程序项目中所有的页面和资源都被打包到了一起,导致整个项目体积过大,影响小程序首次启动的下载时间。可以来看一下小程序的构成,如图所示:

4、 分包后项目的构成

  分包后,小程序项目由 1 个主包 + 多个分包组成:

  • 主包:一般只包含项目的启动页面或 TabBar 页面、以及所有分包都需要用到的一些公共资源,注意:这些公共资源可以被所有分包访问到
  • 分包:只包含和当前分包有关的页面和私有资源(分包里的私有资源只能被当前分包访问,不能被其他包访问)。

5、分包的加载规则

  • 在小程序启动时,默认会下载主包并启动主包内页面
    • tabBar 页面需要放到主包中
  • 当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示
    • 非 tabBar 页面可以按照功能的不同,划分为不同的分包之后,进行按需下载,从而来优化小程序的启动时间

6、分包的体积限制

  目前,小程序分包的大小有以下两个限制,在实际开发中都必须要遵守:

  • 整个小程序所有分包大小不超过 16M(主包 + 所有分包)。
  • 单个分包/主包大小不能超过 2M。

二、分包 - 使用分包

  在使用分包之前,先来了解一下配置方法。

1、配置方法

  先了解一下小程序的目录结构,如下图所示:

  在 app.jsonsubpackages节点中声明分包的结构:

{
  "pages":[
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact",
    "pages/shoplist/shoplist"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages":[
        "pages/cat/cat",
        "pages/dog/dog "
      ]
    },{
      "root": "packageB",
      "pages": [
        "pages/apple/apple"
      ]
    }
  ],
}

  pages 表示当前分包下,所有页面的相对存放路径,name 表示分包的别名,注意,在分包里面所有的页面都是根据根目录才进行存放的。

  接下来还可以通过项目基本信息查看分包的大小情况:

2、打包原则

  在小程序中,分包的打包原则一共有四个,如下所示:

  • 小程序会按 subpackages 的配置进行分包,subpackages 之外的目录将被打包到主包中。
  • 主包也可以有自己的 pages(即最外层的 pages 字段)。
  • tabBar 页面必须在主包内
  • 分包之间不能互相嵌套。

3、引用原则

  ;在小程序中,分包的引用原则一共有三个,如下所示:

  • 主包无法引用分包内的私有资源。
  • 分包之间不能相互引用私有资源。
  • 分包可以引用主包内的公共资源。


总结

  感谢观看,这里就是分包的介绍使用,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹

  也欢迎你,关注我。👍 👍 👍

  原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。🎉

更多专栏订阅:



订阅更多,你们将会看到更多的优质内容!!

有关【微信小程序】-- 分包(四十四)的更多相关文章

  1. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  2. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  3. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  4. Ubuntu20.04系统WineHQ7.0安装微信 - 2

    提供3种Ubuntu系统安装微信的方法,在Ubuntu20.04上验证都ok。1.WineHQ7.0安装微信:ubuntu20.04安装最新版微信--可以支持微信最新版,但是适配的不是特别好;比如WeChartOCR.exe报错。2.原生微信安装:linux系统下的微信安装(ubuntu20.04)--微信适配的最好,反应最快,但是微信版本只到2.1.1,版本太老,很多功能都没有。3.深度deepin-wine6安装微信:ubuntu20.04+系统deepin-wine6安装新版微信--综合比较好,当前个人使用此种方法1个月,微信版本3.4;没什么大问题,尚可。一、WineHQ7.0安装微信

  5. 微信小程序订餐系统 - 2

    对传统的餐饮商家来说,小程序很好地解决了餐厅线下线上连接的问题,在引流获客、节约人力、营销宣传、塑造会员体系、改善消费体验等方面都有很大帮助。小程序点餐可以帮助餐饮企业节省一大把人力开支。一个包含扫码点单、菜品管理、优惠券推送、外卖配送的小程序,商家花几万元就能完成开发测试并投入。商家为什么要开通“扫码点餐”1.解决服务员不够用的问题。2.不怕顾客跑单漏单。3.在微信就能管理菜品、查看营业额。4.订单小票显示顾客桌号和已点菜品。5.可在“附近的小程序”找到您的门店。如今餐饮业常用的三种经营模式:1堂食点单模式客人通过小程序堂食点单。商家可以在微信扫码点餐小程序管理后台根据自己店内情况来设置不同

  6. 最新版人脸识别小程序 图片识别 生成二维码签到 地图上选点进行位置签到 计算签到距离 课程会议活动打卡日常考勤 上课签到打卡考勤口令签到 - 2

    技术选型1,前端小程序原生MINA框架cssJavaScriptWxml2,管理后台云开发Cms内容管理系统web网页3,数据后台小程序云开发云函数云开发数据库(基于MongoDB)云存储4,人脸识别算法基于百度智能云实现人脸识别一,用户端效果图预览老规矩我们先来看效果图,如果效果图符合你的需求,就继续往下看,如果不符合你的需求,可以跳过。1-1,登录注册页可以看到登录页有注册入口,注册页如下我们的注册,需要管理员审核,审核通过后才可以正常登录使用小程序1-2,个人中心页登录成功以后,我们会进入个人中心页我们在个人中心页可以注册人脸,因为我们做人脸识别签到,需要先注册人脸才可以进行人脸比对,进

  7. 微信小程序切换云环境 - 2

    在开发微信小程序的时候,我们可能需要开发环境和测试环境,或者其他环境,下面是切换环境的方法。首先需要明确的是:前端的页面代码是不区分环境的,环境的区分指的是云函数、云数据库、云存储这些。1、更改云函数的使用云环境这里我们从cloud1更改为test-cloud,这个改完是没有用的,因为在前端代码指定了使用的云环境。cloudfunctions文件和miniprogram文件虽然都在一个目录下,但是这两个没有直接联系。2、在evList.js中添加自己云环境evList.js存储了云环境列表,这里把test-cloud加到这个列表里,需要填写envId和alias,参照cloud1写就行。3、更

  8. Spring Boot中的微信支付(小程序) - 2

    前言微信支付是企业级项目中经常使用到的功能,作为后端开发人员,完整地掌握该技术是十分有必要的。一、申请流程和步骤图1-1注册微信支付账号获取微信小程序APPID获取微信商家的商户ID获取微信商家的API私钥配置微信支付回调地址绑定微信小程序和微信支付的关系搭建SpringBoot工程编写后台支付接口发布部署接口服务项目使用微信小程序或者UniAPP调用微信支付功能支付接口的封装配置jwt或者openid的token派发原生微信小程序完成支付对接二、注册商家2.1商户平台商家或者企业想要通过微信支付来进行商品的销售,必须先通过微信平台(pay.weixin.qq.com)去将商家进行注册。注册成

  9. 微信小程序顶部标题栏与胶囊对齐 - 2

    介绍    最近在做微信小程序时,顶部标题栏总是与胶囊对不齐。往往是在这款手机上对齐了,在另外一款手机差很多。我在查阅资料后,提出了一种方法解决这个问题,即:在页面onLoad或组件created时,利用微信小程序提供的API,获取系统状态栏高度和胶囊信息,进而动态调整顶部标题栏样式。在苹果、小米、荣耀手机做验证,能做到精准对齐。理论        胶囊样式应该是垂直居中,有1px的border,border-radius为18px。        若要使顶部标题栏与胶囊对齐,则其高度必须是导航栏高度,标题栏内容也要垂直居中,顶部标题栏的外边距或内边距必须是状态栏高度。        如果顶部

  10. 十四届蓝桥青少组模拟赛Python-20221108 - 2

    十四届蓝桥青少组模拟赛Python-20221108T1.二进制位数十进制整数2在十进制中是1位数,在二进制中对应10,是2位数。十进制整数22在十进制中是2位数,在二进制中对应10110,是5位数。请问十进制整数2022在二进制中是几位数?print(len(bin(2022))-2)#运行结果:11T2.晨跑小蓝每周六、周日都晨跑,每月的1、11、21、31日也晨跑。其它时间不晨跑。已知2022年1月1日是周六,请问小蓝整个2022年晨跑多少天?#样例代码1ls=[0,31,28,31,30,31,30,31,31,30,31,30,31]ans=0k=6foriinrange(1,13)

随机推荐