微信小程序分包加载

时间: 2018-10-22阅读: 675标签: 小程序

开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。

 

在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必须包含一个主包,所谓的主包,即放置默认启动页/TabBar 页面,以及一些所有分包需要用到整个小程序所有分包大小不超过 8M单个分包/主包大小不能超2M。

对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更高的解耦协作。


配置方法:

假设支持分包的小程序目录结构

├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils

开发者通过在 app.json subPackages 字段声明项目分包结构:

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

subPackages 中,每个分包的配置有以下几项:

字段类型说明
rootString分包根目录
nameString分包别名,分包预下载时可以使用
pagesStringArray分包页面路径,相对与分包根目录
independentBoolean分包是否是独立分包

 

打包原则

  声明 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 内的资源


独立分包

  独立分包是小程序的一种特殊类型的分包,可以独立于主包和其他分包独立运行。从独立

  分包中页面进入小程序时,不需要下载主包,当小程序进入不同分包的时候,主包才会被下载。

  可发者可以按需将某些具有一定功能独立性的页面配置到独立分包中。当小程序从普通的

  分包页面中启动时,需要首先下载主包;而独立分包不依赖主包即可运行,可以很大程度上

  提升分包页面的启动速度, 一个小程序中可以有多个独立分包。

配置方法:

  假设小程序的目录如下;

  ├── app.js
  ├── app.json
  ├── app.wxss
  ├── moduleA
  │   └── pages
  │       ├── rabbit
  │       └── squirrel
  ├── moduleB
  │   └── pages
  │       ├── pear
  │       └── pineapple
  ├── pages
  │   ├── index
  │   └── logs
  └── utils

开发者可以通过在  app.json 的 subpackages 字段中的分包配置中自定义 independent字段声明对应分包为独立分包

  {
      "pages": [
        "pages/index",
        "pages/logs"
      ],
     "subpackages": [
        {
          "root": "moduleA",
          "pages": [
            "pages/rabbit",
            "pages/squirrel"
          ]
        }, {
          "root": "moduleA",
          "pages": [
            "pages/pear",
            "pages/pineapple"
          ],
        "independent": true
      }
    ]
  }

限制:

独立分包属于分包的一种,普通分包的所有限制独立分包有效。独立分包中插件自定义组件的处理方式同普通分包。

 

使用独立分包需要注意:

独立分包中不能依赖主包和其他分包中的内容,包括js 文件,template,wxss,自定义组件,插件等,主包的app.wxss 对独立分包无效。应避免在独立分包页面中使用 app.wxss 中的样式。

App 只能在主包中定义,独立分包中不能定义 App 会造成无法预期的行为。独立分包中暂时不支持使用插件。


注意事项:

(1) 关于 getApp()

与普通分包不同,独立分包运行时,App 并不一定被注册,因此,getApp()也不一定获得App 对象,当用户从独立分包页面启动小程序时,主包不存在,App 也不存在,此时调用getApp 获取到的是undefined 。当用户进入普通分包或者主包时,主包才会被下载, App 才会被注册。当用户从普通分包或者主包的页面挑到独立分包的时候,主包已经存在,此时调用getApp(),才能获得真正的App。

为了满足独立分包中的这一需求,基础库2.2.4  版本开始getApp 支持,allowDefault 参数,在 App 未定义的时候返回一个默认实现。当主包

加载 App 被注册的时候,默认实现中被定义的属性会被合并覆盖到默认的App 中。

示例:

const  app = getApp({allowDefault:true})  // {}
app.data = 456
app.global = {}

//.app.js  中
App({
  data:123
  other:'hello'
})
console.log(getApp())   // {global: {} ,data: 456,other: 'hello'}


(2) 关于 App 的生命周期

当从独立分包中启动小程序时,主包的中的onLanch 和首次 onShow  会从独立分包页面首次进入主包或普通分包页面时调用。

 

分包下载:

开发者可以通过配置,在进入小程序某个页面时,由框架自动预下载可需要的分包。提升进入后续分包页面的速度,对于独立分包,可以预下载主包。

配置方法:

预下载分包行为在进入某个页面的时候触发,在通过app.json 增加 preloadRule

