1. 程式人生 > >vue 微信內H5調起支付

vue 微信內H5調起支付

在微信內H5調起微信支付,主要依賴於一個微信的內建物件WeixinJSBridge,這個物件在其他瀏覽器中無效。

主要程式碼:


import axios from 'axios';
export default {
    methods:{
        wxpay() {
            axios.post(url,data)
            .then((res) => {
                if(res.code == 200) {
                    const pay_params = res.data.jsApiParameters

                    if (typeof WeixinJSBridge == "undefined"){
                        if( document.addEventListener ){
                            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                        }else if (document.attachEvent){
                            document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
                            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                        }
                        }else{
                        this.onBridgeReady(pay_params);
                    }
                }else{
                    alert('微信支付調起失敗!');
                }
            }).catch((err) => {
                console.log(err);
            })
        },
        onBridgeReady(params) {
            const pay_params = JSON.parse(params);
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    "appId": pay_params.appId,  //公眾號名稱,由商戶傳入     
                    "timeStamp": pay_params.timeStamp,  //時間戳,自1970年以來的秒數     
                    "nonceStr": pay_params.nonceStr,  //隨機串     
                    "package": pay_params.package,     
                    "signType": pay_params.signType,  //微信簽名方式:     
                    "paySign": pay_params.paySign  //微信簽名 
                },
                function(res){
                    if(res.err_msg == "get_brand_wcpay_request:ok" ){
                    alert('支付成功!');
                } 
            }); 
        },
    }

}

以上就是微信內H5調起支付的方法~

原文地址:https://segmentfault.com/a/1190000017013969