vue3 实现微信内 h5 拉起支付

官方的文档来看，前端要实现微信内支付，首先咱们要获取到微信授权的 code 给后端同事去对接微信 api获取到用户的 openId，也就是每个用户的唯一 id

1. 首选我们获取 code 前，需要去微信公众平台配置下当前授权域名，准备基础的配置
微信公众平台
下面的JS 接口安全域名跟网页授权域名是要安装文档流程必配置的，不可缺

注意配置的域名要跟前端后续部署到线上服务器代理的域名要一致

2.接下来，我们要去下载weixin-jsapi模块

npm isntall weixin-jsapi
或者
yarn add weixin-jsapi

好了，基本配置都差不多了，我们进入 code 获取步骤吧
。。。。。。。。。。。。。

以下代码只展示部分 mounted 执行代码

我在这讲解下以下authUrl每个参数作用，下面也会有说明，觉得繁琐可忽略

1. appid=${appId}:
   • appId，标识你的微信公众平台应用。
   • 必须在微信公众平台的开发配置中注册。
2. redirect_uri=${redirectUri}:
   • 回调地址，当用户授权完成后，微信会将用户重定向到这个地址。
   • 必须经过 URL 编码（encodeURIComponent）。
   • 例如，http://example.com 会被编码为 http%3A%2F%2Fexample.com。
3. response_type=code:
   • 指定微信返回的授权类型，这里是 code。
   • 授权成功后，微信会在回调地址中附带 code 参数。
4. scope=${scope}:
   • 授权的范围，有两种可选值：
   • snsapi_base：不弹出授权页面，直接获取用户的 openid。
   • snsapi_userinfo：弹出授权页面，获取用户的详细信息（如昵称、头像）
5. state=${state}:
   • 开发者自定义的参数，用于传递状态信息（如当前页面的哈希路由）
   • 原样返回到回调地址中，防止 CSRF 攻击。
6. #wechat_redirect:
   • 固定值，表示这是微信的授权页面。

const appId = "微信 AppID"; // 这里是服务号或者公众号的唯一ID，去公众平台去查看
const redirectUri = encodeURIComponent(window.location.origin); // 回调地址，获取到 code 之后重定向的 URL
/**
用 snsapi_base 时不会弹出授权页面，仅返回 openid。使用 snsapi_userinfo 可以获取用户详细信息，但会弹出授权页面。
*/
const scope = "snsapi_userinfo"; // 这里我们使用 snsapi-userinfo，你也可以按需使用snsapi_base

const code = ref(null); // 保存 code
const openid = ref(null); // 保存 openid

const redirectToWeChatAuth=()=> {
  const state = encodeURIComponent(
    JSON.stringify({ hash: window.location.hash })
  );   // state 将保存当前页面的哈希信息，并以 URL 安全的格式传递到微信服务器
  const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
// 这里就是授权了，如果配置没有问题，这一步就能获取到code，并且会并拼接到上面的redirectUri也就是你当前的回调地址，比如 https://www.baidu.com?code=xxxxxx
  window.location.href = authUrl; 
}

到这里我们就能获取到 code 了。当然，他现在是在 url 上面的，我们要将 code 获取下来

//获取当前链接上面参数的方法
const getQueryParam = param => {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(param); // 如果参数不存在，将返回 null
};

code.value = getQueryParam("code") //得到 code 的参数值

//下面就需要后端配置了，我们将 code 提交到后端，后端那边就通过 code 去获取到每个用户的 openid

    if (code.value) {
      // 先判断，如果 URL 中有 code，调用接口
      //getOpenid 就是后端提供的接口，我们将 code参数提交给他
      getOpenid(code.value).then(res => { 
        if (res.code == 200) {
          openid.value = res.msg; //已经成功获取到了 openid
          localStorage.setItem("openid", res.msg); //我们先将 openid 保存到本地
          localStorage.setItem("code", code.value); //以确保稳定性，也可以将 code 保存到本地
          console.log("openid 已保存:", openid.value);
        } else {
          //这个方法别忘了是上面获取 code 的方法
          //这里是为了防止我们获取 code 的时候错误导致无法将参数值传递给后端，我们就去循环获取 code，确保 code 不会获取失败， openid 才能正常获取
          //openid 很重要，也是我们支付不可缺失的一部分
          redirectToWeChatAuth();
          console.error("获取 openid 失败:", res.msg);
        }
      });
    } else {
      // 如果没有 code，跳转到微信授权页面，同上
      // 对了，code 是只能用一次就会失效，所以我们这种做法也是为了防止他失效
      redirectToWeChatAuth();
    }

我们有了 openid，现在要考虑订单问题，要把商品的价格和信息根据后端的要求提交给他
后端获取到订单信息后，也就是商品信息，就会通过我们提供的 openid 去对接微信支付，
并返回我们以下所需要的微信内支付拉起配置

下面我做个前端传递参数示例

import wx from "weixin-jsapi"; //导入 wx模块

submitOrder({
  prise:10， //价格
  payType: "WECHAT",//表示是微信支付标识
  title: "支付商品标题",
  description: "支付商品描述",
  openid: localStorage.getItem("openid") || "", //这里我们就将 openid传给后端，必填
}).then(res=>{
  if (res.code == 200) {
  		//进来了，说明后端已经可以给我们返回拉起支付所需的参数了
		 wx.config({
            debug: false, // 这里一般在测试阶段先用ture，等打包给后台的时候就改回false,
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.paySign, // 必填，签名
            jsApiList: ["chooseWXPay", "checkJsApi"] // 必填，需要使用的JS接口列表
          });

          wx.ready(() => {
            wx.chooseWXPay({
              appId: res.data.appId,// 必填，公众号的唯一标识
              timestamp: res.data.timestamp,// 必填，生成签名的时间戳
              nonceStr: res.data.nonceStr,// 必填，生成签名的随机串
              package: res.data.packageVal,// 统一支付接口返回的prepay_id参数值，提交格式如:prepay_id=|*|*|*)
              signType: res.data.signType,// 签名方式，根据后端返回就行，一般默认为'SHA1'，使用新版支付需传入'MD5'
              paySign: res.data.paySign, // 必填，支付签名
              success: function (payRes) {
                // 支付成功后的回调函数
                showToast("支付成功");
              },
              cancel: function (payRes) {
                // that.$message.error('取消支付')
                showToast("取消支付");
              },
              fail: function (payRes) {
                // that.$message.error('支付失败')
                showToast("支付失败");
              }
            });
          });
	}
))

好了，微信内 H5 支付差不多就是这么个步骤，嘻嘻😁