微信小程序网络、支付、位置等

菜蛋_
683 阅读8分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

网络

使用前须知
  • 服务器域名配置：每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信。包括普通 HTTPS 请求（[wx.request]、上传文件（[wx.uploadFile]、下载文件（[wx.downloadFile] 和 WebSocket 通信（[wx.connectSocket]。

从基础库 2.4.0 开始，网络接口允许与局域网 IP 通信，但要注意 不允许与本机 IP 通信。

从 2.7.0 开始，提供了 UDP 通信（[wx.createUDPSocket]。

从 2.18.0 开始，提供了 TCP 连接（[wx.createTCPSocket]，只允许与同个局域网内的非本机 IP 以及配置过的服务器域名通信。

如使用[微信云托管]utm_source=wxdoc&utm_content=network)作为后端服务，则可无需配置通讯域名（在小程序内通过[callContainer]和[connectContainer]通过微信私有协议向云托管服务发起 HTTPS 调用和 WebSocket 通信）

配置流程

服务器域名请在 「小程序后台 - 开发 - 开发设置 - 服务器域名」 中进行配置，配置时需要注意：

  • 域名只支持 https ([wx.request]、[wx.uploadFile]、[wx.downloadFile] 和 wss ([wx.connectSocket]) 协议；
  • 域名不能使用 IP 地址（小程序的[局域网] IP 除外）或 localhost；
  • 可以配置端口，如 myserver.com:8080，但是配置后只能向 myserver.com:8080 发起请求。如果向 myserver.com、https://myserver.c… 等 URL 请求则会失败。
  • 如果不配置端口。如 myserver.com，那么请求的 URL 中也不能包含端口，甚至是默认的 443 端口也不可以。如果向 myserver.com:443 请求则会失败。
  • 域名必须经过 ICP 备案；
  • 出于安全考虑，api.weixin.qq.com 不能被配置为服务器域名，相关 API 也不能在小程序内调用。  开发者应将 AppSecret 保存到后台服务器中，通过服务器使用 getAccessToken 接口获取 access_token，并调用相关 API；
  • 不支持配置父域名，使用子域名

2. DNS预解析域名

微信客户端 iOS 8.0.24，Android 8.0.23）开始支持。

小程序一般会依赖一些网络请求（如逻辑层的wx.request、渲染层的图片等网络资源），优化请求速度将会提升用户体验，而网络请求耗时中就包括 DNS 解析。DNS预解析域名，是框架提供的一种在小程序启动时，提前解析业务域名的技术。

配置流程

DNS域名配置请求「小程序后台 - 开发 - 开发设置 - 服务器域名」 中进行配置，配置时需要注意：

  • 预解析域名无需填写协议头
  • 预解析域名最多可添加 5 个
  • 其他安全策略同服务器域名配置策略

3. 网络请求

超时时间

  • 默认超时时间和最大超时时间都是 60s；
  • 超时时间可以在 app.json 或 game.json 中通过 networktimeout 配置。

使用限制

  • 网络请求的 referer header 不可设置。其格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本；
  • [wx.request]、[wx.uploadFile]、[wx.downloadFile] 的最大并发限制是 10 个；
  • [wx.connectSocket]的最大并发限制是 5 个。
  • 小程序进入后台运行后，如果 5s 内网络请求没有结束，会回调错误信息 fail interrupted；在回到前台之前，网络请求接口调用都会无法调用

返回值编码

  • 建议服务器返回值使用 UTF-8 编码。对于非 UTF-8 编码，小程序会尝试进行转换，但是会有转换失败的可能。
  • 小程序会自动对 BOM 头进行过滤（只过滤一个 BOM 头）。

回调函数

  • 只要成功接收到服务器返回，无论 statusCode 是多少，都会进入 success 回调。请开发者根据业务逻辑对返回值进行判断。

4. 常见问题

HTTPS 证书

小程序必须使用 HTTPS/WSS 发起网络请求。请求时系统会对服务器域名使用的 HTTPS 证书进行校验，如果校验失败，则请求不能成功发起。由于系统限制，不同平台对于证书要求的严格程度不同。为了保证小程序的兼容性，建议开发者按照最高标准进行证书配置，并使用相关工具检查现有证书是否符合要求。
对证书要求如下：

  • HTTPS 证书必须有效；

    • 证书必须被系统信任，即根证书被已系统内置
    • 部署 SSL 证书的网站域名必须与证书颁发的域名一致
    • 证书必须在有效期内
    • 证书的信任链必需完整（需要服务器配置）

  • iOS 不支持自签名证书;

  • iOS 下证书必须满足苹果 [App Transport Security (ATS)] 的要求;

  • TLS 必须支持 1.2 及以上版本。部分旧 Android 机型还未支持 TLS 1.2，请确保 HTTPS 服务器的 TLS 版本支持 1.2 及以下版本;

  • 部分 CA 可能不被操作系统信任，请开发者在选择证书时注意小程序和各系统的相关通告。

    • [Chrome 56/57 内核对 WoSign、StartCom 证书限制周知]

除了网络请求 API 外，小程序中其他 HTTPS 请求如果出现异常，也请按上述流程进行检查。如 https 的图片无法加载、音视频无法播放等。

跳过域名校验

在微信开发者工具中，可以临时开启 开发环境不校验请求域名、TLS版本及 HTTPS 证书 选项，跳过服务器域名的校验。此时，在微信开发者工具中及手机开启调试模式时，不会进行服务器域名的校验。

在服务器域名配置成功后，建议开发者关闭此选项进行开发，并在各平台下进行测试，以确认服务器域名配置正确。

如果手机上出现 “打开调试模式可以发出请求，关闭调试模式无法发出请求” 的现象，请确认是否跳过了域名校验，并确认服务器域名和证书配置是否正确。

发送请求

wx.request

发起HTTP网络请求。

image.png

image.png

image.png

image.png

image.png

image.png

image.png
返回值：RequestTask

RequestTask

网络请求任务对象（一定要在小程序后台设置好服务器域名）

image.png
示例代码：

image.png

WebSocket

wx.connectSocket

推荐使用SocketTask的方式去管理webSocket连接，每一条链路的生命周期都更加可控，同时存在多个webSocket的链接的情况下使用wx前缀的方法可能会带来一些和预期不一致的情况。
功能创建一个webSocket连接。

image.png

  • 返回值：SocketTask
SocketTask
  • SocketTask.close:关闭 WebSocket 连接

image.png

  • SocketTask.onClose(function listener):监听 WebSocket 连接关闭事件

image.png

支付

需要申请微信支付。（需要注册微信商户等（有费用））

# wx.requestPluginPayment(Object object)

插件中发起支付

image.png

Tip
  1. tip: 小程序与插件绑定在同一个 open 平台账号上且小程序与插件均为 open 账号的同主体/关联主体时，调用此接口将直接拉起支付收银台。
  2. tip: 这个接口本身可以在开发者工具中使用，但功能页的跳转目前不支持在开发者工具中调试，请在真机上测试。
  3. tip: 跳转支付功能页需要在 app.json 中配置 "functionalPages": true
    示例代码：

image.png

# wx.requestPayment(Object object)

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

image.png
示例代码：

image.png

位置

wx.stopLocationUpdate(Object object)

关闭监听实时位置变化，前后台都停止消息接收

image.png

wx.startLocationUpdateBackground(Object object)

开启小程序进入前后台时均接收位置消息，需引导用户开启[授权]授权以后，小程序在运行中或进入后台均可接受位置消息变化

wx.startLocationUpdate(Object object)

开启小程序进入前台时接收位置消息（需要先通过类目审核，自2022年7月14日后发布的小程序，若使用该接口，需要在app.json中进行声明，否则将无法正常使用该接口，2022年7月14日前发布的小程序不受影响）

image.png

wx.openLocation(Object Object)

使用微信内置地图查看位置

image.png
代码示例：

image.png

wx.getLocation(Object object)

功能描述

获取当前的地理位置、速度。当用户离开小程序后，此接口无法调用。开启高精度定位，接口耗时会增加，可指定 highAccuracyExpireTime 作为超时时间。地图相关使用的坐标格式应为 gcj02。 高频率调用会导致耗电，如有需要可使用持续定位接口 wx.onLocationChange。 基础库 2.17.0 版本起 wx.getLocation 增加调用频率限制

使用方法

自 2022 年 7 月 14 日后发布的小程序，若使用该接口，需要在 app.json 中进行声明，否则将无法正常使用该接口，2022年7月14日前发布的小程序不受影响（需要申请开通，只针对一些类型的小程序开放）

image.png

image.png
示例代码：

image.png

avatar
文章
阅读
粉丝