前端微信H5支付，支付宝内及第三方H5支付，各平台分享总结

发表于 分类于
本文字数： 8.7k 阅读时长 ≈ 8 分钟

微信支付

微信内 H5 支付（公众号支付）

走统一引入 JSSDK 的新方式实现支付逻辑。

  • JSSDK 文档 地址
  • 网页授权(获取 access_token 和 openid) 文档 地址
  • 统一下单 文档 地址
  • 微信内 H5 调起支付 文档 地址

明确两种 access_token

  • 网页授权 access_token：基于 Oauth 2.0，需要 code 换取，用于维持登录状态。
  • 普通 access_token：后台可直接生成，换取 jsapi_ticket 进而加密生成 signature 作为 wx.config 参数。

整个流程

支付统一下单接口需要 openid，所以必须要授权获取。因为此处只需要 openid，所以 snsapi_base 为 scope 走静默授权。(为了方便起见，此处每次进入都获取 code 走静默授权。)

  1. 进入页面判断链接上是否有 code，没有则请求接口得到 url 并重定向：

    1
    2
    3
    4
    {
      url: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx1232123123&redirect_uri=带参数(包括锚点)的编码后的重定向的回调地址&response_type=code&scope=snsapi_base&connect_redirect=1&state=xxxx#wechat_redirect';
    }
    // connect_redirect=1 表示只只触发一次请求

  2. 微信内部多次重定向之后，最后带上 code 和 state 301 重定向回设置的回调地址：

    1
    301: https://www.flqin.com/test.html?id=135price=1322&code=ASDJIAJD13D823D&state=13212313#/

  3. 前端判断到链接有 code，将 code 及一些其他页面需要的参数一起传给后端，后端拿到 code 换取网页授权 access_token 和 openid，此处后端可将 access_token/refresh_token 存入 cookie 或者通过其他方式 jwt 维持登录状态，就无需重复获取 code。

  4. openid 为统一下单 jsapi 接口必传参数，用于得到 prepay_id 参数值，即为 package 参数。最后接口统一返回 wx.confg 和 wx.chooseWXPay 所需参数，前端调用 JSSDK 即可。

  5. wx.chooseWXPay 的成功、完成回调仅代表支付完成，

代码演示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
async queryWxCode() {
  //...
  if (!code) {
    const { data } = await api.wxToPay({url:'当前页面完整链接'}).catch((e) => e); //获取重定向链接（微信授权地址）
    data && (window.location.href = data);
    return;
  }
  return api.wxPay({code,url:'当前页面包含参数的url'});  //获得wx.config、wx.choosepay全部参数
},
async registerWx() {
  const { data } = await this.queryWxCode().catch((e) => {});
  this.wxSdkInfo = data;
  wx.config({
    debug: false, // 开启调试模式
    appId: data.appId, // 必填，公众号的唯一标识
    timestamp: data.timeStamp, // 必填，生成签名的时间戳
    nonceStr: data.nonceStr, // 必填，生成签名的随机串
    signature: data.signature, // 必填，签名 通过普通access_token生成，无需授权
    jsApiList: ['chooseWXPay', 'hideMenuItems'] // 必填，需要使用的JS接口列表
  });
  wx.ready(() => {
    this.hideWxMenus();
    this.createWxpay();
  });
},
hideWxMenus() {
  // 禁用支付分享, 防止订单未生成而进入该页面导致的报错
  const menuList = ['menuItem:share:appMessage', 'menuItem:share:timeline', 'menuItem:copyUrl'];
  wx.hideMenuItems({
    menuList // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
  });
},
createWxpay() {
  const data = this.wxSdkInfo;
  wx.chooseWXPay({
    timestamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
    nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
    package: `prepay_id=${data.prepayId}`, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*） 该参数需要openid
    signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
    paySign: data.paySign, // 支付签名 参与签名的参数为：appId、timeStamp、nonceStr、package、signType
    success: this.queryPayment, //公共查询结果接口
    fail: this.showFail, //失败处理
    cancel: this.showRefail, //取消处理
    complete({ errMsg }) {
      const SUCCESS = /:ok/gi.test(errMsg);
      const CANCEL = /:cancel/gi.test(errMsg);
      if (SUCCESS) this.queryPayment();
      else if (CANCEL) this.showRefail();
      else this.showFail();
    }
  });
},

