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

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

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

瀏覽:134日期: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 解決在微信內置瀏覽器中調用支付寶支付的情況就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: 微信 支付寶
相關文章:
主站蜘蛛池模板: 智能案卷柜_卷宗柜_钥匙柜_文件流转柜_装备柜_浙江福源智能科技有限公司 | 凝胶成像系统(wb成像系统)百科-上海嘉鹏 | 美国PARKER齿轮泵,美国PARKER柱塞泵,美国PARKER叶片泵,美国PARKER电磁阀,美国PARKER比例阀-上海维特锐实业发展有限公司二部 | 智能化的检漏仪_气密性测试仪_流量测试仪_流阻阻力测试仪_呼吸管快速检漏仪_连接器防水测试仪_车载镜头测试仪_奥图自动化科技 | 北京成考网-北京成人高考网 | 爱佩恒温恒湿测试箱|高低温实验箱|高低温冲击试验箱|冷热冲击试验箱-您身边的模拟环境试验设备技术专家-合作热线:400-6727-800-广东爱佩试验设备有限公司 | 【ph计】|在线ph计|工业ph计|ph计厂家|ph计价格|酸度计生产厂家_武汉吉尔德科技有限公司 | 天津蒸汽/热水锅炉-电锅炉安装维修直销厂家-天津鑫淼暖通设备有限公司 | 过滤器_自清洗过滤器_气体过滤器_苏州华凯过滤技术有限公司 | 家德利门业,家居安全门,别墅大门 - 安徽家德利门业有限公司 | 泰国试管婴儿_泰国第三代试管婴儿费用|成功率|医院—新生代海外医疗 | 微型气象仪_气象传感器_防爆气象传感器-天合传感器大全 | 双吸泵,双吸泵厂家,OS双吸泵-山东博二泵业有限公司 | 密封圈_泛塞封_格莱圈-[东莞市国昊密封圈科技有限公司]专注密封圈定制生产厂家 | 变色龙云 - 打包app_原生app_在线制作平台_短链接_ip查询 | 球形钽粉_球形钨粉_纳米粉末_难熔金属粉末-广东银纳官网 | 消泡剂-水处理消泡剂-涂料消泡剂-切削液消泡剂价格-东莞德丰消泡剂厂家 | LCD3D打印机|教育|桌面|光固化|FDM3D打印机|3D打印设备-广州造维科技有限公司 | 特材真空腔体_哈氏合金/镍基合金/纯镍腔体-无锡国德机械制造有限公司 | 超细|超微气流粉碎机|气流磨|气流分级机|粉体改性机|磨粉机|粉碎设备-山东埃尔派粉体科技 | 周口风机|周风风机|河南省周口通用风机厂 | 立式_复合式_壁挂式智能化电伴热洗眼器-上海达傲洗眼器生产厂家 理化生实验室设备,吊装实验室设备,顶装实验室设备,实验室成套设备厂家,校园功能室设备,智慧书法教室方案 - 东莞市惠森教学设备有限公司 | 精雕机-火花机-精雕机 cnc-高速精雕机-电火花机-广东鼎拓机械科技有限公司 | 高低温万能试验机_拉力试验机_拉伸试验机-馥勒仪器科技(上海)有限公司 | 专业甜品培训学校_广东糖水培训_奶茶培训_特色小吃培训_广州烘趣甜品培训机构 | OpenI 启智 新一代人工智能开源开放平台 | 中国玩具展_玩具展|幼教用品展|幼教展|幼教装备展 | 净气型药品柜-试剂柜-无管道净气型通风柜-苏州毕恩思 | 翅片管散热器价格_钢制暖气片报价_钢制板式散热器厂家「河北冀春暖气片有限公司」 | 杭州画室_十大画室_白墙画室_杭州美术培训_国美附中培训_附中考前培训_升学率高的画室_美术中考集训美术高考集训基地 | 依维柯自动挡房车,自行式国产改装房车,小型房车价格,中国十大房车品牌_南京拓锐斯特房车 - 南京拓锐斯特房车 | 知企服务-企业综合服务(ZiKeys.com)-品优低价、种类齐全、过程管理透明、速度快捷高效、放心服务,知企专家! | 焊缝跟踪系统_激光位移传感器_激光焊缝跟踪传感器-创想智控 | 防水套管-柔性防水套管-刚性防水套管-上海执品管件有限公司 | 全球化工设备网—化工设备,化工机械,制药设备,环保设备的专业网络市场。 | AGV无人叉车_激光叉车AGV_仓储AGV小车_AGV无人搬运车-南昌IKV机器人有限公司[官网] | 方源木业官网-四川木门-全国木门专业品牌 | 仓储笼_仓储货架_南京货架_仓储货架厂家_南京货架价格低-南京一品仓储设备制造公司 | 玻纤土工格栅_钢塑格栅_PP焊接_单双向塑料土工格栅_复合防裂布厂家_山东大庚工程材料科技有限公司 | 制丸机,小型中药制丸机,全自动制丸机价格-甘肃恒跃制药设备有限公司 | 光泽度计_测量显微镜_苏州压力仪_苏州扭力板手维修-苏州日升精密仪器有限公司 |