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

本文介绍了小程序使用分包的示例代码，分享给大家，具体如下：

官方文档：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

目前还没用过独立分包。对于到底在什么情境下运用还不是很清楚

到此这篇关于小程序使用分包的示例代码的文章就介绍到这了,更多相关小程序使用分包内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 小程序如何使用分包加载的实现方法

    "离线包"机制 微信小程序采用的是类似离线包加载方案,以转转小程序为例,当用户第一次打开时会先下载好所有代码,然后再加载页面:当用户再次进入转转小程序时,会直接使用已下载的代码,省去了代码下载的过程,打开速度更快. 看似很美好的设计,但有两个问题: 第一次打开转转小程序时白屏时间很长,因为要下载接近2.5M的代码量,也就是说你的代码越多,白屏时间越长,而转转APP采用的网页离线机制体验更佳:在用户打开APP时就下载/更新离线包,这样在用户进入对应的网页时,代码已经下载好了,没有漫长的白

  • 微信小程序分包加载代码实现方法详解

    微信小程序分包加载代码实现方法详解

    直接在 "app.json" 中贴入代码 { "pages": [ "pages/Login/xxxx", ], "subpackages":[{ // 这里就是贴入的代码 root值可以任意改 pages同上 "root":"packageA", "pages":[ "pages/Login/bbb", "pages/Login/ccc

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

    本文介绍了小程序使用分包的示例代码,分享给大家,具体如下: 官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载. 总结就是小程序内所有代码图片资源大小超过2M,此时就可以考虑创建分包,扩大小程序容量 目前小程序分包大小有以下限制: 整个小程序所有分包大小不超过 12M 单个分包/主包大小不

  • uniapp 实现微信小程序全局分享的示例代码

    uniapp 实现微信小程序全局分享的示例代码

    目录 创建全局分享内容文件 引入并全局注册该文件 自定义页面分享内容  uniapp 实现微信小程序的全局转发给好友/分享到朋友圈的功能.主要使用 Vue.js 的 全局混入 概念. 下面直接上 实现步骤和代码: 创建全局分享内容文件 1.创建一个全局分享的 js 文件.示例文件路径为:@/common/share.js ,在该文件中定义全局分享的内容: export default { data() { return { // 默认的全局分享内容 share: { title: '全局分享的标

  • C语言小程序 杨辉三角示例代码

    复制代码 代码如下: #include <stdio.h>#include <stdlib.h>int main(){ int i,j,k; int line; int *prev, *next; printf("输入要查看杨辉三角的行数(大于2):"); scanf("%d",&line); if(line < 2) {  printf("行数小于2,Goodbye!\n");  exit(1); } fo

  • 微信小程序聊天功能的示例代码

    微信小程序聊天功能的示例代码

    效果 初始化滚动条高度 var keyHeight = 0; 数据格式 const CHAT_DATA=[ { type:0,//0客服1用户 content:'欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎', headImg:'../../assets/common/images/headHortrait.jpeg',//头像 creatTime:'2019-01-01',//创建时间 contentType:'text' }

  • 微信小程序上传图片到服务器实例代码

    微信小程序上传图片到服务器实例代码

    上传图片到服务器: 1.先在前端写一个选择图片的区域来触发wx.chooseImage接口并用wx.setStorage接口把图片路径存起来. -wxml <view class="shangchuan" bindtap="choose"> <image style="width:100%;height:100%;" src="{{tempFilePaths}}"></image> <

  • Python实战小程序利用matplotlib模块画图代码分享

    Python实战小程序利用matplotlib模块画图代码分享

    Python中的数据可视化 matplotlib 是python最著名的绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地进行制图.而且也可以方便地将它作为绘图控件. 实战小程序:画出y=x^3的散点图 样例代码如下: #coding=utf-8 import pylab as y #引入pylab模块 x = y.np.linspace(-10, 10, 100) #设置x横坐标范围和点数 y.plot(x, x*x*x,'or') #生成图像 ax = y.gca() a

  • 微信小程序左滑删除实现代码实例

    这篇文章主要介绍了微信小程序左滑删除实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" wx:for="{{list}}" wx:key> <view class="co

  • 微信小程序左右滚动公告栏效果代码实例

    微信小程序左右滚动公告栏效果代码实例

    这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 <view class='notice-wrap' hidden='{{hideNotice}}'> <view class='tongzhitext'> <text class="tongzhi-text">{{notice}}</text> </view> &l

  • 微信小程序3D轮播实现代码

    微信小程序3D轮播实现代码

    这篇文章主要介绍了微信小程序3D轮播实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 <!-- 轮播图 --> <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChange" style='height:{{swiperH}};'> <swiper-item wx:for='{{imgList}}' w

  • 微信小程序实现一个简单swiper代码实例

    微信小程序实现一个简单swiper代码实例

    这篇文章主要介绍了微信小程序实现一个简单swiper代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 话不多说,上截图 HTML <swiper class="swiper-block" previous-margin="70rpx" next-margin="70rpx" current="0" autoplay="true" bindcha

随机推荐