微信小程序总结

小程序拆包

分包

某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。

在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。

目前小程序分包大小有以下限制：

整个小程序所有分包大小不超过 20M
单个分包/主包大小不能超过 2M

对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作

打包原则

声明 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.json的subpackages字段中对应的分包配置项中定义independent字段声明对应分包为独立分包

限制

独立分包属于分包的一种。普通分包的所有限制都对独立分包有效。独立分包中插件、自定义组件的处理方式同普通分包。

此外，使用独立分包时要注意：

独立分包中不能依赖主包和其他分包中的内容，包括 js 文件、template、wxss、自定义组件、插件等（使用分包异步化时 js 文件、自定义组件、插件不受此条限制）
主包中的 app.wxss 对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式；
App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为；
独立分包中暂时不支持使用插件。

注意事项

（1）关于 getApp()

与普通分包不同，独立分包运行时，App 并不一定被注册，因此 getApp() 也不一定可以获得 App 对象：

当用户从独立分包页面启动小程序时，主包不存在，App也不存在，此时调用 getApp() 获取到的是 undefined。当用户进入普通分包或主包内页面时，主包才会被下载，App 才会被注册。
当用户是从普通分包或主包内页面跳转到独立分包页面时，主包已经存在，此时调用 getApp() 可以获取到真正的 App。

由于这一限制，开发者无法通过 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'}
复制代码

（2）关于 `App` 生命周期

当从独立分包启动小程序时，主包中 App 的 onLaunch 和首次 onShow 会在从独立分包页面首次进入主包或其他普通分包页面时调用。

由于独立分包中无法定义 App，小程序生命周期的监听可以使用 wx.onAppShow，wx.onAppHide 完成。App 上的其他事件可以使用 wx.onError，wx.onPageNotFound 监听。

分包预下载

基础库 2.3.0 开始支持，低版本需做兼容处理。开发者工具请使用 1.02.1808300 及以上版本，可点此下载。

开发者可以通过配置，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。对于独立分包，也可以预下载主包。

分包预下载目前只支持通过配置方式使用，暂不支持通过调用API完成。

vConsole 里有preloadSubpackages开头的日志信息，可以用来验证预下载的情况。

配置方法

预下载分包行为在进入某个页面时触发，通过在 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.5M 的分包，B中最多只能预下载总大小 1.5M 的分包。

小程序直播插件使用

1. 【直播组件】如何引入

版本限制：微信客户端版本 7.0.7 及以上（基础库版本2.9.x及以上支持同层渲染）可以观看直播及使用直播间的功能，低版本刚进入直播间时会提示用户升级微信客户端版本（低版本只能观看直播，无法使用直播间的功能）。

支持在主包或分包内引入【直播组件】 live-player-plugin 代码包（注：直播组件不计入代码包体积），项目根目录的 app.json 引用，示例代码如下：

(1) 主包引入

"plugins": {
    "live-player-plugin": {
        "version": "1.3.0", // 注意填写该直播组件最新版本号，微信开发者工具调试时可获取最新版本号（复制时请去掉注释）
        "provider": "wx2b03c6e691cd7370" // 必须填该直播组件appid，该示例值即为直播组件appid（复制时请去掉注释）
    }
}
复制代码

(2) 分包引入

"subpackages": [
    {
        "plugins": {
            "live-player-plugin": {
                "version": "1.3.0", // 注意该直播组件最新版本号，微信开发者工具调试时可获取最新版本号（复制时请去掉注释）
                "provider": "wx2b03c6e691cd7370" // 必须填该直播组件appid，该示例值即为直播组件appid（复制时请去掉注释）
            }
        }
    }
]
复制代码

2. 【直播组件】如何使用

按第1步的方法把组件代码包配置引入后，即可直接通过链接地址跳转到直播组件页面（即为进直播间页面）链接地址需要带上直播房间 id；房间 id 可通过下面获取直播房间列表 API 获取。

示例代码如下：

(1) 使用 navigator 组件跳转进入直播间

index.js

let roomId = [直播房间id] // 填写具体的房间号，可通过下面【获取直播房间列表】 API 获取
let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // 开发者在直播间页面路径上携带自定义参数（如示例中的path和pid参数），后续可以在分享卡片链接和跳转至商详页时获取，详见【获取自定义参数】、【直播间到商详页面携带参数】章节（上限600个字符，超过部分会被截断）
this.setData({
    roomId,
    customParams
})
复制代码

index.wxml

<navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={{roomId}}&custom_params={{customParams}}"></navigator>
// 其中wx2b03c6e691cd7370是直播组件appid不能修改
复制代码

(2) 使用 navigateTo 方法跳转进入直播间

index.js

let roomId = [直播房间id] // 填写具体的房间号，可通过下面【获取直播房间列表】 API 获取
let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // 开发者在直播间页面路径上携带自定义参数（如示例中的path和pid参数），后续可以在分享卡片链接和跳转至商详页时获取，详见【获取自定义参数】、【直播间到商详页面携带参数】章节（上限600个字符，超过部分会被截断）
wx.navigateTo({
    url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
})
// 其中wx2b03c6e691cd7370是直播组件appid不能修改
复制代码

通过该链接可跳转到直播组件页面（当前页面入口仅开放‘live-player-plugin’）。

示例效果图如下：

直播组件页面

)直播组件和接口

【组件接口】

通过在主包/分包中引入直播组件，开发者可以很方便的实现订阅、获取直播状态、获取用户openid以及获取分享卡片链接参数等功能。

【服务端接口】

服务端接口包含直播间接口和商品管理接口。

直播间管理接口是小程序直播提供给开发者对直播间进行批量操作的接口能力。开发者可以批量创建直播间，获取回放源视频，获取直播间列表等。
商品管理接口是小程序直播提供给开发者对直播商品进行批量操作的接口能力。开发者可以对商品批量进行添加、提审、删除以及更新等操作。

小程序云开发

小程序支付限制

wx.requestPayment

发起微信支付。调用前需在小程序微信公众平台 -功能-微信支付入口申请接入微信支付

Object object

属性	类型	默认值	必填	说明
timeStamp	string		是	时间戳，从 1970 年 1 月 1 日 00:00:00 至今的秒数，即当前的时间
nonceStr	string		是	随机字符串，长度为32个字符以下
package	string		是	统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=***
signType	string	MD5	否	签名算法，应与后台下单时的值一致
paySign	string		是	签名，具体见微信支付文档
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.signType 的合法值

值	说明	最低版本
MD5	仅在 v2 版本接口适用
HMAC-SHA256	仅在 v2 版本接口适用
RSA	仅在 v3 版本接口适用

示例代码

wx.requestPayment({
  timeStamp: '',
  nonceStr: '',
  package: '',
  signType: 'MD5',
  paySign: '',
  success (res) { },
  fail (res) { }
})
复制代码

小程序 postMessage 限制

网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }，data是多次 postMessage 的参数组成的数组

主要使用的微信小程序的一些能力

获取用户信息
支付
发票
本地存储
画布
分包加载
分享好友/分享朋友圈
转发
收藏
消息
获取小程序码
获取小程序链接

通过服务端接口或在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme。适用于从短信、邮件、微信外网页等场景打开小程序。通过 URL Scheme 打开小程序的场景值为 1065。
生成的 URL Scheme 如下所示：

weixin://dl/business/?t= *TICKET*
复制代码

iOS系统支持识别 URL Scheme，可在短信等应用场景中直接通过Scheme跳转小程序。
Android系统不支持直接识别 URL Scheme，用户无法通过 Scheme 正常打开小程序，开发者需要使用 H5 页面中转，再跳转到 Scheme 实现打开小程序，跳转代码示例如下：

location.href = 'weixin://dl/business/?t= *TICKET*'
复制代码

该跳转方法可以在用户打开 H5 时立即调用，也可以在用户触发事件后调用。

调用上限

Scheme 将根据是否为到期有效与失效时间参数，分为短期有效Scheme与长期有效Scheme：

单个小程序每日生成 Scheme 上限为50万个（包含短期有效 Scheme 与长期有效 Scheme）
有效时间超过31天的 Scheme 或永久有效的 Scheme 为长期有效Scheme，单个小程序总共可生成长期有效 Scheme 上限为10万个，请谨慎调用
有效时间不超过31天的 Scheme 为短期有效Scheme，单个小程序生成短期有效 Scheme 不设上限

注意事项

微信内的网页如需打开小程序请使用微信开放标签-小程序跳转按钮，无公众号也可以直接使用小程序身份开发网页并免鉴权跳转小程序，见云开发静态网站跳转小程序。符合开放范围的小程序可以下发支持打开小程序的短信
该功能基本覆盖当前用户正在使用的微信版本，开发者无需进行低版本兼容
只能生成已发布的小程序的 URL Scheme
通过 URL Scheme 跳转到微信时，可能会触发系统弹框询问，若用户选择不跳转，则无法打开小程序。请开发者妥善处理用户选择不跳转的场景
部分浏览器会限制打开网页直接跳转，可参考示例网页设置跳转按钮

开放范围

针对非个人主体小程序开放。

示例代码

示例使用了云开发静态网站托管搭建网页，无需公众号，只需准备好小程序和开通云开发。网页会判断所在的环境来觉得采用哪种跳转方式，如检测到微信客户端内，则免鉴权使用开放标签跳转，如检测到在外部浏览器或 App，则使用 URL Scheme 跳转小程序。

示例网页地址：postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.htm…

详细代码示例和说明：云开发静态网站跳转小程序

微信公众号和小程序的区别

什么是微信小程序
微信小程序是一种不需要下载安装即可使用的应用，基本实现APP的功能。开发成本低，推广更容易简单。

什么是公众号
公众号是内容媒体和O2O生活服务的信息化平台。

微信用户8亿以上，微信每月活跃用户已达到5.49亿，微信公众号的数量已破1000万，用户覆盖200多个国家、超过20种语言。

微信小程序和公众号的区别是什么？
1、定位不同（公众号服务于营销与信息传递，小程序面向产品与服务）

公众号主要用于信息的传递实现人与信息的连接，借助H5 能够实现简单的交互，主要以营销和信息传递为主简单的服务为辅。

而小程序从功能上与公众号有严格区分（不支持关注、消息推送等营销手段），一方面使得产品与服务不至于淹没在公众号营销信息中，另一方支持公众号、朋友圈、群与小程序之间的互动与导流，使得开发者专心做产品与服务，从而为微信带来大量长尾服务叠加微信自身重度服务打造从社交到信息连接再到服务的生态圈。

2、实现技术区别（公众号基于H5，小程序基于微信自身开发环境与开发语言）

小程序是微信内的云端应用（所以无需安装），不是原生App，通过WebSocket 双向通信（保证无需刷新即时通信）、本地缓存（图片与UI 本地缓存降低与服务器交互延时）以及微信底层技术优化实现了接近原生APP 的体验。

公众号是基于传统H5 开发与运行，传统H5 运行环境是浏览器，你可以理解为公众号里面放的是一个网站，而小程序是一个APP。

3、功能不同（公众号功能围绕信息展示与营销，小程序面向产品与服务）

微信与公众号在开发语言、设计规范、营销方式、审核机制等功能方面均有较大不同。公众号是一种账号类型，为用户提供信息与咨询发布平台，提供了一种新的信息传播方式，构建与读者之间更好的沟通与管理模式，结合H5以后公众号也能够提供一些简单交互功能。小程序主要旨在提供服务，相比公众号运行更流畅，能够提供更加复杂的产品与服务。公众号功能主要围绕信息传递与营销展开，小程序对营销功能进行了严格控制以与公众号区别，使得小程序的服务在使用体验与便捷性能够得到提升，不至于淹没在公众号过度营销信息中。

4、体验上的差别（公众号操作延时较大，小程序体验接近原生App）

公众号中点击应用功能后顶部出现绿色进度需要等一段时间，对于业务逻辑复杂交互要求高的应用使用起来体验较差。而小程序将会非常流畅几乎无需等待，类似普通APP 操作一样流畅。主要原因是公众号没有本地缓存，所以每次打开都是会请求服务器刷新页面，造成延时较长体验下降，小程序对UI 与图片本地缓存，只需要对服务器请求交互数据，页面切换无需刷新，所以体验能够接近原生APP 的流畅程度。

如果到现在，你还没有自己的小程序，那就是错失了移动互联网时代可能最大的风口。不管你做不做，小程序就在这里，不离不弃，为你带流量。
最后分享一下我收集的小程序源码

小程序优化

【微信小程序】性能优化 - 掘金 (juejin.cn)

微信小程序总结

小程序拆包

打包原则

引用原则

限制

注意事项

（2）关于 App 生命周期

分包预下载

配置方法

限制

小程序直播插件使用

1. 【直播组件】如何引入

2. 【直播组件】如何使用

示例代码如下：

index.js

index.wxml

index.js

示例效果图如下：

)直播组件和接口

【组件接口】

【服务端接口】

小程序云开发

小程序支付限制

Object object

示例代码

小程序 postMessage 限制

主要使用的微信小程序的一些能力

调用上限

注意事项

开放范围

示例代码

微信公众号和小程序的区别

小程序优化

（2）关于 `App` 生命周期