开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。
在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必须包含一个主包,所谓的主包,即放置默认启动页/TabBar 页面,以及一些所有分包需要用到整个小程序所有分包大小不超过 8M单个分包/主包大小不能超2M。
对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更高的解耦协作。
假设支持分包的小程序目录结构
├── app.js
├── app.json
├── app.wxss
├── packageA
│ └── pages
│ ├── cat
│ └── dog
├── packageB
│ └── pages
│ ├── apple
│ └── banana
├── pages
│ ├── index
│ └── logs
└── utils
开发者通过在 app.json subPackages 字段声明项目分包结构:
{ "pages":[ "pages/index", "pages/logs" ], "subpackages": [ { "root": "packageA", "pages": [ "pages/cat", "pages/dog" ] }, { "root": "packageB", "name": "pack2", "pages": [ "pages/apple", "pages/banana" ] } ] }
subPackages 中,每个分包的配置有以下几项:
字段 | 类型 | 说明 |
---|---|---|
root | String | 分包根目录 |
name | String | 分包别名,分包预下载时可以使用 |
pages | StringArray | 分包页面路径,相对与分包根目录 |
independent | Boolean | 分包是否是独立分包 |
声明 subPackages 后,将按 subPackages 配置路径进行打包,subPackages 配置路径外的目
录将被打包到 app(主包) 中
app(主包)也可以有自己的 pages(即最外层的 pages 字段)
subPackage 的根目录不能是另外一个 subPackage 内的子目录
tabBar 页面必须在 app(主包)内
packageA 无法 require packageB JS 文件,但可以 require app、自己 package 内的 JS 文件
packageA 无法 import packageB 的 template,但可以 require app、自己 package 内的 template
packageA 无法使用 packageB 的资源,但可以使用 app、自己 package 内的资源
独立分包是小程序的一种特殊类型的分包,可以独立于主包和其他分包独立运行。从独立
分包中页面进入小程序时,不需要下载主包,当小程序进入不同分包的时候,主包才会被下载。
可发者可以按需将某些具有一定功能独立性的页面配置到独立分包中。当小程序从普通的
分包页面中启动时,需要首先下载主包;而独立分包不依赖主包即可运行,可以很大程度上
提升分包页面的启动速度, 一个小程序中可以有多个独立分包。
配置方法:
假设小程序的目录如下;
├── app.js
├── app.json
├── app.wxss
├── moduleA
│ └── pages
│ ├── rabbit
│ └── squirrel
├── moduleB
│ └── pages
│ ├── pear
│ └── pineapple
├── pages
│ ├── index
│ └── logs
└── utils
开发者可以通过在 app.json 的 subpackages 字段中的分包配置中自定义 independent字段声明对应分包为独立分包
{
"pages": [
"pages/index",
"pages/logs"
],
"subpackages": [
{
"root": "moduleA",
"pages": [
"pages/rabbit",
"pages/squirrel"
]
}, {
"root": "moduleA",
"pages": [
"pages/pear",
"pages/pineapple"
],
"independent": true
}
]
}
限制:
独立分包属于分包的一种,普通分包的所有限制独立分包有效。独立分包中插件自定义组件的处理方式同普通分包。
独立分包中不能依赖主包和其他分包中的内容,包括js 文件,template,wxss,自定义组件,插件等,主包的app.wxss 对独立分包无效。应避免在独立分包页面中使用 app.wxss 中的样式。
App 只能在主包中定义,独立分包中不能定义 App 会造成无法预期的行为。独立分包中暂时不支持使用插件。
与普通分包不同,独立分包运行时,App 并不一定被注册,因此,getApp()也不一定获得App 对象,当用户从独立分包页面启动小程序时,主包不存在,App 也不存在,此时调用getApp 获取到的是undefined 。当用户进入普通分包或者主包时,主包才会被下载, App 才会被注册。当用户从普通分包或者主包的页面挑到独立分包的时候,主包已经存在,此时调用getApp(),才能获得真正的App。
为了满足独立分包中的这一需求,基础库2.2.4 版本开始getApp 支持,allowDefault 参数,在 App 未定义的时候返回一个默认实现。当主包
加载 App 被注册的时候,默认实现中被定义的属性会被合并覆盖到默认的App 中。
示例:
const app = getApp({allowDefault:true}) // {}
app.data = 456
app.global = {}
//.app.js 中
App({
data:123
other:'hello'
})
console.log(getApp()) // {global: {} ,data: 456,other: 'hello'}
当从独立分包中启动小程序时,主包的中的onLanch 和首次 onShow 会从独立分包页面首次进入主包或普通分包页面时调用。
开发者可以通过配置,在进入小程序某个页面时,由框架自动预下载可需要的分包。提升进入后续分包页面的速度,对于独立分包,可以预下载主包。
配置方法:
预下载分包行为在进入某个页面的时候触发,在通过app.json 增加 preloadRule
{
"pages": ["pages/index"],
"subpackages": [
{
"root": "important",
"pages": ["index"],
},
{
"root": "sub1",
"pages": ["index"],
},
{
"name": "hello",
"root": "path/to",
"pages": ["index"]
},
{
"root": "sub3",
"pages": ["index"]
},
{
"root": "indep",
"pages": ["index"],
"independent": true
}
],
"preloadRule": {
"pages/index": {
"network": "all",
"packages": ["important"]
},
"sub1/index": {
"packages": ["hello", "sub3"]
},
"sub3/index": {
"packages": ["path/to"]
},
"indep/index": {
"packages": ["__APP__"]
}
}
}
preloadRule 中,key 是页面路径, value 是进入此页面的 预下载配置,每个配置都有以下几项。
字段 | 类型 | 必填 | 默认值 | 说明 |
packages | StringArray | 是 | 无 | 进入页面后预下载分包的 root 或 name。__APP__ 表示主包。 |
network | String | 否 | wifi | 在指定网络下预下载,可选值为: all: 不限网络 wifi: 仅wifi下预下载 |
限制
同一个分包中的页面享有共同的预下载大小限额2M,会在工具打包时校验。如:页面A 和页面B 都在同一个分包中,A 中预下载大小为0.5 M的分包,B 中最大多只能预下载大小1.5 的分包。
详细请参考 https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html
微信小程序的wxss、阿里旗下淘宝、支付宝小程序的acss等等语法很类似原生css,但是在web开发里用惯了动态css语言,再写回原生css很不习惯,尤其是父子样式的嵌套写法非常繁琐。
loading与toast一般不能同时引用,所以一般先把hideloading了,再执行showtoast,之前把hideloading加到了complete中,所以toast就一直出问题
小程序插件让大的公司赋能外部开发者变得非常方便,极大降低了中小开发者开发丰富的小程序应用的门槛,未来的发展是很值得期待的。尤其是国庆节前夕,微信公布的关于小程序跳小程序的新政策,极大地限制了不同主体之间小程序互跳的自由度
在小程序中,目前也支持简单的组件化编程,可以把页面通用功能模块抽象成自定义组件,以以便在不同的页面中复用,提供代码可读性,降低维护成本,这篇文章主要讲解小程序实现组件开发的多种方式
在微信小程序中,用力往下拉动,页面顶部会出现一段空白的地方。 产品的需求不太允许这么做,会影响用户体验,查看文档发现可以使用enablePullDownRefresh这属性来实现,但是在部分ios端仍然可以下拉出现空白。那么该如何解决呢?
微信小程序的分包大小已经到达了 12M 大小,一方面说明小程序的确逐步为开发者放开更大的权限,另一方面也说明了对于某些小程序 8M 的大小已经不够用了
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
微信小程序-微信小程序可以通过API获取当前位置的经纬度,在微信小程序开发文档中可以找到这个API的使用示例,但是需要获取具体地址就需要使用到外部的API(此处用到的是腾讯的位置服务)
微信小程序扩展: 将公共方法绑定到Page上、扩展,修改生命周期函数。将自定义的内容单独封装到一个js文件中,然后在app.js中引用这个文件即可
在web-view的src中,引入了一个HTML5页面,这个页面有个自动播放的音频。在小程序中,点击右上角关闭小程序后,web-view页面中的音频依然会播放。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!