淺談微信內置瀏覽器調用支付寶支付完整教程《2》

話不多說直接上代碼

1、 支付寶文檔底部下載demo，
2、demo裏有ap.js，pay.htm,post.htm等，pay.htm是支付寶爲提供的demo中間頁，用框架構造項目的需要自己改造下，在跳轉中間頁面的時候，需要用ap.js的方法

/**
**創建訂單接口，這個接口後臺會返回一個form表單的字符串
*關注返回後調用goMask方法
*/
pay_click(){
				let param = {
					params:{
						registrationId:this.registrationId,
						payChannel:'alipay'
					}
				}
				this.$http.activity_payFee(param).then(res=>{
                    if(res.status==200){
                    	//這裏返回的res.data就是form
						var form = res.data;
						this.goMask(res);
					}else{
						this.$toast.fail(res.message);
					}
                }).catch(err=>{
					this.$toast.fail(err.message);
                    window.console.log(err.message)
                })
			},

2、

/***
*這是有一個_AP的方法，這個方法來着與支付寶官方文檔提供的插件ap.js
封裝數據結構跳轉中間頁
*/
getMask(res) {
				var form= res.data;
				const div = document.createElement('div')  //創建div
				div.innerHTML = form  //此處form就是後臺返回接收到的數據
				document.body.appendChild(div) //document.forms[0].submit()
				document.forms[0].acceptCharset='utf-8';
				var queryParam = '';
				Array.prototype.slice.call(document.querySelectorAll("input[type=hidden]")).forEach(function (ele) {
					queryParam += '&' + ele.name + "=" + encodeURIComponent(ele.value);
					});
				var gotoUrl = document.querySelector("form").getAttribute('action') + '&' +  queryParam;
					_AP.pay(gotoUrl);
			},

3、中間頁代碼和頁面【核心代碼】

//css和html下載的demo裏有
export default{
	data(){
		return{

		}	
    },
    beforeCreate(){
    },
    created() {

    },
	mounted(){
		if (location.hash.indexOf('error') != -1) {
	        alert('參數錯誤，請檢查');
	    } else {
	        var ua = navigator.userAgent.toLowerCase();
	        var tip = document.querySelector(".weixin-tip");
            var tipImg = document.querySelector(".J-weixin-tip-img");
	        if (ua.indexOf('micromessenger') != -1) {
	            tip.style.display = 'block';
	            tipImg.style.display = 'block';
	            if (ua.indexOf('iphone') != -1 || ua.indexOf('ipad') != -1 || ua.indexOf('ipod') != -1) {
	                tipImg.className = 'J-weixin-tip-img weixin-tip-img iphone'
	            } else {
	                tipImg.className = 'J-weixin-tip-img weixin-tip-img android'
	            }
	        } else {
	            var getQueryString = function (url, name) {
	                var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
	                if (reg.test(url)) return RegExp.$2.replace(/\+/g, " ");
	            };
	             var param = getQueryString(location.href, 'goto') || '';
	            
	             location.href = param != '' ? _AP.decode(param) : 'pay.htm#error';

	        }
	    }
    },
    methods:{
        getQueryString(url, name){
            var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
            if (reg.test(url)) return RegExp.$2.replace(/\+/g, " ");
        }
    }
}

4、選擇瀏覽器打開

5、微信調支付寶支付常見問題點擊進入