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


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的内存泄漏
Mar 04 Javascript
IE与FireFox中的childNodes区别
Oct 20 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
js Math 对象的方法
Sep 01 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 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
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
基于pear auth实现登录验证
2010/02/26 PHP
PHP中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
全面解读PHP的Yii框架中的日志功能
2016/03/17 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
2015/08/06 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
保险专业大专生求职信
2013/10/26 职场文书
外语系毕业生找工作的求职信
2013/11/28 职场文书
个人评价范文分享
2014/01/11 职场文书
文秘大学生求职信
2014/02/25 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
教师个人教学总结
2015/02/11 职场文书
护理专业自荐信范文
2015/03/06 职场文书
女儿满月酒致辞
2015/07/29 职场文书
2016年国培研修日志
2015/11/13 职场文书
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android