1. 程式人生 > 其它 >html獲取微信授權以及微信支付

html獲取微信授權以及微信支付

最近在寫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){

            }
        })

  

 以上,就可以成功吊起微信支付了