小程序使用分包的示例代码


Posted in Javascript onMarch 23, 2020

本文介绍了小程序使用分包的示例代码,分享给大家,具体如下:

官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html

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

总结就是小程序内所有代码图片资源大小超过2M,此时就可以考虑创建分包,扩大小程序容量

目前小程序分包大小有以下限制:

  • 整个小程序所有分包大小不超过 12M
  • 单个分包/主包大小不能超过 2M

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

注意:TabBar所对应的页面和一些公共的方法和资源必须放在主包,在主包页面调用分包的组件或者方法都是不顶用的

使用分包

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

{

"pages": [

"pages/index/index",

"pages/logs/logs"

],

"subpackages": [

{

"root": "packageA",

"pages": [

"pages/index/index",

"pages/user/user"

]

},

{

"root": "packageB",

"pages": [

"pages/index/index",

"pages/mall/mall"

]

}

],

"preloadRule": {

"pages/index/index": {

"network": "all",

"packages": [

"packageA"

]

}

},

"window": {

"backgroundTextStyle": "light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "WeChat",

"navigationBarTextStyle": "black"

},

"style": "v2",

"sitemapLocation": "sitemap.json"

}

小程序使用分包的示例代码

引用原则

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

总结:分包之间的资源和代码不能相互引用,且主包不能调用分包的资源

分包预下载

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

分包预下载目前只支持通过配置方式使用,暂不支持通过调用API完成

小程序使用分包的示例代码

preloadRule的 key是页面路径,全路径

独立分包

独立分包是小程序中一种特殊类型的分包,可以独立于主包和其他分包运行。从独立分包中页面进入小程序时,不需要下载主包。当用户进入普通分包或主包内页面时,主包才会被下载。

开发者可以按需将某些具有一定功能独立性的页面配置到独立分包中。当小程序从普通的分包页面启动时,需要首先下载主包;而独立分包不依赖主包即可运行,可以很大程度上提升分包页面的启动速度。

一个小程序中可以有多个独立分包。

官方文档在这儿:https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/independent.html

目前还没用过独立分包。对于到底在什么情境下运用还不是很清楚

到此这篇关于小程序使用分包的示例代码的文章就介绍到这了,更多相关小程序使用分包内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery 取子节点及当前节点属性值的方法
Aug 24 Javascript
JS实现文字掉落效果的方法
May 06 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
原生js实现each方法实例代码详解
May 27 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
JavaScript中的函数式编程详解
Aug 22 Javascript
用JS实现选项卡
Mar 23 #Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 #Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 #Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 #Javascript
详解webpack-dev-middleware 源码解读
Mar 23 #Javascript
vscode调试node.js的实现方法
Mar 22 #Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 #Javascript
You might like
php foreach循环中使用引用的问题
2013/11/06 PHP
php加密解密实用类分享
2014/01/07 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
Javascript 刷新全集常用代码
2009/11/22 Javascript
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
python 获取字符串MD5值方法
2018/05/29 Python
python学生管理系统学习笔记
2019/03/19 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
vue路由实现登录拦截
2021/03/24 Vue.js
教师专业自荐信
2014/05/31 职场文书
计划生育证明格式范本
2014/09/12 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
英语复习计划
2015/01/19 职场文书
外出学习心得体会范文
2016/01/18 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP
我去timi了,一起去timi是什么意思?
2022/04/13 杂记