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


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 相关文章推荐
jquery cookie插件代码类
May 26 Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
JQUERY1.6 使用方法四 检测浏览器
Nov 23 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
微信小程序点击view动态添加样式过程解析
Jan 21 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 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
浅谈电磁辐射对健康的影响
2021/03/01 无线电
php抓取页面与代码解析 推荐
2010/07/23 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
Javascript的一种模块模式
2010/09/08 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法
2019/02/21 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
python中执行shell命令的几个方法小结
2014/09/18 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
Python编程实现蚁群算法详解
2017/11/13 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
Python2包含中文报错的解决方法
2018/07/09 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
python构造函数init实例方法解析
2020/01/19 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
董事长助理工作职责
2014/06/08 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP