第三方与网站交互

发表于 更新于 分类于 本文字数： 2.4k 阅读时长 ≈ 2 分钟

1.微信授权登录(拿到用户微信信息)

详见
首先判断微信环境：

1
2
3
4
5
6
let ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger' || ua.match(/_SQ_/i) == '_sq_') {
    return true;
} else {
    return false;
}

其次带参跳转微信授权链接:

1
2
3
4
5
6
7
8
9
10
11
12
let redirect_uri = encodeURIComponent(decodeURI(location.href)); //授权后重定向的回调链接地址， 请使用 urlEncode 对链接进行处理
let appid = "XXXXXX";//公众号的唯一标识
let component_appid = "wx8c50eedcc9a785a1";
let wxauth =
"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
appid +
"&redirect_uri=" +
redirect_uri +
"&response_type=code&scope=snsapi_userinfo&state=STATE&component_appid=" +
component_appid +
"#wechat_redirect";
window.location.href = wxauth;

参数说明：
参数 是否必须 说明
appid 是 公众号的唯一标识
redirect_uri 是 授权后重定向的回调链接地址， 请使用 urlEncode 对链接进行处理
response_type 是 返回类型，请填写code
scope 是 应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）
state 否 重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节
#wechat_redirect 是 无论直接打开还是做页面302重定向时候，必须带此参数

2.微信支付

1> 微信外网页中发起微信支付：
详情见微信外h5支付官文

回调页面
正常流程用户支付完成后会返回至发起支付的页面，如需返回至指定页面，则可以在MWEB_URL后拼接上redirect_url参数，来指定回调页面。
如，您希望用户支付完成后跳转至https://www.wechatpay.com.cn，则可以做如下处理：

1
2
假设您通过统一下单接口获到的MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096
则拼接后的地址为MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096&redirect_url=https%3A%2F%2Fwww.wechatpay.com.cn

注意：
1.需对redirect_url进行urlencode处理

2> 微信内网页发起微信支付：
详情见微信内h5支付官文
首先判断微信环境：

1
2
3
4
5
6
let ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger' || ua.match(/_SQ_/i) == '_sq_') {
    return true;
} else {
    return false;
}

其次

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
WeixinJSBridge.invoke(
  "getBrandWCPayRequest",
  {
    appId: res.app_id, //公众号名称，由商户传入
    timeStamp: res.time_stamp, //时间戳，自1970年以来的秒数
    nonceStr: res.nonce_str, //随机串
    package: res.package,
    signType: "MD5", //微信签名方式：
    paySign: res.pay_sign //微信签名
  },
  (res) => {
    if (res.err_msg == "get_brand_wcpay_request:ok") {
      // 使用以上方式判断前端返回,微信团队郑重提示：
      //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
      setTimeout(() => {
        that.$router.push("/userCenter" + location.search);
      }, 1000);
    }
  }
);