当前位置: 首页 > news >正文

uniapp h5支付宝支付

 第1种,创建个div插入到body中

const div = document.createElement('div');
div.innerHTML = 后端返回的form表单字符串;
document.body.appendChild(div);
document.forms[0].submit();
div.remove();

第2种

<template>
<view v-html="formAliPay"></view>
</template><script>
this.formAliPay = 后端返回的form表单字符串;
this.$nextTick(() => {document.forms['punchout_form'].submit(); //punchout_form是支付宝表单的name
});
</script>

发现一个问题。在公众号中打开支付页,跳转到支付宝支付直接显示出url地址,而通过聊天中发的链接在微信中打开是跳到中转页面。可以参考下支付宝给的解决方案小程序文档 - 支付宝文档中心,中间加个跳转页面而不使用官方默认的跳转。

* 官方例子中有个参数bizcontent,名称有误,应该是biz_content

将支付宝demo中的ap.js和pay.htm复制到项目中,在b.pay()中改下路径。

如果在vue中使用import导入需要改下ap.js

//ap_vue.js
export function alipay() {var b = {};var a = {};var c = "abc123";a.PADCHAR = "=";a.ALPHA = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";a.makeDOMException = function() {var f, d;try {return new DOMException(DOMException.INVALID_CHARACTER_ERR)} catch (d) {var c = new Error("DOM Exception 5");c.code = c.number = 5;c.name = c.description = "INVALID_CHARACTER_ERR";c.toString = function() {return "Error: " + c.name + ": " + c.message};return c}};a.getbyte64 = function(e, d) {var c = a.ALPHA.indexOf(e.charAt(d));if (c === -1) {throw a.makeDOMException()}return c};a.decode = function(f) {f = "" + f;var j = a.getbyte64;var h, e, g;var d = f.length;if (d === 0) {return f}if (d % 4 !== 0) {throw a.makeDOMException()}h = 0;if (f.charAt(d - 1) === a.PADCHAR) {h = 1;if (f.charAt(d - 2) === a.PADCHAR) {h = 2}d -= 4}var c = [];for (e = 0; e < d; e += 4) {g = (j(f, e) << 18) | (j(f, e + 1) << 12) | (j(f, e + 2) << 6) | j(f, e + 3);c.push(String.fromCharCode(g >> 16, (g >> 8) & 255, g & 255))}switch (h) {case 1:g = (j(f, e) << 18) | (j(f, e + 1) << 12) | (j(f, e + 2) << 6);c.push(String.fromCharCode(g >> 16, (g >> 8) & 255));break;case 2:g = (j(f, e) << 18) | (j(f, e + 1) << 12);c.push(String.fromCharCode(g >> 16));break}return c.join("")};a.getbyte = function(e, d) {var c = e.charCodeAt(d);if (c > 255) {throw a.makeDOMException()}return c};a.encode = function(f) {if (arguments.length !== 1) {throw new SyntaxError("Not enough arguments")}var g = a.PADCHAR;var h = a.ALPHA;var k = a.getbyte;var e, j;var c = [];f = "" + f;var d = f.length - f.length % 3;if (f.length === 0) {return f}for (e = 0; e < d; e += 3) {j = (k(f, e) << 16) | (k(f, e + 1) << 8) | k(f, e + 2);c.push(h.charAt(j >> 18));c.push(h.charAt((j >> 12) & 63));c.push(h.charAt((j >> 6) & 63));c.push(h.charAt(j & 63))}switch (f.length - d) {case 1:j = k(f, e) << 16;c.push(h.charAt(j >> 18) + h.charAt((j >> 12) & 63) + g + g);break;case 2:j = (k(f, e) << 16) | (k(f, e + 1) << 8);c.push(h.charAt(j >> 18) + h.charAt((j >> 12) & 63) + h.charAt((j >> 6) & 63) + g);break}return c.join("")};b.pay = function(d) {var c = encodeURIComponent(a.encode(d));location.href = "./static/pay.htm?goto=" + c};b.decode = function(c) {return a.decode(decodeURIComponent(c));}return b;
}
import {alipay} from '@/static/ap_vue.js';if(判断在微信浏览器中){this.$nextTick(() => {var gotoUrl = document.getElementsByName('punchout_form')[0].getAttribute('action') + '&biz_content=' + encodeURIComponent(document.getElementsByName('biz_content')[0].value);alipay().pay(gotoUrl)});
}

    