支付宝支付

支付宝内 H5 支付

必须接入支付宝 JSAPI。

  • H5 开发文档 地址
  • Alipay JSSDK 地址
  • 支付文档 地址

注意点：

  • 不涉及读取用户优惠券之类的都走普通无单号支付，即无需授权。
  • 授权过程与微信大致一致。

代码演示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
async registerAlipay() {
  const alipayInit = async () => {
    await this.queryAliOrder().catch((e) => e);
    this.createAlipay();
  };
  if (window.AlipayJSBridge) alipayInit();
  else document.addEventListener('AlipayJSBridgeReady', alipayInit, false);
},
async queryAliOrder() {
  // 无单号支付
  const {data: orderStr } = await api.aliPayH5({orderId:1}).catch((e) => e);//请求接口获取 orderStr
},
async queryAliCode() {
  // 有单号支付tradeNo(后台开通当面付)，同微信授权流程
  const { href, search } = window.location;
  const query = search && search.replace(/[?\/]/g, '');
  const { auth_code: code } = qs.parse(query);
  if (!code) {
    const { data } = await api.aliToPay(href).catch((e) => e); //请求接口获取支付宝授权地址
    data && (window.location.href = data);
    return;
  }
  const {data: tradeNO }  = await api.aliPayH5({orderId:1,code}).catch((e) => e); //请求接口获取 tradeNO
},
async createAlipay() {
  AlipayJSBridge.call('tradePay', { 'orderStr/tradeNO' }, ({ resultCode }) => {
    const SUCCESS_CODES = ['9000', '8000', '6004'];
    const UNKNOW_CODES = ['7001', '6001', '6002'];
    if (~SUCCESS_CODES.indexOf(resultCode)) _this.queryPayment(); //支付查询
    else if (~UNKNOW_CODES.indexOf(resultCode)) _this.showRefail();
    else _this.showFail();
  });
},

第三方浏览器中 支付宝支付

  • 支付文档 地址
  • 参数说明 地址

无需授权，直接将 url 和订单号传给后端，后端返回一个 form 表单添加到页面即可唤起支付宝 APP，支付完成后，根据后端配置支付宝会自动回跳到支付结果页并携带一堆参数。此时需要查询公共结果接口来确定支付是否成功。

注意点：

  • 通过链接上是否有参数 alipay.trade.wap.pay.return 来判断是否是支付回调回来的页面。

代码演示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
registerH5() {
  const { origin, pathname, search } = window.location;
  const { method } = qs.parse(search.replace(/[?\/]/g, ''));
  if (method === 'alipay.trade.wap.pay.return') {
    this.queryPayment(); //执行公共查询结果接口
    return;
  }
  const { data: form } = await api.aliPayH5(orderId,url).catch((e) => e); //请求接口返回form表单
  if (!form) return;
  const div = document.createElement('div');
  div.innerHTML = form;
  document.body.appendChild(div);
  document.forms[0].submit();
}

公共查询结果 queryPayment

需要轮询支付结果。

代码演示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
async queryPayment() {
  const TIMES_REACH = 0;
  const TIMES_MAX = 5;
  const SUCCESS_CODE = '1'; // 0待支付,需要继续查询 1支付成功  -1异常
  const WAITING_CODE = '0';
  if (this.qTimes === TIMES_REACH) { //qTimes为最大查询次数
    this.qTimes = TIMES_MAX;
    return;
  }
  const { data } = await api.payStatus(orderId).catch((e) => e); // 查询支付结果
  if (data == SUCCESS_CODE) { //成功状态
    this.showSuccess();
    this.qTimes = TIMES_MAX;
  } else if (data == WAITING_CODE) { //等待状态
    console.log('查询支付结果中...');
    clearTimeout(this.timer);
    this.timer = setTimeout(async () => {
      await this.queryPayment(); //递归轮询
      this.qTimes -= 1;
    }, 1000);
  } else {
    this.showFail();
  }
},

