uniapp 微信小程序 微信支付

news2024/12/22 15:25:32

本章的内容我尽量描述的细致一些,哪里看不懂给我评论就可以,我看到进行回复

微信支付大致分为4步,具体看后端设计

1. 获取code

2. 根据code获取openid

3. 根据openid,以及部分订单相关数据,生成prepayId (预支付交易会话ID)

4. 通过prepayId调用支付api,并让后端在支付api中返回支付相关配置参数,然后前端将支付配置参数设置到微信支付api上,进行支付拉起

(第3步和第4步 后端可以合成1步,生成prepayId的同时,并执行支付然后将支付配置返回给前端)

本章主要核心介绍就是: 通过第1步,第2步的结合取出openid,以及第4步中的使用uni.requestPayment(OBJECT) 方法,拉起微信支付api的使用以及参数配置,其他可具体结合自己的项目。

1. 获取code

首先要清楚,code是啥?怎么取?取到它用来干啥?

说明:调用接口获取临时登录凭证(code)。通过凭证进而换取用户登录态信息,包括用户在当前小程序的唯一标识(openid)、微信开放平台账号下的唯一标识(unionid,若当前小程序已绑定到微信开放平台账号)及本次登录的会话密钥(session_key)等。

通过这个说明可以知道:code是临时登录凭证(有效期五分钟),我们可以通过这个code在第二步拿到openid,unionid,session_key 这三个参数

怎么取到code:这里需要使用uniapp官方提供的api uni.login(OBJECT)


uni.login({
    provider: 'weixin', // 使用微信登录
	success: (res) => {
		const { code } = res;
		console.log('code =>', code) 
		// code => 0e1MTrFa1eDx9I0bRpJa1Mqfwf4MTrFJ
	}
});

2. 根据code获取openid

openid是啥?怎么取?取到它用来干啥?

说明:openid是微信用户在公众帐号(包括小程序)、H5、APP下的唯一标识。每个应用都有一个appid,不同的appid,对应的openid不同。

用来干啥:因为涉及到支付,那么业务中肯定的需要知道是谁支付了,这个谁就通过openid界定

怎么取:调用微信api【GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code】

const toggleExecutePay = (param) => {
  return new Promise((resolve) => {
    uni.showLoading({
      title: '加载中',
      mask: true
    });

    uni.login({
      provider: 'weixin', // 使用微信登录
      success: (loginRes) => {
        // 取得 code
        const { code } = loginRes;

        // 该api的功能:校验临时登录凭证。通过临时登录凭证完成登录流程,并且返回 openid, unionid, session_key。
        // 需要注意:某些场景下 在前端代码里直接调用这个api的话,会报错request:fail url not in domain list (url不在域列表中),
        // 在微信公众平台里面也没办法将这个域名配置到合法域名内
        // 所以就不能在前端代码里直接调用这个api,让后端新增一个接口,在新增的接口里面调用这个api,然后将openid进行返回
        // uni.request({
        //   // 微信官网api 携带参数(小程序appId、小程序appSecret、通过wx.login获取的code、授权类型:此处只需填写 authorization_code)
        //   url: `https://api.weixin.qq.com/sns/jscode2session?appid=xxx&secret=xxx&js_code=${code}&grant_type=authorization_code`,
        //   method: 'GET',
        //   success: function (jscodeRes) {
        //     const { openid, unionid, session_key } = jscodeRes.data;
        //   }
        // });

        // 调用后端接口 获取openid (只传code就行了,其他三个参数让后端在后台自己写)
        getUserOpenId({ code: code }).then(async (res) => {
          const { success, data, message } = res;
          if (success) {
            // 执行第3步 创建订单 获取prepayid(统一下单订单号)
            const prepayId = await toggleCreateOrder(data.openid, param).then(
              (res) => res
            );
            // 执行第4步 获取支付配置 并拉起支付
            await toggleGetPayConfig(prepayId);
            
            resolve(true);
          } else {
            // 加载弹窗隐藏
            uni.hideLoading();
            // 弹起错误信息
            uni.showToast({
              icon: 'none',
              title: `${message}`,
              mask: true,
              position: 'top'
            });
            resolve(false);
          }
        });
      }
    });
  });
};

3. 根据openid,以及部分订单相关数据,生成prepayId (预支付交易会话ID)

