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


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中使用inline函数的问题
Mar 08 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
跟我学习javascript的函数和函数表达式
Nov 16 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
JavaScript实现栈结构详细过程
Dec 06 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文件上传实例详解!!!
2007/01/02 PHP
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
生成二维码方法汇总
2014/12/26 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
js实现文字截断功能
2016/09/14 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
解决vue addRoutes不生效问题
2020/08/04 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
数学教学随笔感言
2014/02/17 职场文书
绩效考核实施方案
2014/03/18 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS