JSAPI支付

接JSAPI，首先你要有一个已认证的服务号。

公众号管理员启用密钥，把它给后端开发人员，通过接口返回给前端。AppID前后端都需要。

可以看一下有哪些接口权限。

设置一下网页授权域名。注意是域名，不是URL，不加http或者https。

比如我是将文件放在我项目代码（前端）的public目录下（即域名根目录），并且可以访问：

网页授权流程：

官方文档：微信网页开发 / 网页授权

【说明：以下内容是临时记录的，可能有点乱，但大致流程就是那样】

假如，用户点击你页面上的支付按钮时需要先获取用户的信息，那么你需要在在点击事件里添加授权方法：

const appId = 'your_wechat_app_id';
// 域名需要跟微信公众号里配置的网页授权域名一致
const redirectUri = encodeURIComponent('https://your_callback_url'); // 不要带#号

// 点击支付先授权
const authByWechat = () => {
  const scope = 'snsapi_userinfo'; // 非静默授权
  const state = Math.random().toString(36).substr(2);
  const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
  window.location.href = authUrl;
};

添加之后点击支付会出现叫你授权的弹窗（截图来自微信官方文档）：

用户同意授权后，微信会自动跳转到你指定的 redirect_uri，并在URL后面附加 code 参数。

示例： 

https://test.qxb.com/my/recharge?code=CODE&state=STATE

在回调地址对应的页面中，获取授权码code并通过后端接口请求用户信息。

<script setup>
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Api } from '@/utils/api';

const router = useRouter();

onMounted(async () => {
  const code = new URLSearchParams(window.location.search).get('code');
  const state = new URLSearchParams(window.location.search).get('state');

  if (code) {
    try {
      const response = await Api.getUserInfo(code); // 这里假设有一个 API 方法用来获取用户信息
      const userInfo = response.data;

      // 存储用户信息
      localStorage.setItem('userInfo', JSON.stringify(userInfo));

      // 跳转回原页面
      router.push({ path: '/' });
    } catch (error) {
      console.error('获取用户信息失败:', error);
    }
  } else {
    console.error('未获取到授权码');
  }
});
</script>

为了安全起见，建议不要在客户端暴露 appid 和 appsecret，而是应该在后端完成上述操作，然后将结果返回给前端。

// 确认支付
const confirmPayment = async () => {
  const d = {
    os: !util.isApple() ? "IOS" : "Android",
    wxOpId: userInfo.value.openId
    // 其他需要的参数
  };
  // 假设create是创建订单的接口
  create({ d })
    .then((res: any) => {
      if (res.value.c == 200) {
        if (checked.value == "202") {
          const { payCertificate: a } = res.value.d
          const payCertificate = JSON.parse(a) // 字符串转成json格式
          wx.config({
            debug: false, // true开启调试模式
            appId: payCertificate.appId, // 必填，公众号的唯一标识
            timestamp: payCertificate.timestamp, // 必填，生成签名的时间戳
            nonceStr: payCertificate.nonceStr, // 必填，生成签名的随机串
            signature: payCertificate.paySign, // 必填，签名
            jsApiList: ['chooseWXPay', 'getBrandWCPayRequest'] // 必填，需要使用的JS接口列表
          })

          // 调起微信JSAPI支付
          const onBridgeReady = () => {
            WeixinJSBridge.invoke('getBrandWCPayRequest', {
              "appId": payCertificate.appId,
              "timeStamp": String(payCertificate.timeStamp),
              "nonceStr": payCertificate.nonceStr,
              "package": payCertificate.package,
              "signType": payCertificate.signType,
              "paySign": payCertificate.paySign
            }, (response: { err_msg: string }) => {
              if (response.err_msg === "get_brand_wcpay_request:ok") {
                alert("支付成功")
              } else {
                // console.error("支付失败:", response.err_msg)
                alert("支付失败")
              }
            });
          }
          if (typeof WeixinJSBridge === "undefined") {
            if (document.addEventListener) {
              document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
            } else {
              console.warn("Your browser does not support addEventListener. Please consider upgrading.")
            }
            console.log("WeixinJSBridge未定义，等待加载...")
          } else {
            console.log("WeixinJSBridge已定义，准备调起支付...")
            onBridgeReady();
          }
        }
      } else {
        showToast(res.value.m);
      }
    }, () => {
      showToast("创建支付失败");
    })
}

-----------------------------------------------分隔线----------------------------------------------------

以下是后端的工作：

用授权码换取 access_token 和 openid

• 发送 GET 请求到微信服务器，请求地址为：

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

• 返回的数据包括 access_token, expires_in, refresh_token, openid, scope。

获取用户基本信息

• 使用上面得到的 access_token 和 openid 发送 GET 请求到微信服务器，请求地址为：

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

• 返回的数据即为用户的详细信息，如昵称、头像、性别等。

-----------------------------------------------结束----------------------------------------------------

因为我在手机上调试的时候看不到重定向页面的code，又不敢轻易发生产。微信开放社区里有人说code在地址里，只是微信自带的复制链接复制不了。可是alert又得发生产……所以为了模拟微信浏览器方便测试，我用了微信开发者工具。可以的话，用内网穿透去调试更好。

下图第一步的文档可以看一下，先安装好微信开发者工具。在做第二步绑定之前，先微信关注你们认证的这个公众号，再输入开发者的微信号进行绑定：

打开微信开发者工具，选择公众号网页：

输入地址就可以本地调试了： 

JSAPI调起支付：JSAPI调起支付|微信支付商户文档中心