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


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 相关文章推荐
extjs 为某个事件设置拦截器
Jan 15 Javascript
使用jQuery.fn自定义jQuery翻页插件
Jan 20 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
jQuery实现伪分页的方法分享
Feb 17 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
浅谈在node.js进入文件目录的问题
May 13 Javascript
javascript实现fetch请求返回的统一拦截
Dec 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数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
python实现浪漫的烟花秀
2019/01/30 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
污水厂厂长岗位职责
2014/01/04 职场文书
在校学生职业规划范文
2014/01/08 职场文书
社团活动总结报告
2014/06/27 职场文书
环卫工作汇报材料
2014/10/28 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
北京颐和园导游词
2015/01/30 职场文书
详解PHP Swoole与TCP三次握手
2021/05/27 PHP
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
python Django框架快速入门教程(后台管理)
2021/07/21 Python