微信在手机浏览器的支付方式

2020-12-14 loading

早前开发的微信支付功能，突然遇到一个bug——在微信浏览器内，无法唤起wxPay功能，但是在手机端的其他浏览器可以~

# bug表现

现在页面提示——请在微信外打开订单，进行支付；在微信外打开后提示——商家参数有误，请联系商家解决；

# 查找原因

在微信官网搜索后，得知——在微信外的浏览器唤起wxPay的方式是H5,在微信内的浏览器唤起wxPay需要是要JSAPI的方式

参考链接——微信支付开发文档

# JSAPI

参考链接——JSAPI调起支付——package字段的格式prepay_id=***

注意事项——调用下单api时的重点——JSAPI方式时，必传openid

以上配置不满足，会报——非法场景

# 获取openid

本次只获取openid，所以使用用户无感知的方式进行，示例代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>测试网页获取openid</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js" language="javascript"></script>
  <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/0.4.3/weui.min.css" />
  <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
</head>

<body>

  <script>
    function GetQueryValue(queryName) {
        var query = decodeURI(window.location.search.substring(1));
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == queryName) { return pair[1]; }
        }
        return null;
    }

    $(function () {
      //获取微信授权code
      var access_code = GetQueryValue('code');

      if (!access_code) {
        //fromurl 需要urlencode编码处理
        var fromurl = location.href;
        var appid = 'wx8dbf6f625b6b9a9c' || 'wx583273348c2d3cd9' || 'wx206139da8d6035c2'
        var url =
          `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(fromurl)}&response_type=code&scope=snsapi_base#wechat_redirect`
        //打开微信授权页面
        var urlInfo =
          `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(fromurl)}&response_type=code&scope=snsapi_userinfo#wechat_redirect`
        location.href = url;
      } else {
        const SECRET = ''
        $.ajax({
          type: 'get',
          //url会拿到微信给的授权code，有授权code就可以获得用户信息，
          url: `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appid}&secret=${SECRET}&code=${access_code}&grant_type=authorization_code`,
          data: {
            code: access_code,
            wxhref: location.href
          },
          dataType: 'jsonp',
          jsonpCallback: 'wxinfo',
          success: function (req) {
            //接口返回的数据
            console.log(req);
          }
        });
      }

    });
  </script>
</body>


</html>

: 支付宝打赏

: 微信打赏