浅谈微信内置浏览器调用支付宝支付完整教程《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、微信调支付宝支付常见问题点击进入