栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

我的思路大概是这样的

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

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

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

第一步:

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

payment主要代码:

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

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

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

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

pay-mask代码如下:


 

.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/i.png'); 
background-repeat: no-repeat; 
} 


补充知识: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

所以嘛,需要创建个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 解决在微信内置浏览器中调用支付宝支付的情况就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持考高分网。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/67849.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号