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


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代码
Jan 28 Javascript
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
基于jQuery的公告无限循环滚动实现代码
May 11 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
ES6 async、await的基本使用方法示例
Jun 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模块memcache和memcached区别分析
2011/06/14 PHP
PHP里的中文变量说明
2011/07/23 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
python3获取当前文件的上一级目录实例
2018/04/26 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
python selenium循环登陆网站的实现
2019/11/04 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
历史学专业个人的自我评价
2013/10/13 职场文书
书法培训心得体会
2014/01/05 职场文书
小学生班会演讲稿
2014/01/09 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
高中毕业生登记表自我鉴定范文
2014/03/18 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
法律讲堂观后感
2015/06/11 职场文书