支付总结

  • 微信支付宝均需要配置合法域名，可精确到文件夹路径。
  • 开发可用微信开发工具，结合 alert 调试，直接把代码发到已配置好域名的测试环境测试最佳。
  • 注意参数的大小写及传递的内容，支付主要复杂度都集中在后端，前端需要配合后端传参。

分享

微信- > 微信（微信联系人，微信朋友圈，QQ 联系人，QQ 空间）

必须引入 JSSDK，否则分享出来无法设置分享描述及分享图片。

  • JSSDK 文档：地址
  • 获取普通 access_token 文档：地址

需要给后端传入带有参数的当前页面 url（无需编码），让后端返回 wx.config 所需参数即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const { data } = await api.getWxConfig({ url: '当前页面包含参数的url' }); //接口返回 appId，timeStamp，nonceStr，signature.
wx.config({
  debug: true,
  appId: data.appId, // 必填，公众号的唯一标识
  timestamp: data.timeStamp, // 必填，生成签名的时间戳
  nonceStr: data.nonceStr, // 必填，生成签名的随机串
  signature: data.signature, // 必填，签名
  jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone'], // 必填，需要使用的JS接口列表
});
wx.ready(() => {
  const shareList = ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone'];
  shareList.forEach((item) => {
    wx[item]({
      title: this.shareInfo.title, // 分享标题
      desc: this.shareInfo.description, // 分享描述
      link: window.location.href,
      imgUrl: this.shareInfo.image, // 分享图标
      success: function () {
        // 设置成功
      },
    });
  });
});

注意点：

  • 首先需要在微信后台设置接口安全域名：www.xxxx.com，无需到具体路径及参数。
  • 前端仅需传给后台当前页面带参数的 url 即可，甚至接口可以自己取请求页面带参数的 url，前端无需传。
  • 注意 timeStamp 的大小写。
  • 注意 jsApiList 选择即将废弃的分享接口，新分享接口反而不好用。
  • 分享无需授权，因：参数 nonceStr <- jsapi_ticket <- access_token <- appid,secret。此 access_token 为普通 access_token，appid 和 secret 均在微信后台获取。区别于支付等网页授权 access_token。

QQ(TIM) -> QQ（QQ 联系人，QQ 空间，微信联系人，微信朋友圈）

需要引入 api：

1
<script src="//open.mobile.qq.com/sdk/qqapi.js"></script>

js 执行：

1
2
3
4
5
6
7
const share = {
  title: '分享标题，最大45字节',
  desc: '分享内容，最大60字节',
  image_url: '图片URL，最小需要200 * 200',
  share_url: '分享链接与页面URL同',
};
mqq.data.setShareInfo(share, callback);

另 mqq.ui.showShareMenu(); 可直接唤起 QQ 分享面板。

支付宝 -> 支付宝（朋友动态，联系人）

直接按如下设置 meta 即可：

1
2
3
4
<meta name="Alipay:title" content="分享标题" />
<meta name="Alipay:imgUrl" content="分享图片url" />
<meta name="Alipay:desc" content="分享描述" />
<meta name="Alipay:link" content="分享链接" />

微博，头条，知乎等其他平台浏览器 -> 微信，QQ

微博可注册轻应用使用 JS-SDK 完成分享设置。收益不大就没做了。
知乎实测 IOS 可以取写死的描述及动态标题，图片无法设置，安卓只能设置标题。

对于其他平台分享，统一兜底处理方式：

分享标题及描述设置 head 元素：

1
2
3
4
<head>
  <title>分享标题</title>
  <meta name="description" content="分享描述" />
</head>

分享图及描述设置(一般默认取页面第一张大于 300px 图及第一段描述)：

1
2
3
4
5
6
<body>
  <div style="display: none;">
    <p>分享描述</p>
    <img src="图片地址url" />
  </div>
</body>

使用 ogp：

1
2
3
4
5
6
7
<head>
    <meta property="og:type" content="website">
    <meta property="og:title" content="分享标题">
    <meta property="og:description" content="分享描述">
    <meta property="og:img" content="完整的分享图片链接">
    <meta property="og:url" content="完整的分享页面地址">
</head>