相关文章:

uniapp h5支付宝支付

第1种&#xff0c;创建个div插入到body中 const div document.createElement(div); div.innerHTML 后端返回的form表单字符串; document.body.appendChild(div); document.forms[0].submit(); div.remove(); 第2种 <template> <view v-html"formAliPay"…...

探索YOLO技术:目标检测的高效解决方案

第一章&#xff1a;计算机视觉中图像的基础认知 第二章&#xff1a;计算机视觉&#xff1a;卷积神经网络(CNN)基本概念(一) 第三章&#xff1a;计算机视觉&#xff1a;卷积神经网络(CNN)基本概念(二) 第四章&#xff1a;搭建一个经典的LeNet5神经网络(附代码) 第五章&#xff1…...

vmware虚拟机安装使用教程【视频】

vmware虚拟机安装使用教程【视频】 VMware是一款强大的桌面级虚拟化软件&#xff0c;它允许用户在单个计算机上同时运行多个操作系统&#xff0c;每个操作系统都被称为一个虚拟机&#xff08;VM&#xff09;。这种技术不仅方便了软件测试、系统开发&#xff0c;还便于资源管理&…...

2025系统架构师(一考就过):案例之三:架构风格总结

软件架构风格是描述某一特定应用领域中系统组织方式的惯用模式&#xff0c;按照软件架构风格&#xff0c;物联网系统属于&#xff08; &#xff09;软件架构风格。 A:层次型 B:事件系统 C:数据线 D:C2 答案&#xff1a;A 解析&#xff1a; 物联网分为多个层次&#xff0…...

渗透测试实验

1、seacmsv9注入管理员密码 获取管理员账号&#xff08;name&#xff09; http://www.test2.com/comment/api/index.php?gid1&page2&rlist[]%27,%20extractvalue(1,%20concat_ws(0x20,%200x5c,(select%20(name)from%20sea_admin))),%27 2、获取管理员密码 http://www…...

CCA社群共識聯盟正式上線

2025年2月25日——BAF區塊鏈產業聯盟基金會旗下的CCA社群共識聯盟業務於今日正式全網啟動。作為區塊鏈行業的創新平台,CCA社群共識聯盟秉承誠信、公平、共贏的核心原則,致力於為全球社群夥伴打造一個更加開放、透明與高效的合作生態,推動區塊鏈產業的健康發展。 創新平台,助力…...

京东-零售-数据研发面经【附答案】

近期&#xff0c;有参加春招的同学和我交流了他的面试历程&#xff0c;我针对这些内容进行了细致的总结与梳理&#xff0c;并在此分享出来&#xff0c;希望能助力大家学习与借鉴。 1.八股文 1&#xff09;HashMap的底层原理是什么【见V6.0面试笔记 Java基础部分第19题】 2&am…...

python中的JSON数据格式

文章目录 什么是json主要功能Python数据和Json数据的相互转化 什么是json JSON是一种轻量级的数据交互格式。可以按照JSON指定的格式去组织和封装数据。JSON本质上是一个带有特定格式的字符串。 主要功能 json就是一种在各个编程语言中流通的数据格式&#xff0c;负责不同编…...

ubuntu+aarch64+dbeaver安装【亲测,避坑】

一&#xff1a;访问 Oracle JDK&#xff0c;下载jdk-11.0.26_linux-aarch64_bin.tar.gz 二&#xff1a;解压 tar -xvzf jdk-11.0.20_linux-x64_bin.tar.gz三&#xff1a;将解压后的 JDK 文件夹移动到 /usr/lib/jvm 目录 sudo mv jdk-11.0.26 /usr/lib/jvm/四&#xff1a;进入…...

