前端 h5实现自带浏览器支付功能

2023-11-11

前端需要做的

这里使用vue 中的 mixin
第一步获取订单号,调用后端的接口获取订单号
在这里插入图片描述
第二步:调用后端的接口,后端给返回一个url地址,然后打开这个地址(这个地址是调用微信支付的地址,打开即调用)
在这里插入图片描述
这里使用decodeURIComponent的作用为了转码
支付成功之后需要返回原来的页面。这里需要区分一下安卓或者苹果
苹果手机会先跳转到微信里面,安卓的不需要跳转到微信内部,当前浏览器可以直接调起
所以需要再后端返回的url末尾加上redirect_url=要返回的地址(我目前开发只是再苹果端使用,可能安卓这样用也没有大碍)
参考
在这里插入图片描述
判断安卓 ios

 let ran = navigator.userAgent
              let isAndroid = ran.indexOf('Android') > -1 || ran.indexOf('Linux') > -1
              let isIOS = !!ran.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)

              if (isAndroid) {
                // 安卓代码块
                window.location.href = ress.data
              }
              if (isIOS) {
                // ios代码块
                window.location.href = redirect
              }

第三步:再调用微信链接的下方循环调用查询支付成功的接口,后端给的接口,成功后移除定时器
在这里插入图片描述
回调函数:可以做一些自己想要的动作(查询接口等)
强调一下如果回调函数没有执行建议加上定时器延迟执行一下
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端 h5实现自带浏览器支付功能 的相关文章

  • 机器学习----感知器

    1 深度学习 人工智能领域 有一个方法叫机器学习 在机器学习这个方法里 有一类算法叫神经网络 神经网络如下图所示 1 一个圆圈就是一个神经元 神经元就是感知器 2 输入层 隐藏层 输出层 构成神经网络 而隐藏层大于2的神经网络 就是深度神经
  • BDA初级分析——先导课

    思考题 假设你是三只松鼠营销团队的一员 美团or抖音 你会如何选择 一 什么是数据分析 数据分析是根据业务问题 对数据进行收集 清洗 处理和建模的过程 用于识别有助于业务的信息 获取关键业务结论并辅助决策制定 业务问题 选择美团还是抖音作为
  • Doris的查询计划

    本文章向大家介绍Doris的查询计划 主要内容包括1 查询计划 2 MySQL查询计划 2 Doris的查询计划 2 聚合 3 关联查询 4 查询 Profile 基本概念 基础应用 原理机制和需要注意的事项等 并结合实例形式分析了其使用技

