【云开发小课】交易支付小程序

简介: 本篇内容分享了云开发小课的交易支付小程序课程内容。

本篇内容为大家介绍交易支付业务场景的小程序开发过程。通过这篇内容,大家可以掌握:

Ÿ   通过云开发来开发小程序的前后端,而且可以做联动调试;

Ÿ   支付宝交易支付相关的API调用知识点。

首先是前期的准备工作,如下图所示:

image001.jpg

下载支付宝小程序IDE:

https://render.alipay.com/p/f/fd-jwq8nu2a/pages/home/index.html

开通入驻支付宝开发者中心,开通沙盒模式:

https://openhome.alipay.com/platform/sandboxMini.htm

公私钥生成:

https://miniu.alipay.com/keytool/create


首先是下载支付宝小程序IDE;第二需要支付宝账号并开通沙箱环境,即前模拟线上,这个不需要有商家一样的资质;然后安装沙箱版支付宝;最后是公私钥的生成,才能调动交易支付。

下面是通过具体实战操作来讲解。

 

一、创建配置应用

创建应用分为三个步骤,首先是配置沙箱环境;其次是在线生成公私钥;第三点是配置数据库。

打开云开发平台的界面并登录,然后创建一个新的应用,这个应用是通过Java交易支付小程序模块完成的。

image002.jpg

创建完应用需要以下几项配置:沙箱环境的API ID、数据库的地址用户名和密码、API网关配置和小程序的公私钥配置。配置过程是,先打开沙箱环境,用支付宝app扫码登录;登陆后的页面会生成一个APPID;然后会有一个下载“支付宝小程序开发工具”,还会有小程序C端账号信息,沙箱钱包可以用这个账号登录。页面还提示沙箱环境会默认提供了当面付等相关支付功能。

image003.jpg

然后是API网关,这里需要点开修改和更新公私钥信息。更新后,就会自动生成一个支付宝公钥,这个需要配置到应用里。

公私钥配置好之后,下一步是配置数据库的用户名和密码。

 

二、 WebIDE启动应用

首先是确认环境变量是否生效。

打开云开发平台模板IDE的前后端,然后用设置的用户名和密码查看变量是否生效。然后启动Springboot服务端应用,这个服务启动的是8080端口。再然后是小程序miniu预览,把启动的服务映射出来,通常是映射到本地,通过local host来直接访问服务,然后把映射的服务配置到小程序里,并启动miniu预览。最后在小程序IDE发布,真机预览。

任何应用都需要有登录态,这里可以用支付宝里的登录态唤起小程序应用的登录态。这套机制就是支付宝会给一个授权码,可以拿到授权码到服务端去调支付宝的API,唤起一个登录态。

其次是通过小程序IDE来调试,把生成的代码切割到本地。打开云开发平台,找到小程序前端代码,然后复制到本地,再通过小程序IDE来打开小程序。

值得注意的是,沙箱环境需要安装沙箱环境插件,安装之后需要全部退出后重新登录,是通过沙箱支付宝登录。登录后修改下服务端地址。然后用沙箱支付宝实现真机预览。

三、API调试

API调试分为小程序前端调试和服务端断点调试。

服务断点调试,需要看它输入和输出参数的传递和变量值。在小程序端侧进行断点调试,首先在服务端授权页面打开调试页面,然后点查看支付记录,这个时候就会断点进来,并唤起授权确认页。当授权信息保存到本地就不需要再确认了。拿到授权码之后会调用支付宝的服务端并唤起登录信息。

但是现在这个环境还没有和沙箱环境打通,如果打通了,整个前后端都可以在WebIDE里实现联动。这个功能很快就会上线。

最后简单介绍下支付宝的交易支付功能。这个可以通过代码查看也可以加断点调试。这里的断点调试是创建交易,然后拿到支付宝唤起支付,然后可以查询是否支付成功的状态,同时也可以回滚到支付订单即取消支付。

以上全部内容就是交易支付小程序的相关介绍。

相关文章
|
20天前
|
小程序 JavaScript Java
微信小程序的后端开发需要使用什么语言?
【8月更文挑战第22天】微信小程序的后端开发需要使用什么语言?
221 65
|
13天前
|
小程序 JavaScript
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
本文介绍了使用 Taro 和 Vue 创建轮播组件的两种方法:一是通过 `<swiper>` 实现,二是利用 Nut UI 的 `<nut-swiper>` 组件实现。
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
|
5天前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
19 3
|
13天前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
本文介绍了Taro中`useShareAppMessage`的使用方法,需在页面配置`enableShareAppMessage: true`并重新编译。
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
|
13天前
|
小程序 数据安全/隐私保护
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
在 `src/http` 目录下创建 `request.ts` 文件,并配置 Taro 的网络请求方法 `Taro.request`,支持多种 HTTP 方法并处理数据加密。
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
|
13天前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,上传文件
本文介绍如何在Taro项目中使用Nut UI的`<nut-uploader/>`组件实现图片上传功能,并通过示例代码展示了自定义上传逻辑的方法。
Taro@3.x+Vue@3.x+TS开发微信小程序,上传文件
|
13天前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
本文介绍如何在Taro项目中配置深色模式。通过在`src/app.config.ts`设置`darkmode`选项和在`theme.json`中定义主题变量,可以实现跟随系统主题的界面风格切换。
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
|
13天前
|
小程序 开发者
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
本文介绍了如何在Taro项目中实现自定义tabBar。首先,在`app.config.ts`中设置`custom: true`并配置`tabBar`。
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
|
16天前
|
存储 运维 小程序
后端开发零负担!揭秘支付宝小程序云开发的高效与安全,你的项目也能飞速上线?
【8月更文挑战第27天】支付宝小程序云开发是由阿里云提供的集成开发环境,助力开发者高效、安全地构建小程序后端服务,免去服务器搭建,显著提高开发效率并降低运维成本。它集成了云函数、云数据库及云存储等功能,便于快速搭建后端逻辑。例如,仅需简单几行代码即可创建HTTP接口或进行数据管理。这使得开发者能更专注于业务逻辑和用户体验优化,同时平台还提供了强大的安全保障措施,确保数据安全和用户隐私。无论对于初创团队还是成熟企业,支付宝小程序云开发都能有效提升产品迭代速度和市场竞争力。
40 1
|
18天前
|
存储 小程序 数据可视化
小程序开发问题之使用小程序云服务开发个人相册小程序如何解决
小程序开发问题之使用小程序云服务开发个人相册小程序如何解决