html獲取微信授權以及微信支付
阿新 • • 發佈:2022-05-17
最近在寫h5專案的時候,有個功能是掃描二維碼,進行微信支付以及支付寶支付。
1:首先有一個掃碼後需要跳轉的頁面,我這邊使用的html,呼叫介面使用的是ajax,很長時間沒用了,還有點不習慣。
①:先說支付寶支付吧;
支付寶支付呢,一般有兩種方式,第一是你先調取下單介面,由後臺的介面的返回跳轉路徑,你再跳轉就行,
獲取完直接跳轉就行,第二種呢是調取介面傳遞相應引數,由後臺進行跳轉。引數由前後端約定即可
②,微信支付,微信支付,就需要微信授權,假設微信授權完成,直接走支付。
首先需要引入wxsdk----我是就一個html檔案,就直接引入了,
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>obj1={ orderid:obj.orderid, type:obj.type, payment:1, openid:openid//openid } $.ajax({ type: 'POST', url: urls+'你的介面', data:obj1, contentType: 'application/x-www-form-urlencoded', headers: { }, success: function(res) { localStorage.setItem('appId',res.data.appId) localStorage.setItem('nonceStr', res.data.nonceStr) localStorage.setItem('package', res.data.package) localStorage.setItem('paySign', res.data.paySign) localStorage.setItem('signType', res.data.signType) localStorage.setItem('timeStamp', res.data.timeStamp) window.wx.config({ debug: false, appId: res.data.appId, // 必填,公眾號的唯一標識 timestamp: res.data.timeStamp, // 必填,簽名的時間戳,後臺生成的 nonceStr: res.data.nonceStr, // 必填,簽名的隨機串,後臺生成的 jsApiList: ['scanQRCode'] // 必填,需要使用的JS介面列表 }); window.wx.error(function(res) { console.log(res); }); let appId=localStorage.getItem('appId') let nonceStr=localStorage.getItem('nonceStr') let package=localStorage.getItem('package') let paySign=localStorage.getItem('paySign') let signType=localStorage.getItem('signType') let timeStamp=localStorage.getItem('timeStamp') window.wx.ready(() => { wx.chooseWXPay({ timestamp: timeStamp, nonceStr: nonceStr, // 支付簽名隨機串,不長於 32 位 package: package, signType: signType, paySign: paySign, // 支付簽名 success: function (res) { // 支付成功後的回撥函式 } }); }) },complete:function(res){ } })
以上,就可以成功吊起微信支付了