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


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 自动填写表单的实现方法
Apr 09 Javascript
jQuery对表单元素的取值和赋值操作代码
May 19 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
js处理json以及字符串的比较等常用操作
Sep 08 Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
Vue的过滤器你真了解吗
Feb 24 Vue.js
用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+ajax实现图片文件上传功能实例
2014/06/17 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
详解Angular5 服务端渲染实战
2018/01/04 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
python黑魔法之编码转换
2016/01/25 Python
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
Python常见字典内建函数用法示例
2018/05/14 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
python实现机器学习之元线性回归
2018/09/06 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
外贸业务员求职信范文
2013/12/12 职场文书
语文教学随笔感言
2014/02/18 职场文书
党员干部承诺书范文
2014/03/25 职场文书
提拔干部考察材料
2014/05/26 职场文书
计算机专业自荐信
2015/03/05 职场文书
关爱空巢老人感想
2015/08/11 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android