Java 大视界 -- 基于 Java 的大数据机器学习模型压缩与部署优化(99)

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…...

vscode中使用PlatformIO创建工程加载慢

最近使用vscodeplatformIO开发esp32s3&#xff0c;第一次创建工程时加载速度很慢&#xff0c;查询资料解决问题&#xff0c;特此记录。 1.新建环境变量pyhton 此电脑-属性-高级系统设置中&#xff08;直接搜索高级系统设置也行&#xff09;&#xff0c;添加系统变量&#xff…...

微信小程序数据绑定与事件处理:打造动态交互体验

在上一篇中&#xff0c;我们学习了如何搭建微信小程序的开发环境并创建了一个简单的“Hello World”页面。然而&#xff0c;一个真正的小程序不仅仅是静态内容的展示&#xff0c;它需要与用户进行动态交互。本文将深入探讨微信小程序中的数据绑定和事件处理机制&#xff0c;通过…...

力扣 下一个排列

交换位置&#xff0c;双指针&#xff0c;排序。 题目 下一个排列即在组成的排列中的下一个大的数&#xff0c;然后当这个排列为降序时即这个排列最大&#xff0c;因为大的数在前面&#xff0c;降序排列的下一个数即升序。所以&#xff0c;要是想找到当前排列的下一个排列&…...

JavaWeb 学习笔记

前端基础 HTML-CSS <!doctype html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport"content"widthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0…...

Linux7-线程

一、前情回顾 chdir();功能&#xff1a; 函数用于改变当前进程的工作目录。 参数&#xff1a;路径&#xff08;Path&#xff09;&#xff1a;这是一个字符串参数&#xff0c;表示要切换到的目标目录的路径。 返回值&#xff1a; 成功&#xff1a;在成功改变当前工作目…...

在线VS离线TTS(语音合成芯片)有哪些优势-AIOT智能语音产品方案

离线 TTS 存在语音质量欠佳、音色选择有限、语言支持单一更新困难、占用资源多、适应性差、难以个性化定制等痛点 01更新维护困难 由于是离线模式&#xff0c;难以及时获取最新的语音数据和算法更新&#xff0c;无法得到持续改进。 02占用本地资源 需要在设备本地存储较大的…...

结构型模式 - 代理模式 (Proxy Pattern)

结构型模式 - 代理模式 (Proxy Pattern) 代理模式是一种结构型设计模式&#xff0c;它允许通过代理对象来控制对另一个对象&#xff08;目标对象&#xff09;的访问。代理对象充当目标对象的接口&#xff0c;客户端通过代理对象间接访问目标对象。 分为两大类 静态代理&#…...

el-select滚动获取下拉数据;el-select滚动加载

el-select下拉获取数据 1.解决问题2.封装MyScrollSelect组件3.使用MyScrollSelect组件 1.解决问题 场景&#xff1a;下拉数据量过大&#xff0c;后端提供一个分页查询接口&#xff1b;需要每次滚动加载下一页的下拉数据 且单选的状态&#xff0c;需要支持回显&#xff0c;通过n…...

HTTP GET 请求示例

鸿蒙操作系统&#xff08;HarmonyOS&#xff09;是华为公司自主研发的面向全场景的分布式操作系统&#xff0c;旨在为用户提供一个安全、流畅且跨设备无缝连接的体验。它支持多种终端设备&#xff0c;如智能手机、平板电脑、智能电视、汽车等&#xff0c;并实现了模块化解耦&am…...

简单理解Oracle中的latch

可以用一个小卖部抢购的例子来理解 Oracle 数据库中的 Latch&#xff1a; 1、 什么是 Latch&#xff1f; 打个比方&#xff0c;假设数据库的某个内存区域&#xff08;比如缓存的数据块&#xff09;是小卖部货架上的最后一包辣条&#xff0c;Latch 就像是货架前的一个狭窄通道&a…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

Kafka主题运维全指南:从基础配置到故障处理

#作者&#xff1a;张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1&#xff1a;主题删除失败。常见错误2&#xff1a;__consumer_offsets占用太多的磁盘。 主题日常管理 …...

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...