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


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 相关文章推荐
Prototype 学习 Prototype对象
Jul 12 Javascript
JS的replace方法介绍
Oct 20 Javascript
实现51Map地图接口(示例代码)
Nov 22 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
用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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
Bootstrap基础学习
2015/06/16 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
bootstrap下拉分页样式 带跳转页码
2018/12/29 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
electron踩坑之dialog中的callback解决
2020/10/06 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
详解python程序中的多任务
2020/09/16 Python
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
医学生实习自我鉴定
2013/09/27 职场文书
模具数控专业自荐信
2014/01/27 职场文书
法人授权委托书范本
2014/04/04 职场文书
诉前财产保全担保书
2014/05/20 职场文书
财政局个人总结
2015/03/04 职场文书
消防宣传标语大全
2015/08/03 职场文书
详解Python函数print用法
2021/06/18 Python
Tomcat用户管理的优化配置详解
2022/03/31 Servers
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS