网络
1. 服务器域名配置
每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名与进行网络通信
包括普通 HTTPS 请求（wx.request）、上传文件（wx.uploadFile）、下载文件（wx.downloadFile) 和 WebSocket 通信（wx.connectSocket）
从基础库 2.4.0 开始，网络接口允许与局域网 IP 通信，但要注意 不允许与本机 IP 通信
从 2.7.0 开始，提供了 UDP 通信（wx.createUDPSocket)
配置流程
服务器域名请在 「小程序后台-开发-开发设置-服务器域名」 中进行配置，配置时需要注意：
- 域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 协议；
- 域名不能使用 IP 地址（小程序的局域网 IP 除外）或 localhost；
- 可以配置端口，如 myserver.com:8080，但是配置后只能向 myserver.com:8080 发起请求。如果向 myserver.com、myserver.com:9091 等 URL 请求则会失败
- 如果不配置端口。如 myserver.com，那么请求的 URL 中也不能包含端口，甚至是默认的 443 端口也不可以。如果向 myserver.com:443 请求则会失败
- 域名必须经过 ICP 备案；
- 出于安全考虑，api.weixin.qq.com 不能被配置为服务器域名，相关API也不能在小程序内调用。 开发者应将 AppSecret 保存到后台服务器中，通过服务器使用 getAccessToken 接口获取 access_token，并调用相关 API；
- 对于每个接口，分别可以配置最多 20 个域名。
2. 网络请求
2.1 超时时间
- 默认超时时间和最大超时时间都是 60s；
- 超时时间可以在 app.json 或 game.json 中通过 networktimeout 配置
2.2 使用限制
- 网络请求的 referer header 不可设置。其格式固定为：
https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本；
- wx.request、wx.uploadFile、wx.downloadFile 的最大并发限制是 10 个；
- wx.connectSockt 的最大并发限制是 5 个
- 小程序进入后台运行后，如果 5s 内网络请求没有结束，会回调错误信息 fail interrupted；在回到前台之前，网络请求接口调用都会无法调用
2.3 返回值编码
- 建议服务器返回值使用 UTF-8 编码。对于非 UTF-8 编码，小程序会尝试进行转换，但是会有转换失败的可能。
- 小程序会自动对 BOM 头进行过滤（只过滤一个BOM头）
2.4 回调函数
只要成功接收到服务器返回，无论 statusCode 是多少，都会进入 success 回调。请开发者根据业务逻辑对返回值进行判断
3. 常见问题
3.1 HTTPS 证书
小程序必须使用 HTTPS/WSS 发起网络请求，请求时系统会对服务器域名使用的 HTTPS 证书进行校验，如果校验失败，则请求不能成功发起
由于系统限制，不同平台对于证书要求的严格程度不同。为了保证小程序的兼容性，建议开发者按照最高标准进行证书配置，并使用相关工具检查现有证书是否符合要求
对HTTPS证书要求如下：
-
HTTPS 证书必须有效；
** 证书必须被系统信任，即根证书被已系统内置
** 部署 SSL 证书的网站域名必须与证书颁发的域名一致
** 证书必须在有效期内
** 证书的信任链必需完整（需要服务器配置） -
iOS 不支持自签名证书;
-
iOS 下证书必须满足苹果 App Transport Security (ATS) 的要求;
-
TLS 必须支持 1.2 及以上版本。部分旧 Android 机型还未支持 TLS 1.2，请确保 HTTPS 服务器的 TLS 版本支持 1.2 及以下版本;
-
部分 CA 可能不被操作系统信任，请开发者在选择证书时注意小程序和各系统的相关通告
除了网络请求 API 外，小程序中其他 HTTPS 请求如果出现异常，也请按上述流程进行检查。如 https 的图片无法加载、音视频无法播放等
3.2 跳过域名校验
在微信开发者工具中，可以临时开启 开发环境不校验请求域名、TLS版本及HTTPS证书 选项，跳过服务器域名的校验，此时，在微信开发者工具中及手机开启调试模式时，不会进行服务器域名的校验
在服务器域名配置成功后，建议开发者关闭此选项进行开发，并在各平台下进行测试，以确认服务器域名配置正确
如果手机上出现 “打开调试模式可以发出请求，关闭调试模式无法发出请求” 的现象，请确认是否跳过了域名校验，并确认服务器域名和证书配置是否正确
存储
1. 存储
每个微信小程序都可以有自己的本地缓存，可以通过 wx.setStorage/wx.setStorageSync、wx.getStorage/wx.getStorageSync、wx.clearStorage/wx.clearStorageSync，wx.removeStorage/wx.removeStorageSync 对本地缓存进行读写和清理
2. 隔离策略
同一个微信用户，同一个小程序 storage 上限为 10MB。storage 以用户维度隔离，同一台设备上，A 用户无法读取到 B 用户的数据；不同小程序之间也无法互相读写数据
3. 清理策略
本地缓存的清理时机跟代码包一样，只有在代码包被清理的时候本地缓存才会被清理
文件系统
1. 文件系统
文件系统是小程序提供的一套以小程序和用户维度隔离的存储以及一套相应的管理接口
通过 wx.getFileSystemManager() 可以获取到全局唯一的文件系统管理器，所有文件系统的管理操作通过 FileSystemManager 来调用
var fs = wx.getFileSystemManager()
文件主要分为两大类：
- 代码包文件：代码包文件指的是在项目目录中添加的文件。
- 本地文件：通过调用接口本地产生，或通过网络下载下来，存储到本地的文件。
其中本地文件又分为三种：
- 本地临时文件：临时产生，随时会被回收的文件。不限制存储大小。
- 本地缓存文件：小程序通过接口把本地临时文件缓存后产生的文件，不能自定义目录和文件名。跟本地用户文件共计，普通小程序最多可存储 10MB，游戏类目的小程序最多可存储 50MB。
- 本地用户文件：小程序通过接口把本地临时文件缓存后产生的文件，允许自定义目录和文件名。跟本地缓存文件共计，普通小程序最多可存储 10MB，游戏类目的小程序最多可存储 50MB
2. 代码包文件
由于代码包文件大小限制，代码包文件适用于放置首次加载时需要的文件，对于内容较大或需要动态替换的文件，不推荐用添加到代码包中，推荐在小游戏启动之后再用下载接口下载到本地
3. 访问代码包文件
代码包文件的访问方式是从项目根目录开始写文件路径，不支持相对路径的写法。如：/a/b/c、a/b/c 都是合法的，./a/b/c ../a/b/c 则不合法
4. 修改代码包文件
代码包内的文件无法在运行后动态修改或删除，修改代码包文件需要重新发布版本
5. 本地文件
本地文件指的是小程序被用户添加到手机后，会有一块独立的文件存储区域，以用户维度隔离
即同一台手机，每个微信用户不能访问到其他登录用户的文件，同一个用户不同 appId 之间的文件也不能互相访问
本地文件的文件路径均为以下格式：
{{协议名}}://文件路径
其中，协议名在 iOS/Android 客户端为 "wxfile"，在开发者工具上为 "http"，开发者无需关注这个差异，也不应在代码中去硬编码完整文件路径。
5. 本地临时文件
本地临时文件只能通过调用特定接口产生，不能直接写入内容
本地临时文件产生后，仅在当前生命周期内有效，重启之后即不可用
不可把本地临时文件路径存储起来下次使用
如果需要下次在使用，可通过 FileSystemManager.saveFile() 或 FileSystemManager.copyFile() 接口把本地临时文件转换成本地缓存文件或本地用户文
wx.chooseImage({
success: function (res) {
var tempFilePaths = res.tempFilePaths // tempFilePaths 的每一项是一个本地临时文件路径
}
})
6. 本地缓存文件
本地缓存文件只能通过调用特定接口产生，不能直接写入内容。本地缓存文件产生后，重启之后仍可用。本地缓存文件只能通过FileSystemManager.saveFile() 接口将本地临时文件保存获得
fs.saveFile({
tempFilePath: '', // 传入一个本地临时文件路径
success(res) {
console.log(res.savedFilePath) // res.savedFilePath 为一个本地缓存文件路径
}
})
7. 本地用户文件
本地用户文件是从 1.7.0 版本开始新增的概念。我们提供了一个用户文件目录给开发者，开发者对这个目录有完全自由的读写权限。通过 wx.env.USER_DATA_PATH可以获取到这个目录的路径
// 在本地用户文件目录下创建一个文件 hello.txt，写入内容 "hello, world"
const fs = wx.getFileSystemManager()
fs.writeFileSync(`${wx.env.USER_DATA_PATH}/hello.txt`, 'hello, world', 'utf8')
8. 读写权限
9. 清理策略
- 本地临时文件只保证在小程序当前生命周期内，一旦小程序被关闭就可能被清理，即下次冷启动不保证可用。
- 本地缓存文件和本地用户文件的清理时机跟代码包一样，只有在代码包被清理的时会被清理
画布
所有在 canvas 中的画图必须用 JavaScript 完成：
WXML模板：
<canvas canvas-id="myCanvas" style="border: 1px solid;"/>
JS(放在onload中):
const ctx = wx.createCanvasContext('myCanvas') //创建对象
ctx.setFillStyle('red') //设置样式
ctx.fillRect(10, 10, 150, 75) //绘制形状
ctx.draw() //画图
1. 创建一个画布的步骤
1.1 第一步：创建一个 canvas 绘图上下文
首先，创建一个 canvas 绘图上下文 CanvasContext
const ctx = wx.createCanvasContext('myCanvas')
1.2 第二步：使用 canvas 绘图上下文进行绘图描述
ctx.setFillStyle('red') //设置绘图上下文的填充色为红色
ctx.fillRect(10, 10, 150, 75)
// 用 fillRect(x, y, width, height) 方法画一个矩形，填充为刚刚设置的红色
// 含义：从左上角(0, 0)开始，画一个150 x 75px 的矩形
1.3 第三步：画图
告诉 canvas 组件你要将刚刚的描述绘制上去
ctx.draw()
2. 坐标系
canvas 是在一个二维的网格当中。左上角的坐标为(0, 0)
3. 渐变
渐变能用于填充一个矩形，圆，线，文字等。填充色可以不固定为固定的一种颜色
2中渐变的方式：
createLinearGradient(x, y, x1, y1)创建一个线性的渐变createCircularGradient(x, y, r)创建一个从圆心开始的渐变
一旦我们创建了一个渐变对象，我们必须添加两个颜色渐变点:
addColorStop(position, color)方法用于指定颜色渐变点的位置和颜色，位置必须位于0到1之间
可以用setFillStyle 和 setStrokeStyle 方法设置渐变，然后进行画图描述
使用 createLinearGradient()：
const ctx = wx.createCanvasContext('myCanvas')
// Create linear gradient
const grd = ctx.createLinearGradient(0, 0, 200, 0)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')
// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()
const ctx = wx.createCanvasContext('myCanvas')
// Create circular gradient
const grd = ctx.createCircularGradient(75, 50, 50)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')
// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()
分包加载
1. 介绍
某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载
在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分
在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示
目前小程序分包大小有以下限制：
- 整个小程序所有分包大小不超过 8M
- 单个分包/主包大小不能超过 2M
对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作
2. 使用分包
2.1 配置方法
假设支持分包的小程序目录结构如下：
├── app.js
├── app.json
├── app.wxss
├── packageA
│ └── pages
│ ├── cat
│ └── dog
├── packageB
│ └── pages
│ ├── apple
│ └── banana
├── pages
│ ├── index
│ └── logs
└── utils
2.2 在 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 中，每个分包的配置有以下几项：
2.3 打包原则
- 声明 subpackages 后，将按 subpackages 配置路径进行打包，subpackages 配置路径外的目录将被打包到 app（主包） 中
- app（主包）也可以有自己的 pages（即最外层的 pages 字段）
- subpackage 的根目录不能是另外一个 subpackage 内的子目录
- tabBar 页面必须在 app（主包）内
2.4 引用原则
- packageA 无法 require packageB JS 文件，但可以 require app、自己 package 内的 JS 文件
- packageA 无法 import packageB 的 template，但可以 require app、自己 package 内的 template
- packageA 无法使用 packageB 的资源，但可以使用 app、自己 package 内的资源
2.5 低版本兼容
由微信后台编译来处理旧版本客户端的兼容，后台会编译两份代码包，一份是分包后代码，另外一份是整包的兼容代码。 新客户端用分包，老客户端还是用的整包，完整包会把各个 subpackage 里面的路径放到 pages 中
3. 独立分包
3.1 介绍
独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行
从独立分包中页面进入小程序时，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载
开发者可以按需将某些具有一定功能独立性的页面配置到独立分包中。当小程序从普通的分包页面启动时，需要首先下载主包；而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度
一个小程序中可以有多个独立分包
小游戏不支持独立分包
3.2 配置方法
假设目录如下：
├── 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": "moduleB",
"pages": [
"pages/pear",
"pages/pineapple"
],
"independent": true //声明独立分包
}
]
}
3.3 限制
独立分包属于分包的一种。普通分包的所有限制都对独立分包有效。独立分包中插件、自定义组件的处理方式同普通分包
独立分包注意事项：
- 独立分包中不能依赖主包和其他分包中的内容，包括js文件、template、wxss、自定义组件、插件等。主包中的app.wxss对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式；
- App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为；
- 独立分包中暂时不支持使用插件
4. 分包预下载
开发者可以通过配置，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。对于独立分包，也可以预下载主包
分包预下载目前只支持通过配置方式使用，暂不支持通过调用API完成
4.1 配置方法
预下载分包行为在进入某个页面时触发，通过在 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 是进入此页面的预下载配置，每个配置有以下几项：
4.2 限制
同一个分包中的页面享有共同的预下载大小限额 2M，限额会在工具中打包时校验。
如，页面 A 和 B 都在同一个分包中，A 中预下载总大小 0.5M 的分包，B中最多只能预下载总大小 1.5M 的分包
多线程Worker
1. 介绍
一些异步处理的任务，可以放置于 Worker 中运行，待运行结束后，再把结果返回到小程序主线程。Worker 运行于一个单独的全局上下文与线程中，不能直接调用主线程的方法
Worker 与主线程之间的数据传输，双方使用 Worker.postMessage()来发送数据，Worker.onMessage() 来接收数据，传输的数据并不是直接共享，而是被复制的
2. 使用流程
2.1 配置 Worker 信息
在 app.json 中可配置 Worker 代码放置的目录，目录下的代码将被打包成一个文件
{
"workers": "workers"
}
2.2 添加 Worker 代码文件
在代码目录下新建以下两个入口文件
workers/request/index.js
workers/request/utils.js
workers/response/index.js
添加后，目录结构如下：
├── app.js
├── app.json
├── project.config.json
└── workers
├── request
│ ├── index.js
│ └── utils.js
└── response
└── index.js
2.3 编写 Worker 代码
在 workers/request/index.js 编写 Worker 响应代码
const utils = require('./utils')
// 在 Worker 线程执行上下文会全局暴露一个 worker 对象，直接调用 worker.onMeesage/postMessage 即可
worker.onMessage(function (res) {
console.log(res)
})
2.4 在主线程中初始化 Worker
在主线程的代码 app.js 中初始化 Worker
const worker = wx.createWorker('workers/request/index.js') // 文件名指定 worker 的入口文件路径，绝对路径
2.5 主线程向 Worker 发送消息
worker.postMessage({
msg: 'hello worker'
})
3. 注意事项
- Worker 最大并发数量限制为 1 个，创建下一个前请用 Worker.terminate() 结束当前 Worker
- Worker 内代码只能 require 指定 Worker 路径内的文件，无法引用其它路径
- Worker 的入口文件由 wx.createWorker() 时指定，开发者可动态指定 Worker 入口文件
- Worker 内不支持 wx 系列的 API
- Workers 之间不支持发送消息
服务端能力
1. 服务端API
1.1 后端API
小程序还提供了一系列在后端服务器使用 HTTPS 请求调用的 API，帮助开发者在后台完成各类数据分析、管理和查询等操作。如 getAccessToken，code2Session 等
1.2 access_token
access_token 是小程序全局唯一后台接口调用凭据，调用绝大多数后台接口时都需使用
可以通过 getAccessToken 接口获取并进行妥善保存
为了 access_token 的安全性，后端 API 不能直接在小程序内通过 wx.request 调用，即 api.weixin.qq.com 不能被配置为服务器域名。开发者应在后端服务器使用getAccessToken获取 access_token，并调用相关 API
1.3 请求参数说明
- 对于 GET 请求，请求参数应以 QueryString 的形式写在 URL 中。
- 对于 POST 请求，部分参数需以 QueryString 的形式写在 URL 中（一般只有 access_token，如有额外参数会在文档里的 URL 中体现），其他参数如无特殊说明均以 JSON 字符串格式写在 POST 请求的 body 中
1.4 返回参数说明
注意：当API调用成功时，部分接口不会返回 errcode 和 errmsg，只有调用失败时才会返回
2. 消息推送
2.1 介绍
接入微信小程序消息推送服务，可以两种方式选择其一：
开发者服务器接收消息推送
云函数接收消息推送
2.2 开发者服务器接收消息推送
开发者需要按照如下步骤完成：
1. 填写服务器配置
2. 验证服务器地址的有效性
3. 根据接口文档实现业务逻辑，接收消息和事件
第一步：填写服务器配置
登录小程序后台后，在「开发」-「开发设置」-「消息推送」中，管理员扫码启用消息服务，填写服务器地址（URL）、令牌（Token） 和 消息加密密钥（EncodingAESKey）等信息
- URL: 开发者用来接收微信消息和事件的接口 URL。开发者所填写的URL 必须以 http:// 或 https:// 开头，分别支持 80 端口和 443 端口
- Token: 可由开发者可以任意填写，用作生成签名（该 Token 会和接口 URL 中包含的 Token 进行比对，从而验证安全性）
- EncodingAESKey: 由开发者手动填写或随机生成，将用作消息体加解密密钥
同时，开发者可选择消息加解密方式：明文模式（默认）、兼容模式和安全模式。可以选择消息数据格式：XML 格式（默认）或 JSON 格式
模式的选择与服务器配置在提交后都会立即生效，请开发者谨慎填写及选择。切换加密方式和数据格式需要提前配置好相关代码，详情请参考 消息加解密说明
第二步：验证消息的确来自微信服务器
提交信息后，微信服务器将发送GET请求到填写的服务器地址URL上，GET请求携带参数如下表所示：
-
- 将token、timestamp、nonce三个参数进行字典序排序
-
- 将三个参数字符串拼接成一个字符串进行sha1加密
-
- 开发者获得加密后的字符串可与signature对比，标识该请求来源于微信
第三步：接收消息和事件
当某些特定的用户操作引发事件推送时（如用户向小程序客服发送消息、或者进入会话等情况），微信服务器会将消息（或事件）的数据包以 POST 请求发送到开发者配置的 URL，开发者可以依据自身业务逻辑进行响应
微信服务器在将用户的消息发给开发者服务器地址后，微信服务器在五秒内收不到响应会断掉连接，并且重新发起请求，总共重试三次。如果在调试中，发现用户无法收到响应的消息，可以检查是否消息处理超时。关于重试的消息排重，有 msgid 的消息推荐使用 msgid 排重。事件类型消息推荐使用 FromUserName + CreateTime 排重
服务器收到请求必须做出下述回复，这样微信服务器才不会对此作任何处理，并且不会发起重试，否则，将出现严重的错误提示。详见下面说明
- 直接回复success（推荐方式）
- 直接回复空串（指字节长度为0的空字符串，而不是结构体中content字段的内容为空）
- 若接口文档有指定返回内容，应按文档说明返回
对于客服消息，一旦遇到以下情况，微信会在小程序会话中向用户下发系统提示“该小程序客服暂时无法提供服务，请稍后再试”：
- 开发者在5秒内未回复任何内容
- 开发者回复了异常数据
如果开发者希望增强安全性，可以在开发者中心处开启消息加密，这样，用户发给小程序的消息以及小程序被动回复用户消息都会继续加密
2.3 云函数接收消息推送
开通了云开发的小程序可以使用云函数接收消息推送，目前仅支持客服消息推送
接入步骤如下：
-
- 开发者工具中填写配置并上传
-
- 云函数中处理消息
第一步：开发者工具云开发控制台中增加配置
打开云开发控制台，到设置 tab 中选择全局设置 - 添加消息推送配置。消息类型对应收包的 MsgType，事件类型对应收包的 Event，同一个 <消息类型, 事件类型> 二元组只能推到一个环境的一个云函数。例如客服消息文本消息对应的就是消息类型为 text，事件类型为空。具体值请查看各个消息的消息格式
第二步：云函数中处理消息
云函数被触发时，其 event 参数即是接口所定义的 JSON 结构的对象（统一 JSON 格式，不支持 XML 格式）。
以客服消息为例，接收到客服消息推送时，event 结构如下
{
"FromUserName": "ohl4L0Rnhq7vmmbT_DaNQa4ePaz0",
"ToUserName": "wx3d289323f5900f8e",
"Content": "测试",
"CreateTime": 1555684067,
"MsgId": "49d72d67b16d115e7935ac386f2f0fa41535298877_1555684067",
"MsgType": "text"
}
此时可调用客服消息发送接口回复消息，一个简单的接收到消息后统一回复 “收到” 的示例如下：
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
await cloud.openapi.customerServiceMessage.send({
touser: wxContext.OPENID,
msgtype: 'text',
text: {
content: '收到',
},
})
return 'success'
}
自定义tabBar
自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式，以满足更多个性化的场景
在自定义 tabBar 模式下：
- 为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染
- 此时需要开发者提供一个自定义组件来渲染 tabBar，所有 tabBar 的样式都由该自定义组件渲染。推荐用 fixed 在底部的 cover-view + cover-image 组件渲染样式，以保证 tabBar 层级相对较高
- 与 tabBar 样式相关的接口，如 wx.setTabBarItem 等将失效
- 每个 tab 页下的自定义 tabBar 组件实例是不同的，可通过自定义组件下的 getTabBar 接口，获取当前页面的自定义 tabBar 组件实例
注意：如需实现 tab 选中态，要在当前页面下，通过 getTabBar 接口获取组件实例，并调用 setData 更新选中态
第一步：配置信息
- 在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整
- 所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启
{
"tabBar": {
"custom": true,
"color": "#000000",
"selectedColor": "#000000",
"backgroundColor": "#000000",
"list": [{
"pagePath": "page/component/index",
"text": "组件"
}, {
"pagePath": "page/API/index",
"text": "接口"
}]
},
"usingComponents": {}
}
第二步：添加 tabBar 代码文件
在代码根目录下添加入口文件:
custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss
第三步：编写 tabBar 代码
用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增 getTabBar 接口，可获取当前页面下的自定义 tabBar 组件实例
周期性更新
周期性更新 能够在用户未打开小程序的情况下，也能从服务器提前拉取数据，当用户打开小程序时可以更快地渲染页面，减少用户等待时间，增强在弱网条件下的可用性
第一步：配置数据下载地址
登录小程序 MP 管理后台，进入设置 -> 开发设置 -> 数据周期性更新，点击开启，填写数据下载地址
第二步：设置 TOKEN
第一次启动小程序时，调用 wx.setBackgroundFetchToken() 设置一个 TOKEN 字符串，可以跟用户态相关，会在后续微信客户端向开发者服务器请求时带上，便于给后者校验请求合法性
App({
onLaunch() {
wx.setBackgroundFetchToken({
token: 'xxx'
})
}
})
第三步：微信客户端定期拉取数据
微信客户端会在一定的网络条件下，每隔 12 小时（以上一次成功更新的时间为准）向配置的数据下载地址发起一个 HTTP GET 请求，其中包含的 query 参数如下，数据获取到后会将整个 HTTP body 缓存到本地
query 参数会使用 urlencode 处理
开发者服务器接口返回的数据类型应为字符串，且大小应不超过 256KB，否则将无法缓存数据
第四步：读取数据
用户启动小程序时，调用 wx.getBackgroundFetchData() 获取已缓存到本地的数据
App({
onLaunch() {
wx.getBackgroundFetchData({
fetchType: 'periodic',
success(res) {
console.log(res.fetchedData) // 缓存数据
console.log(res.timeStamp) // 客户端拿到缓存数据的时间戳
}
})
}
})
数据预拉取
数据预拉取能够在小程序冷启动的时候通过微信后台提前向第三方服务器拉取业务数据，当代码包加载完时可以更快地渲染页面，减少用户等待时间，从而提升小程序的打开速度
第一步：配置数据下载地址
登录小程序 MP 管理后台，进入设置 -> 开发设置 -> 数据预加载，点击开启，填写数据下载地址，只支持 HTTPS
第二步：设置 TOKEN
第一次启动小程序时，调用 wx.setBackgroundFetchToken() 设置一个 TOKEN 字符串，可以跟用户态相关，会在后续微信客户端向开发者服务器请求时带上，便于给后者校验请求合法性
App({
onLaunch() {
wx.setBackgroundFetchToken({
token: 'xxx'
})
}
})
第三步：微信客户端提前拉取数据
当用户打开小程序时，微信服务器将向开发者服务器（上面配置的数据下载地址）发起一个 HTTP GET 请求，其中包含的 query 参数如下，数据获取到后会将整个 HTTP body 缓存到本地
注意事项：
- query 参数会使用 urlencode 处理
- token和code只会存在一个，用于标识用户身份。
- 开发者服务器接口返回的数据类型应为字符串，且大小应不超过 256KB，否则将无法缓存数据
第四步：读取数据
用户启动小程序时，调用 wx.getBackgroundFetchData() 获取已缓存到本地的数据
App({
onLaunch() {
wx.getBackgroundFetchData({
fetchType: 'pre',
success(res) {
console.log(res.fetchedData) // 缓存数据
console.log(res.timeStamp) // 客户端拿到缓存数据的时间戳
console.log(res.path) // 页面路径
console.log(res.query) // query 参数
console.log(res.scene) // 场景值
}
})
}
})
