小程序系列--如何使用分包加载

栏目: IOS · Android · 发布时间: 5年前

内容简介:在小程序开发的过程中,小程序的体积会随着版本的迭代变的越来越大,这时候我们就希望能够将小程序分成多个包从服务器下载,这样既可以加快首屏的渲染也便于后续按需加载的实现。小程序在在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必定含有一个在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示。

在小程序开发的过程中,小程序的体积会随着版本的迭代变的越来越大,这时候我们就希望能够将小程序分成多个包从服务器下载,这样既可以加快首屏的渲染也便于后续按需加载的实现。小程序在 微信客户端 6.6.0,基础库  1.7.3  及以上版本开始支持 分包功能。

在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必定含有一个 主包 。所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而 分包 则是根据开发者的配置进行划分。

在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示。

小程序系列--如何使用分包加载

配置方法

小程序系列--如何使用分包加载

配置例子

{
  "pages": ["pages/index", "pages/shopcart"],
  "subpackages": [
    {
      "root": "packageA",
      "pages": ["pages/mine", "pages/order"]
    },
    {
      "root": "packageB",
      "name": "pack2",
      "pages": ["pages/detail", "pages/pay"]
    }
  ]
}
├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── mine
│       └── order
├── packageB
│   └── pages
│       ├── pay
│       └── detail
├── pages
│   ├── index
│   └── shopcart
└── utils

打包原则

  • 声明  subpackages  后,将按  subpackages  配置路径进行打包, subpackages  配置路径外的目录将被打包到 app(主包) 中
  • app(主包)也可以有自己的 pages(即最外层的 pages 字段)
  • subpackage  的根目录不能是另外一个  subpackage  内的子目录
  • tabBar  页面必须在 app(主包)内

引用原则

  • packageA  无法 require  packageB  JS 文件,但可以 require  app 、自己 package 内的 JS 文件
  • packageA  无法 import  packageB  的 template,但可以 require  app 、自己 package 内的 template
  • packageA  无法使用  packageB  的资源,但可以使用  app 、自己 package 内的资源

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

2小时品牌素养

2小时品牌素养

邓德隆 / 2009-1 / 38.00元

《2小时品牌素养(第2版)》第一次系统发布有关中国企业的品牌竞争力分析报告,揭示了中国一流企业在品牌战略上面临的深重危机,提出了定位突围之道和实践方法。全书分上下两篇,上篇详细分析了定位的原理,给出定位的三种方法,并特别为中国企业走向世界指出了三条出路;下篇以王老吉品牌战略历程为例,细致论述了一个品牌打造的完整过程,并就品牌实践中的许多关键问题进行了阐述和研讨。作为兼顾理论和实践的第2版,《2小时......一起来看看 《2小时品牌素养》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

在线进制转换器
在线进制转换器

各进制数互转换器

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具