从前端的角度来梳理微信支付（小程序、H5、JSAPI）的流程

async function wxPay(goodId) {
// 1. 创建订单 获取orderId
let orderId = await ajax("POST", "/api/OrderProgram/CreateTheOrder", {
goodId, // 商品id

});
// 2. 获得 code
let code = await wxlogin(); // 基于pr封装的wx.login()方法
// 3. 获取支付的数据
let payData = await ajax("POST", "/api/OrderProgram/WxXcxPay", {
orderId,

code,

});
// 4. 发起支付
let res = await payment(payData); // 基于pr封装的wx.requestPayment()方法
// 5. 判断是否支付成功
let payResult = res.errMsg;
if (payResult == "requestPayment:ok") {
console.log("支付成功");

} else if (payResult == "requestPayment:fail cancel") {
console.log("用户取消支付");

} else {
console.log("支付失败");

}
}

async function wxH5Pay(goodId) {

// 1. 创建订单 获取orderId
let orderId = await ajax("POST", "/api/OrderProgram/CreateTheOrder", {
goodId, // 商品id

});
// 2. 获取支付跳转的URL
let mweb_url = await ajax("POST", "/api/OrderProgram/WxH5Pay", { orderId });
// 3. 跳转URL去微信支付
if (mweb_url) {
location.href = mweb\_url;

} else {
console.log("回调地址出错");

}
// 4. 支付后返回支付页，判断是否支付成功
// 4.1 刷新页面，获取最新的订单(商品)状态。
// 4.2 设置一个"我已支付"的按钮，让用户点击之后查询状态。
}

// 1. 创建订单 获取orderId

let orderId = await ajax("POST", "/api/OrderProgram/CreateTheOrder", {
goodId, // 商品id
});
// 2. 携带id 跳转到支付页
this.$router.push({ name: "wx_pay_page", params: { orderId: id } });

// main.js 引入 js-sdk

import wx from "weixin-js-sdk";

<template>

<div>
&lt;button @click=&#34;wxPay&#34;&gt;点击支付&lt;/button&gt;

</div>
</template>

// Vue

data(){
return {

    orderId: this.$route.params.orderId, // 订单id

    url: '',// 获取code的url

    wxData: null,// js-sdk接口所需的数据

}

},
mounted(){
// 判断是否有code

this.getCode()

}
methods: {
getCode() {

    var code = this.getUrlPram("code");

    if (code != null) {

        this.code = code;

        // 拿到 code 发给 后端

        this.sendCode(code);

    } else {

        // 去拿code

        this.getUrl();

    }

},

getUrl() {

    // 请求后端拿到url所需数据，然后跳转页面在通过回调地址返回，获取code.

    this.axios

        .post("/api/OrderProgram/GetOpenidAndAccessToken", {

            orderId: this.orderId,

        })

        .then((data) => {

            this.url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${data.appId}&redirect\_uri=${data.redirect\_uri}&response\_type=${data.response\_type}&scope=${data.scope}&state=${data.state}`;

            window.location.href = this.url;

        })

        .catch((err) => {

            console.log(err);

        });

},

sendCode(code) {

    // 发送code给后端 后端解析出openid

    this.axios

        .post("/api/OrderProgram/GetOpenidAndAccessTokenFromCode", {

            code: code,

        })

        .then((res) => {

            console.log(res);

        })

        .catch((err) => {

            console.log(err);

        });

},

wxPay: async function() {

    // 发送orderid，获取wx.chooseWXPay和wx.config所需的参数

    this.wxData = await this.axios.post(

        "/api/OrderProgram/WxJSAPIPay",

        { orderId: this.orderId }

    );

    let wxConfigData = this.wxData.wxConfigData // 获取wx.chooseWXPay()所需数据

    let wxPayData = this.wxData.wxPayData;// 获取wx.config()所需数据

    this.$wx.config({

        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

        appId: wxConfigData.appId, // 必填，公众号的唯一标识

        timestamp: wxConfigData.timeStamp, // 必填，生成签名的时间戳

        nonceStr: wxConfigData.nonceStr, // 必填，生成签名的随机串

        signature: wxConfigData.paySign, // 必填，签名

        jsApiList: [

            "chooseWXPay",

        ],

    });

    // 执行支付

    this.$wx.chooseWXPay({

        timestamp: wxPayData.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符

        nonceStr: wxPayData.nonceStr, // 支付签名随机串，不长于 32 位

        package: wxPayData.package, // 统一支付接口返回的prepay\_id参数值，提交格式如：prepay\_id=\\*\\*\\*）

        signType: wxPayData.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'

        paySign: wxPayData.paySign, // 支付签名

        success: (res) => {

            this.$toast("支付成功");

        },

        fail: (err) => {

            this.$toast("支付失败");

        },

    });

},

}

// 在创建订单之后，就判断环境使用哪种方法支付。

if (isWx()) {
this.WXPay(orderId); // 带着orderId跳转到支付页逻辑
} else {
this.H5Pay(orderId); // 执行上面H5支付中的创建订单之后的逻辑
}
// 判断是否是微信浏览器
function isWx() {
let uAgent = navigator.userAgent.toLowerCase();
reutrn(/micromessenger/.test(uAgent)) ? true : false;
}

https://open.weixin.qq.com/connect/oauth2/authorize

?appid=你的appid
&redirect_uri=你的回调地址（拿到code后返回）
&response_type=code（返回类型，默认code）
&scope=snsapi_base（授权范围，静默授权拿到openid）
&state=STATE(自定义状态，非必填)
#wechat_redirect（重定向使用必须携带）