这一步对于后端来说,只是单纯的通过openid,以及订单相关参数,像微信要了一个prepayId,然后创建了一个订单,并且给前端返回prepayId

// 创建订单 获取 prepayid(统一下单订单号)
const toggleCreateOrder = (openid, param) => {
  return new Promise((resolve) => {
    const payParam = {
      openId: openid,
      amount: param.amount
      // ... 如果生成订单后端还需要其他参数(如商品名称,商品id等等),在这里追加就行
    };
    createOrder(payParam).then(async (res) => {
      const { success, data } = res;
      if (success) {
        resolve(data.prepayId);
      } else {
        // 加载弹窗隐藏
        uni.hideLoading();
        resolve(false);
      }
    });
  });
};

4. 通过prepayId 调用支付api,并让后端在支付api中返回支付相关配置参数,然后前端将支付配置参数设置到微信支付api上,进行支付拉起

这一步对于后端来说,通过prepayId将刚刚生成的订单设置成待支付,并且将支付参数返回给前端,前端拉起微信支付,支付成功后,后端应该会监听回调,监听到微信支付成功了,就把订单设置成支付成功

前端调用拉起微信支付api:uni.requestPayment(OBJECT)

// 获取支付配置
const toggleGetPayConfig = (prepayId) => {
  return new Promise((resolve) => {
    getPayConfig({
      prepayId: prepayId
    }).then((res) => {
      // 这些参数都让后端返回,前端就不维护像appid这些固定值了
      const { appid, nonceStr, signature, timestamp, signType, partnerid } =
        res;

      // 加载弹窗隐藏
      uni.hideLoading();

      uni.requestPayment({
        provider: 'wxpay', // 固定传wxpay
        appid: appid, // 微信开放平台 - 应用 - AppId
        timeStamp: `${timestamp}`, // 时间戳(单位:秒)
        package: 'prepay_id=' + prepayId, // 'prepay_id=' + prepayId
        paySign: signature, // 签名
        signType: signType, // 签名算法,这里用的 MD5/RSA 签名
        nonceStr: nonceStr, // 随机字符串
        partnerid: partnerid, // 微信支付商户号
        success(res) {
          resolve(true);
        },
        fail(err) {
          console.log('支付异常 =>', err);
        }
      });
    });
  });
};

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

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

相关文章

免费 Oracle 各版本 离线帮助使用和介绍

