由于微信支付宝的封杀大战,导致无法在微信平台中使用支付宝付款。但是考虑到某些用户可能没有开通微信支付,因此在一些应用情景下,实现微信端支付宝付款还是很有必要。最近撸的代码正好有这个需求,所以研究了一下分享出来,希望对需要的小伙伴有所帮助。
实现思路:
在微信中,当我们点击支付宝付款(点击第一张图中的“确定”)时,先到一个跳转页面,跳转页面中的JS逻辑如下所示,
- 判断当前的运行环境,如果是微信内置的浏览器,则说明是在微信平台中,此时通过
document.body.innerHTML = '<img src="img/paySkip.png" id="mask" />';
将页面内容改为一张图片,提示用户点击右上角 ... ,选择在手机浏览器中打开; - 用户在手机浏览器中打开之后,则执行
if (!isWeixin) {}
中的逻辑,通过ajax向后台请求数据; - 得到ajax返回的data后,运行data中的script代码,就会接入支付宝的移动网络支付功能(data中的内容为dom(form表单,表单中的数据均已由后台提供)+script(提交form表单的js代码))
var orderNumber = url.split('&')[1].split('=')[1]; //判断当前环境是否为微信内置浏览器 var ua = navigator.userAgent.toLowerCase(); var isWeixin = ua.indexOf('micromessenger') != -1; var url = window.location.href; if (!isWeixin) {//非微信内置浏览器,说明已经在浏览器中打开了,执行这段逻辑 _ShowWaiting();//显示等待显示框 //封装好的ajax请求函数,通过ajax向后台请求数据 HTTPRequestFunc( "get", 'http://v1dev.ebbaba.com/Interface/json/PayService.ashx?pagetype=aliwebpay', { ordernum: orderNumber }, function(data){ _CloseWaiting(); //返回的数据为一个form表单和提交该form的script,通过提交该表单(提交到支付宝,提交的数据等一系列内容已经全部包含在后台返回的data数据中,我们只需要运行data中的script即可) var data = JSON.parse(data); if(data.status == 1){ document.body.innerHTML = data.data; //通过innerHTML添加的script代码不会自动执行,需要我们手动来执行 var scripts = document.body.getElementsByTagName("script"); for(var i=0;i<scripts.length;i++){ //一段一段执行script eval(scripts[i].innerHTML); } }else{ _CloseWaiting();//关闭等待显示框 mui.toast(data.info,{verticalAlign:"center", duration:"long"}); } }, function(status, info){ _CloseWaiting(); mui.toast(info,{verticalAlign:"center", duration:"long"}); }); }else{//微信浏览器,显示‘在浏览器中打开’图片 document.body.innerHTML = '<img src="img/paySkip.png" id="mask" />'; }