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

微信点金计划(服务商角度)

时间:2023/2/17

背景:微信在推出点金计划后,原本window.WeixinJSBridge.invoke方法的回调失效了,需要在微信支付服务商平台|平台开放更多能力,与服务商一起成长这里进行配置,配置流程跟着官方给出的文档一步步进行就好。

一.坑点:

        ①如果想要跳回原来商家页面,必须要根据官方文档配置“商家小票”页面,不然只有自己手动关掉网页。

        ②“商家小票”调试工具里面的,“从业机构商户号”是银行/服务商的商户号,底部的2个单号,可以在微信支付的“账单”里面点进去查询到。

        ③“商家小票”页面是微信用iframe嵌入的一个模块,要注意是否根据文档要求,将微信设置为了白名单(我们这里是通过nginx配置)

二.前端代码

tips:因为各种原因,手撸了一个html页面,其实用vue页面也是可以的

​
<!-- 此页面是放到服务器下,可以直接访问,供微信支付回调 -->
<!DOCTYPE html>
<html lang="cn"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="referrer" content="origin"><meta name="viewport"content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /><title>砼联数科支付</title><script type="text/javascript" charset="UTF-8" src="https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js"></script><script src="./jsapiResult/jsFiles/vue.js"></script><script type="text/javascript" src="./jsapiResult/jsFiles/element.js"></script><script type="text/javascript" src="./jsapiResult/jsFiles/axios.js"></script><link rel="stylesheet" href="./jsapiResult/cssFiles/jsapiResult.css"><link rel="stylesheet" href="./jsapiResult/cssFiles/theme.css">
</head><body><div class="gold-pay-result" id="goldPayResult"><div class="top-logo middle-center"><el-button type="success" icon="el-icon-check" circle size="large"></el-button></div><div class="custom-name middle-center">{{ pageInfo.payerName }}</div><div class="co-line vertical-center"><div class="left-title">订单状态</div><div class="right-info">支付成功</div></div><div class="co-line vertical-center"><div class="left-title">支付流水尾号</div><div class="right-info">{{pageInfo.txnNo}}</div></div><div class="cut-line"></div><div class="co-line vertical-center"><div class="left-title">支付总额</div><div class="right-info money-cl">¥{{ pageInfo.amount }}</div></div><div class="bottom-btn middle-center"><el-button class="return-btn" type="primary" icon="el-icon-position" size="small" @click="backBusiness">返回商家平台</el-button></div><script>let app = new Vue({el: '#goldPayResult',data: {pageInfo: {payerName: '',txnNo: '',amount: ''}},mounted: function () {this.openCustomPage();this.getTraderInfo();},methods: {getTraderInfo() {const out_trade_no = this.glGetUrlParam('out_trade_no');const sub_mch_id = this.glGetUrlParam('sub_mch_id');const check_code = this.glGetUrlParam('check_code');// 判断如果字段都有值try {if (out_trade_no && sub_mch_id && check_code) {let url = "";let postData = {pmcNo: sub_mch_id}axios({method: 'POST',url: url, //   data: postData, //加密,headers: {"Content-Type": "application/json"},}).then((res) => {_re = res.data.message;_re.txnNo = _re.txnNo.substr(-4);Object.assign(this.pageInfo, _re);}).catch(err => {this.$message.error('调取信息接口异常!')})} else {this.$message.error('微信订单信息缺失!')}} catch (error) {this.$message.error('获取订单基本信息异常!');}},backBusiness() {// 跳转到指定的h5页面/小程序,智选平台要做特殊化处理,小程序直接跳网页let _addr = "";let jsapiJump = [];if (this.pageInfo.tradeType == 'JSAPI' || jsapiJump.indexOf(this.pageInfo.channelNo) !=-1) {_addr = this.pageInfo.jumpAddress1;} else {_addr =``  //跳小程序}this.$message.info(`即将跳回的地址信息为:${_addr}`);const mchData = {action: "jumpOut",jumpOutUrl: _addr,}; // 跳转到指定的页面并携带参数const postData = JSON.stringify(mchData);window.parent.postMessage(postData, "*");},openCustomPage() {let mchData = {action: 'onIframeReady',displayStyle: 'SHOW_CUSTOM_PAGE'}let postData = JSON.stringify(mchData)window.parent.postMessage(postData, '*')},glGetUrlParam(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配var context = "";if (r != null)context = decodeURIComponent(r[2]);reg = null;r = null;return context == null || context == "" || context == "undefined" ? "" : context;}},})</script>
</body></html>​

引入的头部文件,除了./jsapiResult/cssFiles/jsapiResult.css这个文件外,其他直接去网上扒拉资源就好,我这里都是自己下载下来放置为静态文件调用,这个样式文件如下

.gold-pay-result {padding: 10px 20px 20px 20px;width: calc(100% - 40px);font-size: 14px;margin-bottom: 10px;background: white;
}.gold-pay-result .top-logo {width: 100%;margin: 10px 0px;
}.gold-pay-result .success-cl {font-size: 20px;font-weight: bold;
}.gold-pay-result .custom-name {width: 100%;margin: 10px 0px 25px 0px;
}.gold-pay-result .cut-line {height: 2px;width: 100%;margin: 5px 0px;border-bottom: 1px solid lightgray;
}.gold-pay-result .co-line {width: 100%;margin: 12px 0px;
}.gold-pay-result .left-title {color: gray;
}.gold-pay-result .return-btn {font-size: 14px;margin-top: 15px;
}.gold-pay-result .right-info {margin-left: auto;
}.gold-pay-result .money-cl {font-size: 18px;}.gold-pay-result.bottom-btn {width: 100%;margin-top: 25px;
}.vertical-center {display: flex;align-items: center;
}.middle-center {display: flex;align-items: center;justify-content: center;
}

 三.因为微信的前端回调没有跳转小程序的方法,所以设置了一个空白页面,先跳转到空白页面,空白页面再跳转到小程序,空白页面代码如下

<!-- 小程序的结果页面,空白页,主要负责跳转回小程序 -->
<template><div class="mini-pay-result full-page"></div>
</template><script setup>
import { onMounted } from "vue";
import { getUrlParam } from "@/utils/tools.js"
import { ElMessage } from 'element-plus';
onMounted(() => {jumpToMiniPro();
});function jumpToMiniPro() {try {let params = getUrlParam('jumpAddress');if (!params.jumpAddress) {ElMessage.error('获取小程序跳转地址失败,请关闭后重新进入!');return;}wx.miniProgram.redirectTo({ url: params.jumpAddress });} catch (error) {ElMessage.error('小程序跳转失败,即将关闭当前页');setTimeout(() => {window.close();}, 2000);}
}
</script><style lang="scss" scoped>
.mini-pay-result {}
</style>

getUrlParam方法就是一个很普通的获取url参数的方法

wx.miniProgram.redirectTo需要引入

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

这个文件,我目前是放置在index.html里面

相关文章:

微信点金计划(服务商角度)

时间&#xff1a;2023/2/17 背景&#xff1a;微信在推出点金计划后&#xff0c;原本window.WeixinJSBridge.invoke方法的回调失效了&#xff0c;需要在微信支付服务商平台&#xff5c;平台开放更多能力&#xff0c;与服务商一起成长这里进行配置&#xff0c;配置流程跟着官方给…...

2023年美赛 MCM B题 重新构想马赛马拉岛

背景肯尼亚的野生动物保护区最初主要是为了保护野生动物和其他自然资源。肯尼亚议会于2013 年通过了《野生动物保护和管理法》&#xff0c;以提供更公平的资源共享&#xff0c;并允许进行替代的、以社 区为基础的管理工作[1].此后&#xff0c;肯尼亚增加了修正案&#xff0c;以…...

指标体系的应用与搭建

一、指标体系的介绍 体系泛指一定范围内同类事物按照一定的顺序或内在联系而组成的整体。指标体系也一样&#xff0c;指的是不同指标按照一定的顺序及内部联系而组成的整体。此外&#xff0c;在指标体系中&#xff0c;除了以应用为出发点搭建&#xff0c;还会加入使用指南&…...

固态继电器的五大优势

固态继电器的优点和五个关键优势&#xff0c;现代电气控制系统因二极管、晶体管和晶闸管等固态器件的发明而得到极大的增强。对于加热器和电机等大负载设备&#xff0c;固态继电器可能比传统的机械继电器具有巨大的优势。 虽然并非适用于所有情况&#xff0c;但它们具有许多吸引…...

特征检测之HOG特征算法详解及Opencv接口使用

1. HOG特征简介 特征描述符是图像或图像补丁的表示形式&#xff0c;它通过提取有用信息并丢弃无关信息来简化图像。 通常&#xff0c;特征描述符将大小W x H x 3&#xff08;通道&#xff09;的图像转换为长度为n的特征向量/数组。对于 HOG 特征描述符&#xff0c;输入图像的…...

一款好的低代码开发平台应该是什么样?

一款好的低代码开发平台应该是什么样&#xff1f; 以企业级应用构建来讲&#xff0c;完成一个应用复杂度随着技术的进步、需求的细化、业务要求的变化并不是逐渐降低&#xff0c;而是逐渐提升。用户想要有更好的体验&#xff0c;复杂度更是成倍提升。 基于此&#xff0c;低代码…...

基于Spring cloud搭建oauth2

1&#xff0c;OAuth2.0简介 OAuth&#xff08;开发授权&#xff09;是一个开放标准&#xff0c;允许用户授权第三方应用访问他们存储在另外的服务提供者上的信息&#xff0c;而不需要将用户名和密码提供给第三方应用或分享他们数据的所有内容。 OAuth2.0是OAuth的延续&#xf…...

实现一个小程序分享图 wxml2canvas

我们经常会遇上动态生成海报的需求&#xff0c;而在小程序中&#xff0c;生成图片非Canvas莫属。但是在实际工作当中&#xff0c;为了追求效率&#xff0c;我们会不可避免地去使用一些JS插件&#xff0c;而 wxml-to-canvas 就是一款官方推荐且非常优秀的插件&#xff0c;它可以…...

基于matlab设计x波段机载SAR系统

一、前言此示例说明如何设计在 X 波段工作的合成孔径雷达 &#xff08;SAR&#xff09; 传感器并计算传感器参数。SAR利用雷达天线在目标区域上的运动来提供目标区域的图像。当SAR平台在目标区域上空行进时&#xff0c;当脉冲从雷达天线发送和接收时&#xff0c;会产生合成孔径…...

WPF学习:Slider — 冒泡显示值

想做一个下图所示的Slider&#xff0c;以冒泡的方式显示其Value值&#xff0c;该怎么做呢&#xff1f; 功能要求&#xff0c;当鼠标放在滑块上的时候&#xff0c;冒“泡”显示值&#xff1b;当滑块移动的时候&#xff0c;“泡”跟随移动。 看似简单的功能&#xff0c;但要完美…...

Vue实战第4章:主页设计之中部内容设计

前言 本篇在讲什么 接上篇文章&#xff0c;我们制作了一个自定义的网页导航栏&#xff0c;本篇文章我们简单制作一个内容页 仅介绍简单的应用&#xff0c;仅供参考 本篇适合什么 适合初学Vue的小白 适合想要自己搭建网站的新手 适合没有接触过vue-router的前端程序 本篇…...

数据结构代码总结(C语言实现)

目录如何应对数据结构的代码题&#xff1f;采取的学习流程①首先对C语言的语法的熟悉②学习掌握基本代码的写法&#xff0c;做到熟练2.1插入排序2.2快速排序2.3二分查找2.4树的遍历③跟着网上视频开始熟悉对一些问题的解答④结合真题的代码&#xff0c;寻找其中的结题规律如何应…...

zookeeper 复习 ---- chapter04

zookeeper 复习 ---- chapter04zookeeper 的精髓是什么&#xff1f; 1&#xff1a;它有四个节点类型 持久无序的节点 临时无序的节点 持久有序的节点 临时有序的节点 临时的节点的特征&#xff1a;当客户端和服务器端断开连接&#xff0c;当前客户端创建的节点被服务器端自动删…...

thinkphp6.0连接MYSQL

目录8.连接多个数据库7.多级控制器不存在6.分页5.非法请求4.关于路由**3.初体验页面****2.加入fileheader添加注释****1.配置mysql0. 官方开发手册一些网址 http://127.0.0.1:8000/index 原桌面 http://127.0.0.1:8000/hello/fsh hello,fsh&#xff08;index中hello方法&#x…...

商家必读!超店有数分享,tiktok达人营销变现如何更快一步?

近几年来&#xff0c;“粉丝经济”发展越来越迅猛&#xff0c;“网红带货”已经成为了一种营销的方式。这种方式让商家能基于达人的影响下迅速抢占自己的私域流量池。消费者会基于对达人的信任&#xff0c;购买达人推荐的产品。达人效应可以助力品牌走出营销困境。如果商家想要…...

操作系统(day11)--快表,两级页表

具有快表的地址变换机构 时间局限性&#xff1a;会有大量连续的指令需要访问同一个内存块的数据的情况&#xff08;程序中的循环&#xff09; 空间局限性&#xff1a;一旦程序访问了某个存储单元&#xff0c;在不久之后&#xff0c;其附近的存储单元也很有可能被访问。&#xf…...

预告| 亮点抢先看!第四届OpenI/O启智开发者大会主论坛24日启幕!

2023年2月24日至25日&#xff0c;第四届OpenI/O启智开发者大会将在深圳隆重举行。“算网筑基、开源启智、AI赋能”作为今年大会的主题&#xff0c;吸引了全球业界关注的目光。大会集结中国算力网资源基座、开源社区治理及AI开源生态建设、国家级开放创新应用平台、NLP大模型等前…...

猪齿鱼(Choerodon UI )的通用提交的封装 —— 两种方案,A.使用dataSet的自身的submit,B.使用axios.post来提交

submit组件&#xff08;otherSubmit/axiosSubmit&#xff09; 一、背景与简介 1、首先我们申请表提交&#xff0c;分为【保存】提交与【其他】提交&#xff1b; 1.1【保存】提交&#xff0c;要求表单必须要有变更&#xff0c;DataToJSON默认为dirty&#xff08;只转换变更的…...

CISCN(Web Ezpentest)GC、序列化、case when

目录 REGEXP的一个点&#xff08;正则&#xff09; like&#xff08;默认不区分大小写&#xff09; 当禁用了空格 regexp&#xff0c;like的区分大小写的使用方法 [CISCN 2022 初赛]ezpentest 卡点 2022 HFCTF babysql 最近又学到了一道新知识&#xff0c;case when的错…...

OSG三维渲染引擎编程学习之五十七:“第六章:OSG场景工作机制” 之 “6.1 OSG访问器”

目录 第六章 OSG场景工作机制 6.1 OSG访问器 6.1.1 访问器模式 6.1.2 osg::NodeVisitor 6.1.3 访问器示例...

Python3 输入和输出实例及演示

在前面几个章节中&#xff0c;我们其实已经接触了 Python 的输入输出的功能。本章节我们将具体介绍 Python 的输入输出。 输出格式美化 Python两种输出值的方式: 表达式语句和 print() 函数。 第3种方式是使用文件对象的 write() 方法&#xff0c;标准输出文件可以用 sys.std…...

召回-回忆录(持续更新)

0.召回方法 词召回 swing、itemCF 缺点&#xff1a; 有冷启动问题不是全局召回&#xff0c;冷门活动难以得到召回结果容易召回过多的头部热门活动 向量召回 参考文献&#xff1a; 经典推荐算法学习&#xff08;七&#xff09;| Graph Embedding技术学习 | 从DeepWalk到No…...

1243. 糖果/状态压缩dp【AcWing】

1243. 糖果 糖果店的老板一共有 M种口味的糖果出售。 为了方便描述&#xff0c;我们将 M种口味编号 1∼M。 小明希望能品尝到所有口味的糖果。 遗憾的是老板并不单独出售糖果&#xff0c;而是 K颗一包整包出售。 幸好糖果包装上注明了其中 K颗糖果的口味&#xff0c;所以小…...

【Spring Cloud Alibaba】001-单体架构与微服务架构

【Spring Cloud Alibaba】001-单体架构与微服务 文章目录【Spring Cloud Alibaba】001-单体架构与微服务一、单体架构1、单体应用与单体架构2、单体应用架构图3、单体架构优缺点优点缺点二、微服务1、微服务的“定义”2、微服务的特性3、微服务架构图4、微服务的优缺点优点缺点…...

Renderer 使用材质分析:materials、sharedMaterials 及 MaterialPropertyBlock

一、materials 与 sharedMaterials 1.1 使用上的区别与差异 Unity 开发时&#xff0c;在 C# 中通过 Renderer 取材质操作是非常常见的操作&#xff0c;Renderer 有两种常规获取材质的方式&#xff1a; sharedMaterials&#xff1a;可以理解这个就是原始材质&#xff0c;所有使…...

java学习----网络编程

网络编程入门 网络编程概述 计算机网络 ​ 计算机网络是指地理位置不同的具有独立功能的计算机及其外部设备&#xff0c;通过通信线路连接起来&#xff0c;在网络操作系统&#xff0c;网络管理软件及网络通信协议的管理协调下&#xff0c;实现资源共享和信息传递的计算机系统…...

这些「误区」99%的研发都踩过

意识不到误区的存在最为离谱&#xff1b; 01生活中&#xff0c;职场上&#xff0c;游戏里&#xff0c;都少不了正面对喷过&#xff1a;意识太差&#xff1b; 在个人的认知中意识即思维&#xff0c;意识太差即思维中存在的误区比较多&#xff1b; 每个人或多或少都存在思维上的…...

Bi系统跟数据中台的区别是什么?

随着数据时代的发展&#xff0c;BI分析是当今数据时代必不可少的能力之一。BI系统通过系统化产品化的方法&#xff0c;能够大幅降低数据的获取成本、提升数据使用效率。同时借助可视化、交互式的操作&#xff0c;可以高效支持业务的分析及发展。 BI如此火热&#xff0c;随之而…...

微信小程序反编译方法分享

文章目录一、前言二、准备工作&#xff08;一&#xff09;安装Nodejs&#xff08;二&#xff09;解密和逆向工具三、小程序缓存文件解密&#xff08;一&#xff09;定位小程序缓存路径&#xff08;二&#xff09;源码解密&#xff08;三&#xff09;源码反编译四、小结一、前言…...

有了这些接口测试用例+工具,测试效率想不提升都难

写在前面&#xff1a;在日常开发过程中&#xff0c;有人做前端开发&#xff0c;有人负责后端开发。接口的主要作用就是连接前后台。但是&#xff0c;由于前端和后端开发的速度可能不一样&#xff0c;尤其是后端开发好了&#xff0c;但前端还未开发。这种时候我们需要做接口测试…...

国内著名平面设计师的个人网站/seo薪资seo

前言我于2020年开始接触、使用Vercel(ZEIT)的&#xff0c;要是我能早点知道的话&#xff0c;我也不会煞费苦心去优化Github上的个人博客的加载速度问题&#xff0c;当然国内也有类似Github的代码托管网站&#xff0c;如Gitee(码云)&#xff0c;Coding(被腾讯收购&#xff0c;还…...

企业做门户网站的重要性/北京seo包年

Gitee 七周年的庆典仍在火热进行中经过小剧场第一弹的洗礼你是否对自己的代码能力又多了一分自信呢现在小剧场第二弹正式向你发出邀请????码力考验&#xff1a;issue 悬赏令正式发布????????????通过解决开源软件 issue&#xff08;修改bug 、新增功能等&#…...

做网站可以先做再给钱吗/佛山今日头条

高性能负载均衡集群HAProxy实战视频课程13节4小时7分钟课程目标&#xff1a;欢迎大家加入 51CTO学院Linux交流群575837909&#xff0c;与喜欢学习Linux小伙伴们做朋友&#xff0c;一起为梦想增值。高性能负载均衡集群HAProxy实战视频课程1、四层和七层负载均衡的区别2、HAProxy…...

工邦邦官网/杭州seo俱乐部

IE的脚本错误对话框非常不友好,无法copy详细信息 (至少IE7是这样)。发现Firefox的Tools > Error Console 中也可以看到错误信息而且可以Copy! 调试程序时&#xff0c;在VS中将默认浏览器设置为Firefox就可以调试并可以Copy脚本错误信息了...

网站安装教程/郑州发布最新通告

目录 0 分区表 1 分区表基本操作 2 二级分区 3 动态分区调整 0 分区表 分区表实际上就是对应一个HDFS文件系统上的独立的文件夹&#xff0c;该文件夹下是该分区所有的数据文件。Hive中的分区就是分目录&#xff0c;把一个大的数据集根据业务需要分割成小的数据集。在查询…...

广州网站建设推荐/百度上如何发广告

最近工作中接到一个需求&#xff0c;需要对一个MQ消息队列进行性能测试&#xff0c;测试其消费能力&#xff0c;开发提供了一个dubbo服务来供我调用发送消息。 这篇博客&#xff0c;介绍下如何利用jmeter来测试dubbo接口&#xff0c;并进行性能测试。。。 一、Dubbo简介 dubbo是…...