wx小程序学习Day9 创建订单、准备预支付、发起微信支付、查询订单

最新推荐文章于 2025-01-27 17:27:11 发布
最新推荐文章于 2025-01-27 17:27:11 发布
阅读量3.3k 收藏 23
点赞数 1
分类专栏： 小程序 文章标签： 微信 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gegegegege12/article/details/120190020
版权
本文详细介绍了微信支付在支付页的实现过程，包括数据展示、支付流程、创建订单、预支付、发起支付、查询订单、错误处理及支付后的数据同步。在支付流程中，重点讲解了如何在不具备微信支付条件的情况下模拟支付步骤，并讨论了支付失败的错误处理和支付成功后的购物车数据清理。此外，还介绍了如何封装统一的请求头到request方法中，以简化请求处理。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

学习内容

1. 支付页-数据展示

在这里插入图片描述
cart页的标签和样式拿过来改一改
pay页就长这样
在这里插入图片描述
pay页要展示的商品实际上是在cart页选中的商品，这些商品的checked属性必须为true
将cart页的js代码复制过来修改部分逻辑
在这里插入图片描述

2. 支付页-支付流程

实现微信功能需要是已经开通了微信支付，且绑定了商户号的小程序
我🈚️这个条件，所以就走个流程感受一下😢

支付流程：
1.创建订单（获取订单编号）
=> 2.准备预支付（获取pay参数）
=> 3.发起微信支付（提交pay参数）
=> 4.查询订单

3. 支付页-创建订单

订单编号要通过发送请求来获取
在这里插入图片描述
发送的请求要携带请求头参数，值为用户登录成功获取的token值，所以现在要先获取到token值

点击支付按钮，先判断缓存中有没有token

  • 如果没有，就跳转到授权页面获取token
  • 如果有token，就正常执行剩下的逻辑
    在这里插入图片描述
    order_number就是获取到的订单编号

3. 支付页-准备预支付和发起微信支付

获取到订单编号之后，要准备预支付，也就是要发送请求获取pay参数
在这里插入图片描述
获取到pay参数之后就可以通过小程序内置的apiwx.requestPayment()提交pay参数
还是照常封装一下
在这里插入图片描述
其实因为pay参数对象中的属性也就是这个api所需要的参数，可以直接像👇这样写
在这里插入图片描述
调用一下
在这里插入图片描述

4. 支付页-查询订单

是否支付成功还需要由后台的订单状态说明，所以我们还需要查询一下后台的订单状态
在这里插入图片描述

5. 支付页-错误处理

以上流程是正常的成功流程，但是我们没有对其他状态作处理，比如支付失败
那么我们可以使用一下try..catch
并且成功支付或失败都给用户showToast 提示一下
成功支付后要跳转到订单页面在这里插入图片描述

6. 支付页-移除购物车已支付的数据

完成微信支付
=> 删除缓存中已经被选中的商品
=> 将删除后的购物车数据填充回缓存
=> 再跳转到订单页面

在这里插入图片描述

7. 封装统一的请求头到request方法中

如果我们的请求路径包含/my/，那么希望request方法自动帮我们加上请求头
这里的header初值不要赋为{}，赋为{...params.header}，如果之后想要在请求头中新增别的属性，就可以通过params传进来
在这里插入图片描述

支付页完

微信小程序支付功能详细分析（一、预支付）
a_sheep的博客
09-23 6930
微信小程序支付功能详细分析 小记：最近在做微信小程序的支付，中间也遇到了很多问题，总结一下，给大家避个坑，也给自己记录一下后面可以作为参考 概要 本文中只写执行逻辑，跟一些算法，不包含具体代码内容，目前开发采用的是微信小程序、nginx+uwsgi+python+flask 微信小程序支付 官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ 整体逻辑 首先先看下整体逻辑 整体逻辑 https://pay.weixin.qq.
代码解析之微信统一下单生成预支付订单
cyberpunk_Isme的博客
10-19 1168
@Service public class WeixinPayServiceImpl implements WeixinPayService { @Value("${weixin.appid}") private String appid; @Value("${weixin.partner}") private String partner; @Value("${weixin.partnerkey}") private String partnerkey; @Value("${weixin.notif
app端微信支付（二） - 生成预付单
weixin_34310127的博客
12-13 434
​前一篇文章的时序图中说了，app端调用微信支付必须先由后台调用微信后台生成预付单，再构建参数给手机端，而数据的构建要以xml形式，那么看看代码具体实现吧，代码已经精简过了，自己的业务已经除去，精简的代码附上注释是可以直接调用微信后台的 这个是微信所要接受的参数，咱们可以把它构建成一个entity public class WXPrepay { private static String...
微信公众号支付——预支付订单
星爷的博客
07-03 1万+
1.需要一个可以登陆微信商户平台的账号，此账号是服务号并开通了微信支付，商户在申请开通时，客服会发送邮件到你的邮箱， 上图中有几个重要信息：商户号和appid，务必记住商户号和appid。其中登陆账号和密码用于登陆微信支付首页点击打开链接 2.点击上图中的下载api证书，设置api密码。这个证书主要在微信支付api中需要证书的地方使用中的退款等功能提示需要证书。 注：什么时候
微信小程序 使用微信支付功能实现在线订单支付
weixin_30907523的博客
10-11 799
以前做过PC页面微信支付，但是这次在小程序 直接调用微信支付功能还是方便很多 先放个微信官方API链接：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=5 先说说整个下单支付流程的整体思路， 0，准备工作： 一，appId，开发帐号中注册时的appId。 二，sdkContent，后...
微信小程序——day02.zip
01-11
在"微信小程序——day02"的学习主题中，我们将深入探讨微信小程序开发的基础和进阶知识。 1. **环境配置**：首先，你需要安装微信开发者工具，这是创建和调试小程序的必备平台。下载并安装后，可以通过工具进行项目...
微信小程序支付功能流程（签名）
Lmmmum_J的博客
08-23 1197
微信小程序支付功能，签名加密
学子影城项目DAY04（微信小程序）
07-18
在微信小程序中，可以使用`wx.request()`方法发起网络请求，获取到JSON格式的数据，然后在前端解析并渲染到界面上。 3. **地图功能实现** 文件`map.js`表明这个部分可能涉及到地图的集成。微信小程序提供了地图...
《苍穹外卖》项目学习记录-Day6微信小程序开发入门
最新发布
m0_57047579的博客
01-27 551
拿到这个openid之后我们就可以自定义登录状态，自定义登录态就是我们需要去记录当前这个微信用户他的一些信息，比如说我可以把这个openid存到数据库，同时我还可以为这个微信用户来产生一个token(登录令牌)，因为这个小程序还会持续不断地来请求我们这个后端服务，比如说他要添加购物车或者下单等等，这个时候我们都需要知道当前这个微信用户是谁，我们就需要为当前微信用户来生成一个token返回给这个小程序。不同的主体注册微信小程序，能开发的功能是不一样的，也就是开放的权限不一样。请求的参数是下面几个。
苍穹外卖-day06 微信登录 导入小程序代码 微信登录流程 需求分析和设计
m0_59281987的博客
05-22 1253
所以，小程序的代码已经提供好了，直接导入到微信开发者工具当中，直接来使用就可以了。开发者服务端，自定义登录态，生成令牌(token)和openid等数据返回给小程序端，方便后绪请求身份校验。小程序端，调用wx.request()发送请求并携带code，请求开发者服务器(自己编写的后端服务)。点击确定按钮，获取授权码，每个授权码只能使用一次，每次测试，需重新获取。开发者服务端，收到请求后，通过携带的token，解析当前登录用户的id。开发者服务端，身份校验通过后，继续相关的业务逻辑处理，最终返回业务数据。
微信小程序之商家订单
05-26
微信小程序开发，仿没团首页布局，商家列表排布，商家销量排序及默认排序，商家订单下单，购物总计，顶部轮滑分类等等
微信订单管理小程序开发制作
hanlin1888的博客
04-14 3673
客户需求：想要随时随地一键下单！想要实时查看订单进度！！想要高效管理订单数据！！！想要提升订单沟通效率！！！！ 微信小程序，集需求信息上传、线上一键下单、入厂订单查询、订单进度管理、在线即时沟通等功能。通过线上建立客户与生产端的沟通“桥梁”，与线下服务相辅相成，极大提高了公司与客户的沟通效率，实现加工订单的智能交付、高效履约和进度及时反馈，推动客户服务效率和加工效率的提升。 1、一键下单，方便快捷 甲方公司简化服务订单提交程序，支持订单线上快速录入。客户可通过微信打开“订单管理微信小程序”小程序登
C#微信开发之旅(十)：APP预支付及支付参数生成(V2)
weixin_30951389的博客
10-31 187
App支付流程： 本篇随笔只实现红框内的两个功能：生成预支付Id，生成app支付参数 1 　　 /// <summary> 2 /// App 预支付 3 /// </summary> 4 /// <returns></returns> 5 publ...
java微信支付v3系列——3.订单创建准备操作
qq_45740561的博客
12-21 4742
微信支付的下单操作分为了5种，分别是JSAPI、APP、H5以及Native支付及小程序支付，之所以将支付放在单独一个章节，而不是按照支付类型划分一个章节，是因为支付所传递的数据都是相似的，方便我们更好的封装。more本章节是支付编写支付前的准备操作，发送请求需要请求地址，用户支付成功后微信会通过我们传入的回调地址进行回调，这两个地址都通过枚举进行管理。然后就是方法的封装，如果都写在一个方法里面，代码冗余，毕竟发送请求的代码都很相似。
微信小程序中微信支付流程
weixin_59525879的博客
10-29 1268
用户授权支付：小程序引导用户进入微信支付界面，需要用户授权进行支付操作。商户后台生成预支付订单：商户后台接收到用户订单信息后，调用微信支付API生成一个预支付订单，并返回给小程序。支付结果通知：支付完成后，微信服务器会将支付结果通知到商户后台。小程序显示支付结果：小程序前端根据支付结果通知，展示支付成功或失败的页面，同时可以提供相应的交互操作。用户提交订单：用户在小程序中选择商品或服务，并点击确认支付按钮，将订单信息提交给商户后台。小程序调起支付：小程序前端收到商户后台返回的预支付订单信息后，通过。
微信小程序--微信支付流程
m0_64397933的博客
07-23 967
微信小程序--微信支付流程
java微信支付v3系列——4.创建订单的封装及使用
qq_45740561的博客
12-21 5155
经过了微信支付之创建订单准备操作的准备操作，接下来我们就能够非常快速的开发出各种支付类型的创建订单接口。商户Native支付下单接口，微信后台系统返回链接参数code_url，商户后台系统将code_url值生成二维码图片，用户使用微信客户端扫码后发起支付，也就是说后端只需要返回code_url即可。使用方式也很简单，通过注入的方式获取到wxPayConfig和wxPayClient对象后，创建支付请求参数对象，调用刚刚编写的wxNativePay方法即可。
微信小程序 实现支付流程
weixin_71403100的博客
01-30 1万+
1、获取OpenID：通过wx.login()获得code，将code传给接口获得OpenID调用预支付接口，将OpenID与接口需要携带的其他参数，得到预支付核心数据；数据包含：【时间戳--timeStamp，随机字符串--nonceStr，预支付id--package，签名算法--signType，签名--paySign】调用wx.requestPayment()，传递上一步获取的5个预支付核心数据，得到支付结果最后，👏👏 😀😀😀 👍👍。
微信小程序支付，微信支付【小白专用】
热门推荐
xieshunhai的博客
06-01 4万+
博主，之前做微信支付，在网上很少找到支付的文章，所以就抽空把微信支付流程给整理出来，方便各位刚刚接触微信支付的用户，参考，如有不好之处，欢迎评论指出 1、必须开通支付，并且有备案的域名 和 配置 https 2.微信小程序处理 .wxml .js 3 后台处理部分（博主使用php为例子）【其他语言参照修改就可以了】 以下参数不懂，可通过这个查看，微信文档查看参数的...
HTML微信小程序天气查询api
01-09
### 微信小程序天气查询API使用方法 对于微信小程序中的天气查询功能，并未直接提供专门针对天气数据获取的API。然而，可以借助`wx.request`来调用微信开放平台或其他第三方气象服务提供商的数据接口以实现这一目的[^1]。 #### 实现思路 通过`wx.request`发起HTTP GET请求至指定的服务端地址，该地址应指向可信赖的天气信息服务商所提供的公开API。通常情况下，这类服务商要求开发者先注册账号并申请API密钥，在构建URL时作为参数传递给服务器验证身份合法性。 #### 示例代码 下面是一个简单的例子展示如何利用`wx.request`向某假定存在的天气预报网站发送GET请求： ```javascript // 假设已获得合法有效的API_KEY以及城市ID为cityId const API_KEY = &#39;your_api_key_here&#39;; const cityId = &#39;some_city_id&#39;; Page({ data: { weatherInfo: &#39;&#39; }, onLoad() { const url = `https://api.weather.com/v3/wx/forecast/daily/5day?apiKey=${API_KEY}&geocode=${cityId}`; wx.request({ url, // 请求的目标网址 method: &#39;GET&#39;, success(res) { console.log(&#39;成功收到响应:&#39;, res.data); this.setData({weatherInfo: JSON.stringify(res.data)}); }.bind(this), fail(err){ console.error(&#39;发生错误:&#39;, err); } }); } }); ``` 此段代码展示了页面加载完成后自动执行一次网络请求的过程，将返回的结果保存到页面状态中以便后续渲染显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值