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 相关文章推荐
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 Javascript
JavaScript中匿名函数的递归调用
Jan 22 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
详解小程序退出页面时清除定时器
Apr 28 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
Vue.js中的组件系统
May 30 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
php实现监听事件
2013/11/06 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
python图书管理系统
2020/04/05 Python
Python Flask框架扩展操作示例
2019/05/03 Python
python 读取修改pcap包的例子
2019/07/23 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
如何清空Session
2015/02/23 面试题
大学国际贸易专业自荐信
2014/06/05 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
授权委托书怎么写
2014/09/25 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
建国大业观后感
2015/06/01 职场文书
独生子女证明范本
2015/06/19 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL