基于Vue框架的微信網頁進行微信支付
- 導語
- 一、微信后臺配置介面
- 1.配置微信支付的合法地址
- 2.配置JS介面安全域名
- 二、安裝微信SDK依賴
- 1.安裝
- 2.在需要的頁面匯入
- 三、在頁面中配置SDK
- 四、使用微信支付介面
導語
作為一個先接觸微信小程式再做微信公眾號的前端萌新，第一次寫微信網頁的微信支付，感覺步驟有點繁瑣，寫篇博客幫助一下有困惑的小伙伴，也防止以后忘記
要實作公眾號微信支付，最基礎的是擁有一個微信服務號、一個微信商戶平臺賬號、一個服務器和域名，且微信服務號系結了微信商戶平臺，這些步驟就不細說了
一、微信后臺配置介面
1.配置微信支付的合法地址
登錄微信商戶平臺，進入產品中心——>開發配置，設定JSAPI支付授權目錄，輸入你的服務器域名和檔案目錄，然后輸入密碼和驗證碼就可以配置成功，
然后進入賬戶中心——>API安全——>API密鑰
這里需要配置一個給后臺的秘鑰（這個應該主要是后臺考慮的問題），32位數字字母的秘鑰，要保存好，忘了只能重設，
2.配置JS介面安全域名
這次要登錄微信公眾平臺，登錄你的服務號，進入公眾號設定——>功能設定，設定JS介面安全域名，JS介面安全域名是確保你可以在這個網頁呼叫微信的SDK的
設定這個的時候要在服務器你填的目錄下放一個微信提供的txt檔案，要和后端一起合作完成
二、安裝微信SDK依賴
1.安裝
npm install weixin-jsapi
2.在需要的頁面匯入
import wx from "weixin-jsapi"
三、在頁面中配置SDK
微信SDK在每個需要使用的頁面都要進行配置，直接在頁面創建的時候配置
created() {
//獲取當前頁面url
let url = location.href
//呼叫后端介面，給后臺url，讓后臺回傳appId、時間戳、隨機串、簽名，建議vue路由使用hash模式，可以根據#分隔路由
getJsSDKInfo({ticketUrl: url.split("#")[0]}).then(res => {
console.log(res)
wx.config({
debug: false,//用于除錯，這里一般在測驗階段先用true，等打包給后臺的時候就改回false,
appId: res.data.result.appId,
timestamp: res.data.result.timestamp,
nonceStr: res.data.result.nonceStr,
signature: res.data.result.signature,
jsApiList: ['chooseWXPay']//需要使用的API，此處只使用了微信支付介面
})
//查看配置是否成功，成功時候才能使用微信SDK
wx.ready(() => {
wx.checkJsApi({
jsApiList: ['chooseWXPay'],
success: function (res) {
console.log("success")
console.log(res)
},
fail: function (res) {
console.log("fail");
console.log(res)
}
})
})
})
},
在成功配置之后，我們就可以在需要的地方呼叫微信支付的介面了
四、使用微信支付介面
pay() {//監聽需要支付的按鈕，呼叫該函式
//呼叫后臺介面，獲取時間戳、字串、簽名方式、支付簽名和package
getPayInfo({reportId: this.resultId}).then(res=>{
console.log(res)
wx.chooseWXPay({
timestamp: res.data.result.timeStamp, // 支付簽名時間戳，注意微信jssdk中的所有使用timestamp欄位均為小寫，但最新版的支付后臺生成簽名使用的timeStamp欄位名需大寫其中的S字符
nonceStr: res.data.result.nonceStr, // 支付簽名隨機串，不長于 32 位
package: res.data.result.package, // 統一支付介面回傳的prepay_id引數值，提交格式如：prepay_id=\*\*\*）
signType: res.data.result.signType, // 簽名方式，默認為'SHA1'，使用新版支付需傳入'MD5'
paySign: res.data.result.paySign, // 支付簽名
success: (res)=> {//成功回呼函式
console.log("success")
getReportDetails()//支付成功之后需要做的事
}
})
})
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/174878.html
標籤：其他
上一篇：一個公司網站的制作流程都有哪些？