微信授权及支付

微信授权（获取 code）

h5 授权

• 在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名，域名不需要加 http
• 判断路由参数中是否有 code，没有则跳转授权页面，页面路由open.weixin.qq.com/connect/oau…。其中 Appid 和 redirect_uri 需要根据项目填写
• 用户同意授权后跳转至 redirect_uri 指定页面，路由中会有 code 参数。

pc 端内嵌扫码授权

• 同 h5 授权，也需要在公众平台设置回调域名
• 在 index.html 中引入res.wx.qq.com/connect/zh_…
• 在需要使用微信登录的地方实例以下 JS 对象：

const obj = new WxLogin({
  self_redirect: false, // 设置为true表示在iframe中跳转至redirect_uri
  id: "login_container", // 二维码容器id
  appid: "", // 应用标识
  scope: "snsapi_login", // 这里填snsapi_login
  redirect_uri: "", // 回调地址
  state: "",
  style: "",
  href: ""
});

pc 跳转页面扫码授权

• 配置回调域名
• 授权页面链接open.weixin.qq.com/connect/qrc…。其中 Appid 和 redirect_uri 需要根据项目填写，redirect_uri 需要使用 urlEncode 进行处理

小程序授权

• 授权窗口的弹出必须由用户点击按钮来触发
• 按钮代码<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" />，如果用户同意授权，通过 bindGetUserInfo 中的参数 e 可以获取用户相关信息

微信公众号支付（包括在微信内的 h5）

有 2 种方式，JSSDK 和 JSAPI（微信内置对象 WeixinJSBridge），推荐使用微信浏览器内置对象 WeixinJSBridge 来进行支付。

• JSAPI，微信浏览器内置对象 WeixinJSBridge（推荐使用）

function onBridgeReady() {
  // data为后台返参数据
  window.WeixinJSBridge.invoke(
    "getBrandWCPayRequest",
    {
      appId: data.appId, // 公众号的唯一标识
      timeStamp: data.timeStamp, // 生成签名的时间戳
      nonceStr: data.nonceStr, // 生成签名的随机串
      package: data.packageValue, // 统一支付接口返回的prepay_id参数值
      signType: data.signType, // 签名方式
      paySign: data.sign // 支付签名
    },
    function(response) {
      if (
        response.err_msg === "get_brand_wcpay_request：ok" ||
        response.err_msg.search("ok") !== -1
      ) {
        // 支付成功的回调
      } else {
        // 支付失败的回调
      }
    }
  );
}
if (typeof window.WeixinJSBridge == "undefined") {
  if (document.addEventListener) {
    document.addEventListener("WeixinJSBridgeReady", onBridgeReady, false);
  } else if (document.attachEvent) {
    document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
    document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
  }
} else {
  onBridgeReady();
}

• JSSDK

• 首先需要引入 js 文件

<script
  type="text/javascript"
  src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"
></script>

• 其次需要使用微信的 config 接口注入权限验证配置，代码如下:

wx.config({
  debug: true, // 开启调试模式
  appId: appId, // 公众号的唯一标识
  timestamp: timestamp, // 生成签名的时间戳
  nonceStr: nonceStr, // 生成签名的随机串
  signature: signature, // 签名
  jsApiList: ["chooseWXPay"] // 填入需要使用的JS接口列表，这里只需要用到支付的JS接口
});

• 验证成功后再调用支付

wx.chooseWXPay({
  timestamp: timestamp, // 支付签名时间戳
  nonceStr: nonceStr, // 支付签名随机串，不长于 32 位
  package: package, // 统一支付接口返回的prepay_id参数值
  signType: signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
  paySign: paySign, // 支付签名
  success: function(res) {}
});

---

微信 h5 支付（在微信浏览器外的浏览器内支付）

功能主要由后台来实现，后台会返回一个链接，前台只需调用接口即可，成功和失败的回调由后端进行配置

---

小程序支付

wx.requestPayment({
  timeStamp: "", // 支付签名时间戳
  nonceStr: "", // 支付签名随机串，不长于 32 位
  package: "", // 统一支付接口返回的prepay_id参数值
  signType: "MD5", // 默认为MD5
  paySign: "", // 支付签名
  success(res) {}, // 成功回调
  fail(res) {}, // 失败回调
  complete(res) {} // 结束回调
});

---

支付宝支付

接口会返回一个 form 表单类似下图所示，前端只需提交这个表单即可，成功和失败的回调由后端进行配置

• 方法一：

window.document.write(payRes); //payRes即为form表单

• 方法二：

const div = document.createElement("div"); // 创建div
div.innerHTML = payRes; // 将返回的form 放入div
document.body.appendChild(div);
document.forms[0].submit();

---

---

注意事项

• 微信 h5 支付和公众号支付均需要在公众平台开通支付功能

• 配置公众号支付路由时，需要将一个认证文件放到项目根目录的 public 文件夹中，认证文件由产品提供

• 只需将正式服和测试服域名进行配置，以/结尾，不需要单独将要支付的页面路由进行单独配置，如下图所示即可