{
  "pages": ["pages/index"],
  "subpackages": [
    {
      "root": "important",
      "pages": ["index"],
    },
    {
      "root": "sub1",
      "pages": ["index"],
    },
    {
      "name": "hello",
      "root": "path/to",
      "pages": ["index"]
    },
    {
      "root": "sub3",
      "pages": ["index"]
    },
    {
      "root": "indep",
      "pages": ["index"],
      "independent": true
    }
  ],
  "preloadRule": {
    "pages/index": {
      "network": "all",
      "packages": ["important"]
    },
    "sub1/index": {
      "packages": ["hello", "sub3"]
    },
    "sub3/index": {
      "packages": ["path/to"]
    },
    "indep/index": {
      "packages": ["__APP__"]
    }
  }
}


preloadRule  中,key  是页面路径, value  是进入此页面的 预下载配置,每个配置都有以下几项。 

字段

类型

必填

默认值

说明

packages

StringArray

进入页面后预下载分包的 root 或 name。__APP__ 表示主包。

network

String

wifi

在指定网络下预下载,可选值为:

all: 不限网络 

wifi: 仅wifi下预下载


限制

同一个分包中的页面享有共同的预下载大小限额2M,会在工具打包时校验。如:页面A 和页面B 都在同一个分包中,A 中预下载大小为0.5 M的分包,B 中最大多只能预下载大小1.5 的分包。


 详细请参考 https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html


小程序--人脸识别功能(百度ai)

接入流程:1. 按照文档获取AppID、API Key、Secret Key,进行Access Token(用户身份验证和授权的凭证)的生成,2. 选择人脸识别-->人脸检测,人脸识别接口分为V2和V3两个版本,确认在百度云后台获得的是V2还是v3版本接口权限。

百度小程序性能优化建议:分包和合理使用setData

智能小程序的视图层使用了 san 框架,相对于其他类似 react 等 mvvm 框架来通过 virtual dom diff 来实现组件的渲染来说,san 框架是基于 data 的 diff 来进行的组件重新渲染,减少了内存的使用率与计算量,保证视图更新的高效性。

微信小程序遇到的坑

微信小程序开发之路上遇到的那些坑,微信小程序开发常见之坑总结,在开发过程中碰到的问题和解决:小程序textarea组件字数限制问题 、scroll-view 中不能使用 textarea 组件 、input组件的问题、关于数据绑定的问题、关于生命周期的问题、关于picker组件

微信小程序用户授权

对于小程序未授权的用户,官方取消wx.getUserInfo方法的直接调用,首次授权必须主动触发自定义按钮,才可调起官方授权组件。思路步骤:wx.getSetting查看是否授权,已授权使用wx.getUserInfo获取用户信息,保存

小程序保存图片到相册功能实现

先检查用户请求过的权限中是否允许保存到相册权限,如果没有请求过这个权限,应该向用户发起授权请求(弹窗授权),如果请求过这个权限,并且授权了,那就保存图片,显示保存成功;如果请求过,但是是拒绝的,就跳到设置页,重新授权。

微信小程序连接蓝牙硬件的实现

项目需要使用小程序的蓝牙功能与硬件设备进行连接相互传送数据指令 ,整个流程就这样,因为开启了onBLECharacteristicValueChange,所以你在写入数据(writeBLECharacteristicValue)的时候,设备应答的数据就被监测到了

小程序wx.createInnerAudioContext()获取不到时长问题

开发小程序中需要用到音频播放功能。但在初始化时,使用InnerAudioContext.duration获取不到音频的时长。使用innerAudioContext.onPlay()监听播放获取时长,此方法用于播放音频后获取;使用innerAudioContext.onCanplay()监听音频进入可以播放状态,此方法用于初始化时获取

小程序插件怎么玩?有赞和千万级用户的“群里有事”做了一次示范

小程序插件让大的公司赋能外部开发者变得非常方便,极大降低了中小开发者开发丰富的小程序应用的门槛,未来的发展是很值得期待的。尤其是国庆节前夕,微信公布的关于小程序跳小程序的新政策,极大地限制了不同主体之间小程序互跳的自由度

通过反编译小程序来学习前端

小程序开发时,会有4种文件:.wxss .json .wxs .wxml。正式上传到腾讯时,目录会被打包,使用时再发放给客户端。这个文件包后缀是 .wxapkg。只要手机用过这个小程序,文件包就会缓存在手机内

如何微信小程序禁止下拉_解决小程序下拉出现空白的情况

在微信小程序中,用力往下拉动,页面顶部会出现一段空白的地方。 产品的需求不太允许这么做,会影响用户体验,查看文档发现可以使用enablePullDownRefresh这属性来实现,但是在部分ios端仍然可以下拉出现空白。那么该如何解决呢?

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