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


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 相关文章推荐
javascript引用对象的方法
Jan 11 Javascript
JS版网站风格切换实例代码
Oct 06 Javascript
JQUERY 浏览器判断实现函数
Aug 20 Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
js图片延迟加载的实现方法及思路
Jul 22 Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
简单理解vue中实例属性vm.$els
Dec 01 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 Javascript
JS如何判断对象是否包含某个属性
Aug 29 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和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
微信小程序抽奖组件的使用步骤
2021/01/11 Javascript
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
Python 列表(List)操作方法详解
2014/03/11 Python
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
PyTorch中的Variable变量详解
2020/01/07 Python
Django 实现将图片转为Base64,然后使用json传输
2020/03/27 Python
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
建筑实习自我鉴定
2013/10/18 职场文书
社区工作者思想汇报
2014/01/13 职场文书
支部书记四风对照材料
2014/08/28 职场文书
药店采购员岗位职责
2014/09/30 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
公司承诺书格式范文
2015/04/28 职场文书
考研经验交流会策划书
2015/11/02 职场文书
SpringBoot整合Minio文件存储
2022/04/03 Java/Android
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技