文章目录 Oracle 各版本 离线帮助使用和介绍概要在线帮助下载离线文档包:解压离线文档:访问离线文档:导航使用:目录介绍Install and Upgrade(安装和升级):Administration(管理&#…

交通场景多目标检测系统源码分享

交通场景多目标检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Comput…

Qt界面优化——绘图API

文章目录 绘图核心API绘制各种形状绘制线段绘制矩形绘制圆形绘制文本设置画笔设置画刷 绘制图片 绘图核心API Qt的各种控件,本质上都是画出来的,这不过这些都是提前画好了,我们拿过来直接使用即可。 实际开发中,可能现有控件无法…

面了智谱大模型算法岗,效率贼高!

最近这一两周不少互联网公司都已经开始秋招提前批面试了。 不同以往的是,当前职场环境已不再是那个双向奔赴时代了。求职者在变多,HC 在变少,岗位要求还更高了。 最近,我们又陆续整理了很多大厂的面试题,帮助一些球友…

使用容器启动的zk无法暴露3888问题解决

1. 问题描述 zk配置如下: 我通过容器启动了一个zk,通过-p 参数暴露了2181和3888端口,容器启动脚本如下: #!/bin/shdocker rm -f myzookeeper1docker run -p 12181:2181 -p 13888:3888 --name myzookeeper1 --restart always …

C# 字符串(String)的应用说明一

一.字符串(String)的应用说明: 在 C# 中,更常见的做法是使用 string 关键字来声明一个字符串变量,也可以使用字符数组来表示字符串。string 关键字是 System.String 类的别名。 二.创建 String 对象的方法说明&#x…

c++ 使用 Graham 扫描的凸包(Convex Hull using Graham Scan)

先决条件: 如何检查两个给定的线段是否相交? c https://blog.csdn.net/hefeng_aspnet/article/details/141713655 java https://blog.csdn.net/hefeng_aspnet/article/details/141713762 python https://blog.csdn.net/hefeng_aspnet/article/details/…

Australis 相機率定軟體說明

概要 課堂中使用Australis這套軟體,順帶記錄操作過程 內容以老師口述及我測試的經過 照片為老師課堂提供之 說明 執行 Step1. 匯入照片 注意!!如果是Mac的作業系統,將資料夾移到Windows上的時候,建議創一個新的資料…

mysql---索引类型及索引方法使用

mysql索引类型 Normal、Full Text、Unique 在 MySQL 中,索引的类型主要有以下几种: Normal Index(普通索引): 这是最基本的索引类型,没有唯一性要求。允许重复值,可以加速查询性能。用法&#…

产品经理的学习

初学 接需求 画原型 写文档 日常产出 流程图 举例购物的流程 结构图 一个应用的全部功能,用思维导图的方式去罗列出来 竞品分析文档 竞品分类 竞品选择 竞品采集 竞品文档书写 也可以做一个产品的产品结构图 需求文档 干系人 需求方 记录人 产品经理 其他项目干系人…

搭建企业级私有仓库harbor

华子目录 harbor简介实验环境准备下载软件包安装docker-cehosts解析 实验步骤配置https加密传输解压进入解压目录,修改文件配置启动harbor 测试客户端配置harbor本地加速器注意 通过docker compose管理harbor harbor简介 harbor是由wmware公司开源的企业级docker r…

LLM基础概念:Token

什么是token?为什么要限制token的输入?平时说的消耗token数指的是什么? token是用于自然语言处理的词的片段。 在自然语言处理模型中,限制token数量主要是出于计算效率和资源限制的考虑。每一个token都对应一个向量,…

Linux gadget 模拟触控屏 支持多点触控

通过gadget命令行生成hid设备 下面xxx自己根据需要修改,例如VID,PID,产品名称 const char *INSTALL_GADGET_CMDS[] {"modprobe libcomposite","mkdir /sys/kernel/config/usb_gadget/g1","echo xxx > /sys/kernel/config/…

github项目--crawl4ai

github项目--crawl4ai 输出html输出markdown格式输出结构化数据与BeautifulSoup的对比 crawl4ai github上这个项目,没记错的话,昨天涨了3000多的star,今天又新增2000star。一款抓取和解析工具,简单写个demo感受下 这里我们使用cra…

衡水中学资料大全-重构版(状元、学霸笔记)

文章目录 一、衡水中学:教育界的璀璨明珠二、状元笔记:学霸的智慧传承三、学霸笔记:高效学习的秘籍四、全面复习资料:覆盖所有考点五、思维导图:构建知识框架六、获取方式 一、衡水中学:教育界的璀璨明珠 …

【React】入门Day01 —— 从基础概念到实战应用

目录 一、React 概述 二、开发环境创建 三、JSX 基础 四、React 的事件绑定 五、React 组件基础使用 六、组件状态管理 - useState 七、组件的基础样式处理 快速入门 – React 中文文档 一、React 概述 React 是什么 由 Meta 公司开发,是用于构建 Web 和原生…

语音转文字免费利器:助力高效办公与学习

语音转文字免费的软件如同一股清流,让我们能够更轻松地将语音信息转化为可编辑的文字内容。今天我们一起来分析它们的功能、特点以及如何为我们的生活和工作带来便利。 1.365在线转文字 链接直达:https://www.pdf365.cn/ 这是一个功能强大的在线工具…

网站集群批量管理-密钥认证与Ansible模块

一、集群批量管理-密钥认证 1、概述 管理更加轻松:两个节点,通过密钥形式进行访问,不需要输入密码,仅支持单向. 服务要求(应用场景): 一些服务在使用前要求我们做秘钥认证.手动写批量管理脚本. 名字: 密钥认证,免密码登录,双机互信. 2、原理 税钥对…

MySQL 的复制延迟:理解与解决方案

一、什么是 MySQL 的复制延迟? 在 MySQL 数据库中,复制是一种将数据从一个数据库服务器(主服务器)复制到一个或多个数据库服务器(从服务器)的机制。复制延迟指的是主服务器上的数据更改与这些更改在从服务…

DBeaver显示PostgreSQL数据库的信息模式

DBeaver连接PostgreSQL数据库后,默认情况下是不加载信息模式的,如果有需要,我们可以通过设置显示信息模式。 具体步骤:点击数据库连接–>右键打开设置–>连接设置–>常规–>导航视图–>自定义–>勾选显示系统对…