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


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中的一些定位属性[图解]
Jul 14 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 Javascript
Bootstrap3 图片(响应式图片&图片形状)
Jan 04 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
基于Vue 实现一个中规中矩loading组件
Apr 03 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 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 程序员的调试技术小结
2009/11/15 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
smarty中js的调用方法示例
2014/10/27 PHP
Yii核心验证器api详解
2016/11/23 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
php生成word并下载代码实例
2019/03/15 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
javascript offsetX与layerX区别
2010/03/12 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
JS实现手风琴特效
2020/11/08 Javascript
Python创建文件和追加文件内容实例
2014/10/21 Python
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
奠基仪式策划方案
2014/05/15 职场文书
死亡证明书样本说明
2014/10/18 职场文书
稽核岗位职责
2015/02/10 职场文书
幼师个人总结范文
2015/02/28 职场文书
辩护意见书
2015/06/04 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