vue 解决在微信内置浏览器中调用支付宝支付的情况


Posted in Javascript onNovember 09, 2020

我的思路大概是这样的

1. 验证是否是在微信内置浏览器中调用支付宝

2.给支付页面的url加上调用接口所需的参数(因为在微信里是不能直接调用支付宝的需要调用外部浏览器)

3.在外部浏览器中完成支付跳转页面

第一步:

payment: 是选择支付页面,pay-mask是用于在微信内置浏览器中调用支付宝的中间页

vue 解决在微信内置浏览器中调用支付宝支付的情况

payment主要代码:

vue 解决在微信内置浏览器中调用支付宝支付的情况

let ua = window.navigator.userAgent.toLowerCase()

ua.match(/MicroMessenger/i) == "micromessenger"

这两句代码就是判断用户是否是用微信内置浏览器打开的页面

如果是的话我们就需要把调用支付接口所需要的接口参数传给另一个页面(你也可以就在当前页做处理,我这样做是因为我想加一个提示页)

pay-mask代码如下:

<template> 
<div class="mask"> 
<!-- 提示在浏览器打开弹框 --> 
<div class="pay-mask" v-show="isWeiXi"> 
</div>
 
<div class="payform"></div> 
</div>
</template>
<script type="text/ecmascript-6">
 
/*
解决在微信浏览器中无法调用支付宝支付:
1.拿到从支付页传递过来的参数重组成自己需要的数据
2.清除旧的缓存数据(防止出现意外bug)
3.验证是否是微信浏览器(不是就把拿到的key和token存进本地缓存中,用于其他接口调用)
4.请求数据接口拿到支付宝的支付表单装进页面中完成支付
*/
 
export default { 
name: 'payMask', 
data () { 
return { 
isWeiXi: true, 
theRequest: {} 
} 
},
 
methods: {
 
// 获取当前微信浏览器url地址参数
 
getUrlParams() {
 
// 清除旧的缓存数据
 
// window.localStorage.clear() 
let theRequest = new Object(); 
let url = location.href; //获取url中"?"符后的字串 
let strs = []; 
if (url.indexOf("?") != -1) {
var str = url.substr(parseInt(url.indexOf("?")+1)); 
strs = str.split("&"); 
for (var i = 0; i < strs.length; i++) { 
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]); 
} 
}
 
this.theRequest = theRequest; 
},
 
// 监控微信浏览器
 
isWeiXin() { 
let ua = window.navigator.userAgent.toLowerCase(); 
if (ua.match(/MicroMessenger/i) != "micromessenger") { 
this.isWeiXi = false
 
// 重新存储新的token(在外部浏览器打开支付完成后是没有token这些数据的所以需要在浏览器一打开的时候就去存一次数据)
 
window.localStorage.setItem("channelId", this.theRequest.channelId); 
window.localStorage.setItem("userKey",JSON.stringify(this.theRequest.userKey)); 
window.localStorage.setItem("userToken",JSON.stringify(this.theRequest.userToken)); 
if(this.theRequest.memberTypeName){
 
// 调用支付宝支付
 
this.zfbPayBuy(this.theRequest) 
} else { 
this.zfbPayBuySocial(this.theRequest) 
}
 
} else { 
this.isWeiXi = true
 
} 
},
 
// 支付宝支付(会员)
 
zfbPayBuy(data){
 
// 请求接口拿到接口返回的支付表单(接口直接返回的,我们直接装进页面就可以了)
 
this.axios.payBuy(data).then(res => { 
if (res.status == 0) { 
let payHtml = document.querySelector(".payform"); 
payHtml.innerHTML = res.result;
let paySub = payHtml.getElementsByTagName("input")[1]; 
paySub.click()
 
} 
}) 
},
 
//支付宝支付(社保)
 
zfbPayBuySocial(data) { 
this.axios.buySocial(data).then(res => { 
if (res.status == 0) { 
let payHtml = document.querySelector(".payform") 
payHtml.innerHTML = res.result 
let paySub = payHtml.getElementsByTagName("input")[1] 
paySub.click() 
} 
}) 
}, 
}, 
created() {
 
// 拿去当前地址参数 

this.getUrlParams() 
if(JSON.stringify(this.theRequest) != '{}'){ 
this.isWeiXin() 
} 
},
 
mounted(){
 
// 更新一下当前浏览器地址(防止在微信里调用外部浏览器的时候出现意外bug) 

window.location.href = window.location.href 
} 
} 
</script>
<style scoped lang="less"> 

.pay-mask { 
width: 100%; 
min-height: 100%; 
position:fixed; 
z-index: 99; 
background-color: rgba(0, 0, 0,.6); 
background-image: url('../../image/icon/confirm.png'); 
background-repeat: no-repeat; 
} 

</style>

补充知识:vue 移动端H5非内置浏览器发起微信、支付宝支付

该贴只说前端部分,后端人员绕路哈。

先调用统一下单接口后

1、微信部分,后端会返回一个url给你,

"mweb_url":https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx********************&package=162****

直接跳转就行了。(最后提醒句:提示服务商参数缺失的话就让服务商开通H5支付)

window.location.href = res.data.mweb_url

2、支付宝方面就有点麻烦,因为它返回的是一个form

vue 解决在微信内置浏览器中调用支付宝支付的情况

所以嘛,需要创建个div然后innerHTML插入HTML代码

const div = document.createElement('div') // 创建div
div.innerHTML = res.data.aliHtml // 将返回的form 放入div
document.body.appendChild(div) // 将上面创建的元素加入到BODY的尾部
document.forms[0].submit() // 表示获取当前页面的第一个表单

这样就OK了

如果想问支付成功后的跳转呢,你则需要给一个链接给到后端,后端传给阿里或者微信,成功后自己跳的。

以上这篇vue 解决在微信内置浏览器中调用支付宝支付的情况就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
半角全角相互转换的js函数
Oct 16 Javascript
关于javascript DOM事件模型的两件事
Jul 22 Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
node.js中的http.response.writeHead方法使用说明
Dec 14 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
详解Vue中的watch和computed
Nov 09 #Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
Nov 09 #Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 #Javascript
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 #Javascript
Vue路由权限控制解析
Nov 09 #Javascript
在vue项目中promise解决回调地狱和并发请求的问题
Nov 09 #Javascript
vue 中的动态传参和query传参操作
Nov 09 #Javascript
You might like
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
jQuery 选择器理解
2010/03/16 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
DOM 高级编程
2015/05/06 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
Angular的$http与$location
2016/12/26 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
Python 返回汉字的汉语拼音
2009/02/27 Python
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
python 爬取微信文章
2016/01/30 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
宣传标语大全
2014/07/01 职场文书
个人委托书
2014/07/31 职场文书
医德医风自我评价2015
2015/03/03 职场文书
父母教会我观后感
2015/06/17 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang