##推奨: WeChatミニ プログラム プログラム開発チュートリアル
ビジネス ニーズにより、次の 3 つの支払い方法を含む WeChat 支払い機能が開発されています。
を取得するために注文を出し、
と orderId を使用してバックエンド インターフェイスをリクエストし、支払いに必要なデータを取得します
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("支付失败");
}
}orderId インターフェイスで支払いを要求し、## にジャンプし、mweb_url にジャンプすると、WeChat にジャンプし、自動的に WeChat 支払いを呼び出します。
4.2 「支払い済み」ボタンを設定して、ユーザーがクリックしてステータスを自動的に確認できるようにします。
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 设置一个"我已支付"的按钮，让用户点击之后查询状态。
}H5 支払いを行うことができませんWeChat 顧客に直接クライアント内にロードするには、外部ブラウザにロードしてください。 ## で支払いページにジャンプします。
があるかどうかを確認しますパス内に code
をバックエンドに送信し、バックエンドで openidSend orderIdwxData に含まれる
のデータを取得します。 。 最初に wx.config() を呼び出します。すべてが正常であれば、支払いページがポップアップ表示されます。 支払いステータスはバックエンドを通じてクエリされます
製品ページ
// 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> <p> <button @click="wxPay">点击支付</button> </p> </template>
支払いページ JS
// 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;
}www.xx.com/pay，最后获取的 code 会拼在此回调地址后返回，返回后如www.xx.com/pay?code=xxxx获取 code
code：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（重定向使用必须携带）
redirect_uri参数要和你在微信公众号里设置的回调域名一致（例如：www.xx.com/pay）,需要注意的是这 url 需要urlEncode。
请求这个地址之后，code 会以你设置的redirect_uri地址里的参数带回来，拿到之后传给后端就行了。
前端引入 js-skd
script引入js-sdknpm 包weixin-js-sdkwx.config 的参数wx.chooseWXPay 所需的参数整个流程走下来，给我的体验是：小程序支付最方面（因为配置少），其次是 H5，JSAPI 支付最麻烦（文章一多半都在写它）
在微信支付功能开发过程中，其实最麻烦的不是开发流程，而是他的各种配置和授权流程，为了拿到所需的参数而来回折腾。
开发过程中的一些参数是经常用到的，如 appid、openid、orderId
支付流程大径相同，先获取到用户的 openid，知道你是谁，然后统一下单拿到 orderId 再去处理不同平台的支付方式
开发时候用到的相关文档，一定要仔细阅读二遍以上为止！！
遇到问题不要死刚，多百度多 Google，说不准你遇到的问题已经有无数的人遇到过并且已经有成熟的解决方案了。
前端和后端要多沟通，有什么问题(难点)随时反馈，需要什么参数好好说，遇到观点不一致的时候千万要注意控制住情绪，切莫撕逼（.——.）。
因为本人水平有限，对后端流程懂得不多，只能以前端的角度来梳理整个支付流程。
以上，希望对你有所帮助。
以上がフロントエンドの観点から WeChat の支払いプロセスを整理するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
