vue项目微信支付

微信支付函数

以下是使用 JavaScript 封装微信支付函数的示例代码(仅h5和jsapi支付)：

/**

• 微信支付函数
• @param {Object} params - 支付参数
• @param {string} params.appId - 应用ID
• @param {string} params.timeStamp - 时间戳
• @param {string} params.nonceStr - 随机字符串
• @param {string} params.package - 订单详情扩展字符串
• @param {string} params.signType - 签名方式，默认为MD5
• @param {string} params.paySign - 签名
• @param {string} params.type - 支付类型，jsapi为公众号支付，h5为H5支付
• @param {function} successCallback - 成功回调函数
• @param {function} errorCallback - 失败回调函数
  */
  function wxPay(params, successCallback, errorCallback) {
  if (params.type === ‘jsapi’) {
  WeixinJSBridge.invoke(‘getBrandWCPayRequest’, {
  “appId”: params.appId, //公众号名称，由商户传入
  “timeStamp”: params.timeStamp, //时间戳，自1970年以来的秒数
  “nonceStr”: params.nonceStr, //随机串
  “package”: params.package,
  “signType”: params.signType || “MD5”, //微信签名方式：
  “paySign”: params.paySign //微信签名
  }, function(res) {
  if (res.err_msg == “get_brand_wcpay_request:ok”) {
  successCallback && successCallback();
  } else {
  errorCallback && errorCallback();
  }
  });
  } else if (params.type === ‘h5’) {
  location.href = params.mwebUrl;
  } else {
  console.error(‘不支持的支付类型’);
  }
  }
  以上代码中，参数 params 需要包含微信支付所需的所有字段，分别为：应用 ID、时间戳、随机字符串、订单详情扩展字符串、签名方式、签名。其中，type 字段用于判断当前支付类型，jsapi 为公众号支付，h5 为 H5 支付。当 type 字段为 jsapi 时，会调用 WeixinJSBridge.invoke() 函数进行支付，当 type 字段为 h5 时，会直接跳转到支付页面。

该支付函数可以通过回调函数来处理支付成功或失败的情况，增强了函数的可重用性和可扩展性。

WeixinJSBridge 验证

在微信内置浏览器中，WeixinJSBridge 对象是微信公众平台为开发者提供的一个 JavaScript 接口，用于实现与微信客户端的交互。因此，在使用 WeixinJSBridge 之前，需要先检查是否存在该对象。通常情况下，可以通过如下方式引入 WeixinJSBridge：

if (typeof WeixinJSBridge === “undefined”) {
if (document.addEventListener) {
document.addEventListener(‘WeixinJSBridgeReady’, onBridgeReady, false);
} else if (document.attachEvent) {
document.attachEvent(‘WeixinJSBridgeReady’, onBridgeReady);
document.attachEvent(‘onWeixinJSBridgeReady’, onBridgeReady);
}
} else {
onBridgeReady();
}
以上代码会检查当前环境是否包含 WeixinJSBridge 对象，如果不存在，则监听 WeixinJSBridgeReady 事件，等待 WeixinJSBridge 对象初始化完成后再执行相关操作。如果已经存在 WeixinJSBridge 对象，则直接执行相关操作。

需要注意的是，由于微信公众平台并未对 WeixinJSBridge 的具体使用方式做出官方规范或文档，因此在使用 WeixinJSBridge 时可能需要根据具体情况进行一定的调整和优化。

onBridgeReady

在微信内置浏览器中，如果页面使用了 WeixinJSBridge 对象，为了确保该对象已经初始化完成并可以正常使用，常常需要在 WeixinJSBridgeReady 事件触发后再执行相关操作，因此通常会定义一个相应的回调函数 onBridgeReady()，用于监听 WeixinJSBridgeReady 事件并在事件触发后执行相关代码。

例如，在上一个问题中，如果当前环境不存在 WeixinJSBridge 对象，会通过监听 WeixinJSBridgeReady 事件来等待 WeixinJSBridge 对象初始化完成。此时需要在 onBridgeReady() 函数中编写相关代码，用于实现具体的支付逻辑。示例代码如下：

function onBridgeReady() {
// 在这里编写相关代码
wxPay(params, function() {
console.log(‘支付成功’);
}, function() {
console.log(‘支付失败’);
});
}
以上代码中，onBridgeReady() 函数将接收到一个 params 参数，该参数包含了微信支付所需的所有字段。在函数内部，会调用之前定义的 wxPay() 函数进行支付，并传入相应的成功和失败回调函数。当 WeixinJSBridgeReady 事件触发时，onBridgeReady() 函数会被自动调用，从而实现微信支付功能。