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


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 相关文章推荐
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
微信小程序App生命周期详解
Jan 31 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 Javascript
vue使用Sass时报错问题的解决方法
Oct 14 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 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
一个典型的PHP分页实例代码分享
2011/07/28 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
php随机抽奖实例分析
2015/03/04 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
js取得html iframe中的元素和变量值
2014/06/30 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
[48:35]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 TNC vs Optic
2018/04/03 DOTA
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
Python格式化压缩后的JS文件的方法
2015/03/05 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
python实现机器人卡牌
2019/10/06 Python
python 字符串格式化的示例
2020/09/21 Python
Django url 路由匹配过程详解
2021/01/22 Python
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
生物科学专业个人求职信范文
2013/12/07 职场文书
课程设计心得体会
2013/12/28 职场文书
党员入党表决心的话
2014/03/11 职场文书
文艺晚会策划方案
2014/06/11 职场文书
开学第一周值周总结
2015/07/16 职场文书
教学反思怎么写
2016/02/24 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript