电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

vue 解決在微信內置瀏覽器中調用支付寶支付的情況

瀏覽:136日期:2022-06-11 08:38:58

我的思路大概是這樣的

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 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’) // 創建divdiv.innerHTML = res.data.aliHtml // 將返回的form 放入divdocument.body.appendChild(div) // 將上面創建的元素加入到BODY的尾部document.forms[0].submit() // 表示獲取當前頁面的第一個表單

這樣就OK了

如果想問支付成功后的跳轉呢,你則需要給一個鏈接給到后端,后端傳給阿里或者微信,成功后自己跳的。

以上這篇vue 解決在微信內置瀏覽器中調用支付寶支付的情況就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: 微信 支付寶
相關文章:
主站蜘蛛池模板: AGV叉车|无人叉车|AGV智能叉车|AGV搬运车-江西丹巴赫机器人股份有限公司 | 复合土工膜厂家|hdpe防渗土工膜|复合防渗土工布|玻璃纤维|双向塑料土工格栅-安徽路建新材料有限公司 | 铁艺,仿竹,竹节,护栏,围栏,篱笆,栅栏,栏杆,护栏网,网围栏,厂家 - 河北稳重金属丝网制品有限公司 山东太阳能路灯厂家-庭院灯生产厂家-济南晟启灯饰有限公司 | 刹车盘机床-刹车盘生产线-龙口亨嘉智能装备| 陕西视频监控,智能安防监控,安防系统-西安鑫安5A安防工程公司 | 智能汉显全自动量热仪_微机全自动胶质层指数测定仪-鹤壁市科达仪器仪表有限公司 | 金属切削液-脱水防锈油-电火花机油-抗磨液压油-深圳市雨辰宏业科技发展有限公司 | 山东PE给水管厂家,山东双壁波纹管,山东钢带增强波纹管,山东PE穿线管,山东PE农田灌溉管,山东MPP电力保护套管-山东德诺塑业有限公司 | 【铜排折弯机,钢丝折弯成型机,汽车发泡钢丝折弯机,线材折弯机厂家,线材成型机,铁线折弯机】贝朗折弯机厂家_东莞市贝朗自动化设备有限公司 | 蒸压釜_蒸养釜_蒸压釜厂家-山东鑫泰鑫智能装备有限公司 | 硫酸钡厂家_高光沉淀硫酸钡价格-河南钡丰化工有限公司 | 亚克力制品定制,上海嘉定有机玻璃加工制作生产厂家—官网 | 全钢实验台,实验室工作台厂家-无锡市辰之航装饰材料有限公司 | 健康管理师报名入口,2025年健康管理师考试时间信息网-网站首页 塑料造粒机「厂家直销」-莱州鑫瑞迪机械有限公司 | 钢制拖链生产厂家-全封闭钢制拖链-能源钢铝拖链-工程塑料拖链-河北汉洋机械制造有限公司 | 商用绞肉机-熟肉切片机-冻肉切丁机-猪肉开条机 - 广州市正盈机械设备有限公司 | 地磅-地秤-江阴/无锡地磅-江阴天亿计量设备有限公司_ | 布袋式除尘器|木工除尘器|螺旋输送机|斗式提升机|刮板输送机|除尘器配件-泊头市德佳环保设备 | 广州市哲铭油墨涂料有限公司,水性漆生产研发基地 | 胶原检测试剂盒,弹性蛋白检测试剂盒,类克ELISA试剂盒,阿达木单抗ELISA试剂盒-北京群晓科苑生物技术有限公司 | 衬四氟_衬氟储罐_四氟储罐-无锡市氟瑞特防腐科技有限公司 | 铁素体测量仪/检测仪/铁素体含量测试仪-苏州圣光仪器有限公司 | 智能家居全屋智能系统多少钱一套-小米全套价格、装修方案 | 模具钢_高速钢_不锈钢-万利钢金属材料 | 合肥展厅设计-安徽展台设计-合肥展览公司-安徽奥美展览工程有限公司 | 污水/卧式/潜水/钻井/矿用/大型/小型/泥浆泵,价格,参数,型号,厂家 - 安平县鼎千泵业制造厂 | 电子书导航网_电子书之家_电子书大全_最新电子书分享发布平台 | 中山市派格家具有限公司【官网】 | 国际线缆连接网 - 连接器_线缆线束加工行业门户网站 | 真空泵维修保养,普发,阿尔卡特,荏原,卡西亚玛,莱宝,爱德华干式螺杆真空泵维修-东莞比其尔真空机电设备有限公司 | 热熔胶网膜|pes热熔网膜价格|eva热熔胶膜|热熔胶膜|tpu热熔胶膜厂家-苏州惠洋胶粘制品有限公司 | 碳纤维复合材料制品生产定制工厂订制厂家-凯夫拉凯芙拉碳纤维手机壳套-碳纤维雪茄盒外壳套-深圳市润大世纪新材料科技有限公司 | 探鸣起名网-品牌起名-英文商标起名-公司命名-企业取名包满意 | hdpe土工膜-防渗膜-复合土工膜-长丝土工布价格-厂家直销「恒阳新材料」-山东恒阳新材料有限公司 ETFE膜结构_PTFE膜结构_空间钢结构_膜结构_张拉膜_浙江萬豪空间结构集团有限公司 | 厚壁钢管-厚壁无缝钢管-小口径厚壁钢管-大口径厚壁钢管 - 聊城宽达钢管有限公司 | 盘装氧量分析仪-防爆壁挂氧化锆分析仪-安徽吉帆仪表有限公司 | 合肥升降机-合肥升降货梯-安徽升降平台「厂家直销」-安徽鼎升自动化科技有限公司 | 点焊机-缝焊机-闪光对焊机-电阻焊设备生产厂家-上海骏腾发智能设备有限公司 | PC构件-PC预制构件-构件设计-建筑预制构件-PC构件厂-锦萧新材料科技(浙江)股份有限公司 | 沙盘模型公司_沙盘模型制作公司_建筑模型公司_工业机械模型制作厂家 | 山东柳店新能源科技有限公司|