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 相关文章推荐
Prototype 工具函数 学习
Jul 23 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
最佳JS代码编写的14条技巧
Jan 09 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
js异步编程小技巧详解
Aug 14 Javascript
jQuery实现的form转json经典示例
Oct 10 jQuery
vue.js轮播图组件使用方法详解
Jul 03 Javascript
小程序外卖订单界面的示例代码
Dec 30 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 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实现jQuery扩展函数
2009/10/30 PHP
php数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
Prototype Array对象 学习
2009/07/19 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
原生JS轮播图插件
2017/02/09 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
Python中查看文件名和文件路径
2017/03/31 Python
详细分析python3的reduce函数
2017/12/05 Python
Python命令行解析模块详解
2018/02/01 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
基于python历史天气采集的分析
2019/02/14 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
django使用graphql的实例
2020/09/02 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
养殖项目策划书范文
2014/01/13 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
就业证明函
2015/06/17 职场文书
《窃读记》教学反思
2016/02/18 职场文书
导游词之临安白水涧
2019/11/05 职场文书
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js