随机推荐

  • 一步一步在docker中构建CI流程

    docker是什么 引用百度百科的介绍 Docker 是一个开源的应用容器引擎 让开发者可以打包他们的应用以及依赖包到一个可移植的容器中 然后发布到任何流行的 Linux 机器上 也可以实现虚拟化 容器是完全使用沙箱机制 相互之间不会有任何
  • python web开发之WSGI/uwsgi/uWSGI详解

    1 三者的定义 WSGI是一种通信协议 uwsgi是一种传输协议 uWSGI是实现了uwsgi和WSGI两种协议的Web服务器 2 三者的使用场景 WSGI 全称 Web Server Gateway Interface 是为 Python
  • jvm内存使用率linux,linux 查看Java内存使用情况

    linux 查看Java内存使用情况 命令如下 top b n 1 grep java awk print PID 1 mem 6 CPU percent 9 mem percent 10 查看java进程信息 ps ef grep jav
  • shardingsphere搭建使用,以及报错解决(一)

    ShradingJdbc的搭建注意事項 目前使用的Springboot的版本是 2 2 5 使用的shardingsphere的版本是 5 1 0 1 注意ShangrdingSphere的版本之间差异比较大 如果有问题的话尝试使用不同的版
  • double和float的精度和取值范围

    1 取值范围 float和double的范围是由指数的位数来决定的 float的指数位有8位 而double的指数位有11位 分布如下 float 1bit 符号位 8bits 指数位 23bits 尾数位 double 1bit 符号位
  • 第5课 微信小程序常用尺寸单位rpx说明:

    第5课 微信小程序尺寸单位rpx说明 rpx单位 width 750rpx 定义所有手机屏幕宽度都为750rpx px单位 height 750px px单位最好只用于高度 如果定义宽度 手机屏幕不同显示效果也会不同 vw单位 width
  • free java movies_Java Programming: Build a Recommendation System

    Ever wonder how Netflix decides what movies to recommend for you Or how Amazon recommends books We can get a feel for ho
  • 按课程总成绩从高到低排序输出各个学生的信息

    按课程总成绩从高到低排序输出各个学生的信息 20分 题目内容 设计一个结构体类型 包含姓名 学号 语文成绩 数学成绩 英语成绩 输入n个学生的信息 输出按三门课程总成绩从高到低排序的各个学生的姓名 学号和各科成绩 输入格式 首先第1行输入一
  • 数学建模——Matlab画散点图

    scatter x linspace 0 3 pi 200 y cos x rand 1 200 scatter x y plot x linspace 0 3 pi 200 y cos x rand 1 200 plot x y o
  • 树莓派Debian安装Node.js,centOS服务器安装简介

    树莓派的架构 uname a 树莓派4B是基于armv7架构 下载 wget https nodejs org dist v12 16 1 node v12 16 1 linux armv7l tar xz tar xf node v12
  • okhttp之 header详解

    Http 的请求 和 应答包括 header部分 和body部分 以下对header部分进行详解 仅供参考 Request的header注释 Header 注释 示例 Accept 指定客户端能够接收的内容类型 Accept text pl
  • 【6】Docker中部署Nginx

    1 拉取 Nginx 镜像 docker pull nginx latest 就是最新版本的 nginx 版本 2 创建 守护方式的 Nginx 容器 docker run di name nginx p 80 80 nginx 在第5篇
  • Typora设置标题自动添加序号

    Typora设置标题自动添加序号 文件 偏好设置 打开主题文件夹 设置css样式 创建文件base user css initialize css counter write counter reset h1 h1 counter rese
  • HW溯源反制

    windows 跳板服务器溯源 windows security日志 rdp 日志 里面能够拿到security或者rdp日志的ip信息 假如对方跳板是win 的话 顺藤摸瓜可以拿到对方真实连跳板的ip 然后需要注意的是 假如对方用的是随机
  • Tomcat优化集群

    1 分配给Tomcat足够大的内存空间 压解版本中 文件位置 bin catalina bat 这里增加了 set JAVA OPTS Xms1024m Xmx1024m XX PermSize 128M XX MaxPermSize 25
  • 2023通信工程专业毕业设计题目选题推荐

    文章目录 1前言 2 如何选题 2 1 移动通信方向 2 2 嵌入式开发方向 2 3 人工智能方向 2 4 物联网方向 2 5 算法研究方向 2 6 移动应用开发方向 2 7 网络通信方向 2 8 学长作品展示 4 最后 1前言 近期不少学
  • 技术至简-2:分集与交织

    分集 先开分后集合 空间 把数据分到不同的空间进行传输 频率 把数据分到不同的载频进行传输 时间 把数据分到不同的时隙进行传输 交织 分与合数据的方法 按比特的位置连续 分组 按比特的位置间隔 交织
  • Java常用包9

    下面列出了Java常用包 可以查找该包下面的常用类 可以查看该类的常用方法使用源码 模块 项目数 1 rx functions 有 21 个常用类 2 org springframework beans factory config 有 3
  • 20060217: 联合国的人权报告毫无根据?

    那你美国的人权报告就有根据了 环球时报 引用的不是 中韩观点 而是事实 转载于 https www cnblogs com yidinghe archive 2006 02 17 332220 html
  • 前端 h5实现自带浏览器支付功能

    前端需要做的 这里使用vue 中的 mixin 第一步获取订单号 调用后端的接口获取订单号 第二步 调用后端的接口 后端给返回一个url地址 然后打开这个地址 这个地址是调用微信支付的地址 打开即调用 这里使用decodeURICompon