Vue微信支付功能

微信网页开发/JS-SDK说明文档

概述

        微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。

        通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

        JSSDK使用步骤可以详细查看说明文档

微信支付

发起一个微信支付请求

wx.chooseWXPay({
  timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
  nonceStr: '', // 支付签名随机串，不长于 32 位
  package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
  signType: '', // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
  paySign: '', // 支付签名
  success: function (res) {
    // 支付成功后的回调函数
  }
});

1、首先请求接口，通过config接口注入权限验证配置

ps：接口封装

/**
 * SDK 可以在 index.html 引入 https://res.wx.qq.com/open/js/jweixin-1.6.0.js
 * 也可以下载下来本地引入JS 文件
 */
import wx from "@/utils/WeChat/jweixin-1.6.0";
/**
 * loadWeChatShare 是权限验证接口，需要根据自己的项目接口调整
 * export function loadWeChatShare(params) {
 *   return mGet("/mobile/wechat/share", params);
 * }
 */
import { loadWeChatShare } from "@/api/wechat";

/**
 * config 初始化
 * @param params {object} 其他参数
 * @param callback {function} 回调函数
 */
export function lWeChatConfig(params, callback) {
  loadWeChatShare({
    id: params.id,
    url: params.url || window.location.href.split("#")[0]
  }).then(res => {
    const { data } = res;

    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: data.appId, // 必填，公众号的唯一标识
      timestamp: data.timestamp, // 必填，生成签名的时间戳
      nonceStr: data.nonceStr, // 必填，生成签名的随机串
      signature: data.signature, // 必填，签名
      jsApiList: ["chooseWXPay"] // 必填，需要使用的JS接口列表
    });

    wx.ready(() => {
      if (callback) callback();
    });

    wx.error(err => {
      console.error("config fail:", err);
    });
  });
}

2、使用 wx.config 注册分享功能

/**
 * 微信支付
 * @param params {Object} config 参数
 * @param data {Object} 支付参数
 * @returns {Promise<unknown>}
 */
export function lWeChatPay(params, data) {
  return new Promise((resolve, reject) => {
    lWeChatConfig(params, () => {
      wx.chooseWXPay({
        timestamp: data.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
        nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
        package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
        signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
        paySign: data.paySign, // 支付签名
        success: function(res) {
          resolve(res);
        },
        fail: function(err) {
          reject(err);
        }
      });
    });
  });
}

3、在页面中调用分享

import { lWeChatPay } from "@/utils/WeChat/jwx";

/**
 * loadWxPay 是微信支付接口，需要根据自己的项目接口调整
 * export function loadWxPay(params) {
 *   return mGet("/mobile/wechat/pay", params);
 * }
 */
loadWxPay({
  oid: oid
}).then(e => {
  // 使用微信支付函数
  lWeChatPay({},{
    timestamp: e.timeStamp,
    nonceStr: e.nonceStr,
    package: e.package,
    signType: e.signType,
    paySign: e.paySign
  }).then(res=>{
    console.log(res);
  }).catch(err=>{
    console.log(err);
  });
});