uniapp-微信公众号之微信支付流程

news2024/11/29 10:52:18

文章目录

    • 支付前置条件
    • 微信支付流程
    • 关键代码
      • 一、获取微信用户唯一标识openId
        • 第一步:用户同意授权,获取code
        • 第二步:通过code换取网页授权access_token
        • 第三步:通过access_token获取用户的openId
      • 一、微信公众号支付
        • 第一步:安装jweixin-module模块
        • 第二步:调用后台创建微信支付订单接口,并支付

支付前置条件

` 要在微信公众号中实现微信支付的功能,需要的条件包括:
1、在微信公众平台申请一个微信公众号(服务号)微信公众平台官网地址
2、在微信支付平台开通支付功能微信支付平台地址,建议jsapi微信支付
3、接着在公众号中绑定该商户号
4、申请https域名,并且域名需要备案通过
5、在微信公众平台设置域名的相关信息

提示:这些是在公众号实现微信支付的前提条件,缺一不可,尤其要注意,域名必须是备案通过的

微信支付流程

在这里插入图片描述

关键代码

一、获取微信用户唯一标识openId

微信官网api参考地址

第一步:用户同意授权,获取code
mounted() {
	this.getCode();
},
getCode() {
  let local = window.location.href;
  this.code = this.getUrlCode().code; // 截取code	
 if (this.code == null || this.code == '') {
	location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbb3a1ff0e1be2c71&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
 }else{
		this.$refs.uToast.show({
			type: res.success ===  true ? 'success' : 'error',
			icon: false,
			message: this.code,
		});
	}
	},
	// 截取url中的code方法
	getUrlCode() { 
		var url = location.search;
		var theRequest = new Object()
		if (url.indexOf("?") != -1) {
			var str = url.substr(1)
			var strs = str.split("&")
			for (var i = 0; i < strs.length; i++) {
				theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
			}
		}
		return theRequest
},

尤其注意:跳转回调redirect_uri,应当使用https链接来确保授权code的安全性。

第二步:通过code换取网页授权access_token

在前端通过第一步获取code后,需要后台调用如下接口,获取access_token
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

尤其注意:此接口只能后台调用,前端需将第一步获取的code传递给后台接口

第三步:通过access_token获取用户的openId

在获取到了access_token的前提下,后台通过调用https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN,来获取用户的openId,并将获取到的openId返回给前端

一、微信公众号支付

第一步:安装jweixin-module模块
npm install jweixin-module
第二步:调用后台创建微信支付订单接口,并支付

微信官方参考地址

var wx = require('jweixin-module');

let params = {
	amount: 30, // 支付金额
	openId : uni.getStorageSync('openId')  // 前面获取的openId
};
// 调用后台下单接口,下单成功则弹起微信支付输入密码框
this.$getData.Getwxpay(params).then((res) => {
	// 如果下单失败
	if(!res.success){
	         this.$refs.uToast.show({
				type: 'warning',
				icon: false,
				message: res.message,
			});
			return;
	}
    wx.config({
         debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
         appId: 'wxbb3a1ff0e1be2c71', // 必填,公众号的唯一标识
         timestamp: res.result.timestamp, // 必填,生成签名的时间戳
         nonceStr: res.result.nonce_str, // 必填,生成签名的随机串
         signature: res.result.sign, // 必填,签名
         jsApiList: ['chooseWXPay'] // 必填,需要使用的JS接口列表
       })
       wx.ready(function() {
         wx.chooseWXPay({
           timestamp: res.result.timestamp, // 时间戳
           nonceStr: res.result.nonce_str, // 随机数
           package: `prepay_id=${res.result.prepay_id}`, //
           signType: 'MD5',
           paySign: res.result.sign, // 签名
           success: function() {
             uni.showToast({  title:'支付成功' });
				  setTimeout(() => {
						uni.navigateTo({
								url: `/pages_pay/cxjf/index?userCode=${that.userCode}`
							});
					},2000);
           },
           cancel: function() {
					uni.showToast({ title:'取消支付',  icon:'none' });
					setTimeout(() => {
							uni.navigateTo({
								url: `/pages_pay/dzf/index`
							});
					},2000);
           },
           fail: function() {
             uni.showToast({title:'支付失败',icon:'none'});
					setTimeout(() => {
						uni.navigateTo({
							url: `/pages_pay/dzf/index`
						});
				},2000);
           }
         })
       })
       
	});
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1166152.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

在云栖,一场关于数据洞察的创新实践

云布道师 数据驱动创新创新鉴于未来。做好数据洞察&#xff0c;是鉴往知来的必备条件。阿里云将携手广大开发者&#xff0c;进一步完善相关技术和工具&#xff0c;提供更好的产品和方案&#xff0c;让数据洞察的应用更加广泛和深入。 2023 年 11 月 2 日&#xff0c;是为期三…

LeetCode | 203. 移除链表元素

LeetCode | 203. 移除链表元素 OJ链接 这里有两个思路我接下来看 当cur不等于6就一直找&#xff0c;找到了6就删除&#xff0c;但是能不能直接删除&#xff1f;不能&#xff0c;直接free了就找不到下一个了 这个时候我们就要定义next指针&#xff0c;和prev指针&#xff0c…

【Unity细节】论复合函数在Start生命周期中的调用顺序和时间

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 秩沅 原创 &#x1f636;‍&#x1f32b;️收录于专栏&#xff1a;unity细节和bug &#x1f636;‍&#x1f32b;️优质专栏 ⭐【…

Websocket @ServerEndpoint不能注入@Autowired

在websocket中使用ServerEndpoint无法注入Autowired、Value 问题分析 Spring管理采用单例模式&#xff08;singleton&#xff09;&#xff0c;而 WebSocket 是多对象的&#xff0c;即每个客户端对应后台的一个 WebSocket 对象&#xff0c;也可以理解成 new 了一个 WebSocket&…

【希赛网】软考高级系统架构每日一题总结

目录 前言基础知识知识产权与标准化软件开发软件工程软件测试架构质量属性质量评估 数据库计算机网络嵌入式信息系统系统配置与性能评价系统安全分析与设计操作系统数学 前言 为了准备软考高级&#xff0c;考前20天刷大量希赛网每日一题&#xff0c;以下题目都来自希赛网~ 总…

Spring cloud负载均衡 @LoadBalanced注解原理

接上一篇文章&#xff0c;案例代码也在上一篇文章的基础上。 在上一篇文章的案例中&#xff0c;我们创建了作为Eureka server的Eureka注册中心服务、作为Eureka client的userservice、orderservice。 orderservice引入RestTemplate&#xff0c;加入了LoadBalanced注解&#x…

新时代备考利器 | 国考路上的得力助手,拓世AI为你打造智能学习之路!

随着人工智能&#xff08;AI&#xff09;和大数据时代的到来&#xff0c;其影响已经全面席卷全球&#xff0c;对于人才的需求和培养提出了全新的挑战和要求。这股潮流推动着教育领域逐步迎来深刻的改革和变革&#xff0c;旨在培养适应未来社会发展需求的多元化人才。同时&#…

react+canvas实现横跨整个页面的动态的波浪线(贝塞尔曲线)

本来写这个特效 我打算用css实现的&#xff0c;结果是一波三折&#xff0c;我太难了&#xff0c;最终没能用css实现&#xff0c;转战了canvas来实现。来吧先看效果图 当然这个图的波浪高度、频率、位置、速度都是可调的&#xff0c;请根据自己的需求调整&#xff0c;如果你讲波…

Spring Data Redis + RabbitMQ - 基于 string 实现缓存、计数功能(同步数据)

目录 一、Spring Data Redis 1.1、缓存功能 1.1.1、分析 1.1.2、案例实现 1.1.3、效果演示 1.2、计数功能&#xff08;Redis RabbitMQ&#xff09; 1.2.1、分析 1.2.2、案例实现 一、Spring Data Redis 1.1、缓存功能 1.1.1、分析 使用 redis 作为缓存&#xff0c; M…

EEG公开数据集介绍

EEG公开数据集介绍 0 引言1 项目简单介绍1.1 运动想象1.2 情绪识别1.3 误差相关电位 &#xff08;ErrP&#xff09;1.4 视觉诱发电位 &#xff08;VEP&#xff09;1.5 事件相关电位 [ERP]1.6 慢皮质电位 &#xff08;SCP&#xff09;1.7 静息状态1.8 音乐和脑电图1.9 眨眼/运动…

ruby语言怎么写个通用爬虫程序?

Ruby语言爬虫是指使用Ruby编写的网络爬虫程序&#xff0c;用于自动化地从互联网上获取数据。其中&#xff0c;CRawler是一个基于文本的小型地牢爬虫&#xff0c;它被设计为可扩展&#xff0c;所有游戏数据均通过JSON文件提供&#xff0c;程序仅处理游戏引擎。除此之外&#xff…

企业服务器数据库中了mkp勒索病毒怎么解决,勒索病毒解密数据恢复

在近期&#xff0c;云天数据恢复中心陆续接到很多企业的求助&#xff0c;企业的服务器数据库遭到了勒索病毒攻击&#xff0c;导致企业的所有重要数据被加密。尤其是从10月份以来&#xff0c;勒索病毒的攻击频率越来越高&#xff0c;有很多企业都是二次被攻击&#xff0c;尤其是…

视频特效制作After Effects 2024 for Mac(ae)

After Effects 2024是一款由Adobe公司开发的专业的视频特效和动态图形设计软件&#xff0c;它可以帮助用户创建各种令人惊叹的视觉效果&#xff0c;例如粒子系统、合成特效、绿屏抠像等。该软件支持动画制作&#xff0c;包括关键帧动画、形状动画、运动跟踪等工具&#xff0c;可…

高浓度cod废水怎么处理

高浓度COD废水的处理方法主要有物理法、生物法和化学法。 物理法&#xff1a;一般通过加入絮凝剂&#xff0c;利用絮凝剂的吸附、电中和等作用将水中的颗粒物结团沉降下去&#xff0c;从而达到去除部分来自颗粒物的COD。此方法基本上只对浓度上万、上千的COD起作用&#xff0c…

跑步耳机哪个牌子好?最适合跑步用的耳机排名

在各式各样的耳机当中&#xff0c;运动耳机可以说是使用场景最广的一类了。毕竟运动耳机对于某些方面性能要求会比非运动耳机要高很多&#xff0c;就比如户外运动、健身、骑行等方面。面对这么多运动耳机&#xff0c;哪款更值得入手&#xff1f;今天就来给大家推荐几款很不错的…

力扣 寻找旋转排序数组中的最小值 二分

&#x1f468;‍&#x1f3eb; 题目地址 &#x1f338; AC code class Solution { public int findMin(int[] nums){int res Integer.MAX_VALUE;int l 0;int r nums.length - 1;while (l < r){int mid l r >> 1;if (nums[mid] < res)res nums[mid];//中值 &…

What is 哈希?

哈希 ​ 前言&#xff1a;大一大二就一直听说哈希哈希&#xff0c;但一直都没有真正的概念&#xff1a;What is 哈希&#xff1f;这篇博客就浅浅聊一下作者认知中的哈希。 理解哈希 ​ 哈希&#xff08;Hash&#xff09;也可以称作散列&#xff0c;实质就是一种映射&#xf…

git更改远程仓库地址

1、输入命令【git remote -v】查看当前git远程仓库地址 2、输入命令【git remote set-url origin 新地址】替换成新地址 3、输入命令【git remote -v 】查看是否更新成功

Odoo 网站主题开发指南

Odoo 网站主题开发指南 下载根据本指南开发的主题模块源码 Odoo 网站生成器是一个灵活的工具&#xff0c;可以轻松构建与 Odoo 应用完全集成的网站。使用其提供的主题选项 (options) 和构建块 (blocks) 很容易定制网站。然而&#xff0c;你还可以更进一步深度定制。在本文中&a…

Zinx框架-游戏服务器开发002:按照三层结构模式重构代码功能-待续

文章目录 1 Zinx框架总览2 三层模式的分析3 三层重构原有的功能 - 头文件3.1 通道层Stdin和Stdout类3.1.2 StdInChannel3.1.2 StdOutChannel 3.2 协议层CmdCheck和CmdMsg类3.2.1 CmdCheck单例模式3.2.1.1 单例模式3.2.1.2 * 命令识别类向业务层不同类别做分发 3.2.2 CmdMsg自定…