使用uniapp开发微信小程序的微信支付流程

在我们做一些购物车的结算功能时是一定会有支付功能的，那我们如何去做微信支付这个功能呢，首先我们先要理清思路，并且要了解到接口需要哪些数据以及会返回哪些数据

注意：一定要先看接口文档！

创建订单。

○ 请求创建订单的 API 接口：把（订单金额、收货地址、订单中包含的商品信息）发送到服务器。

○ 服务器响应的结果：订单编号。
订单预支付。

○ 请求订单预支付的 API 接口：把（订单编号）发送到服务器。

○ 服务器响应的结果：订单预支付对象，里面包含了订单支付相关的必要参数。
发起微信支付。

○ 调用 uni.requestPayment() 这个 API，并传递订单预支付对象，发起微信支付。

○ 监听 uni.requestPayment() 这个 API 的 success，fail，complete 回调函数。

这是我们先点击结算按钮是需要做一些校验和提示的，通过校验后再去做支付功能

// 点击了结算按钮
settlement() {// #1 先判断是否勾选了要结算的商品if (!this.checkedCount) return uni.$showMsg('请选择要结算的商品！')// #2 再判断用户是否选择了收货地址if (!this.addstr) return uni.$showMsg('请选择收货地址！')// #3 最后判断用户是否登录了// if (!this.token) return uni.$showMsg('请先登录！')if (!this.token) return this.delayNavigate()// #4 实现微信支付功能this.payOrder()
}

接下来就是支付功能了

// 微信支付
async payOrder() {// 1. 创建订单// 1.1 组织订单的信息对象const orderInfo = {// 开发期间，注释掉真实的订单价格，// order_price: this.checkedGoodsAmount,// 写死订单总价为 1 分钱order_price: 0.01,consignee_addr: this.addstr,goods: this.cart.filter(x => x.goods_state).map(x => ({ goods_id: x.goods_id, goods_number: x.goods_count, goods_price: x.goods_price }))}// 1.2 发起请求创建订单const { data: res } = await uni.$http.post('/orders/create', orderInfo)if (res.meta.status !== 200) return uni.$showMsg('创建订单失败！')// 1.3 得到服务器响应的“订单编号”const orderNumber = res.message.order_number// 2. 订单预支付// 2.1 发起请求获取订单的支付信息const { data: res2 } = await uni.$http.post('/my/orders/req_unifiedorder', { order_number: orderNumber })// 2.2 预付订单生成失败if (res2.meta.status !== 200) return uni.$showMsg('预付订单生成失败！')// 2.3 得到订单支付相关的必要参数const payInfo = res2.message.pay// 3. 发起微信支付// 3.1 调用 uni.requestPayment() 发起微信支付const [err, succ] = await uni.requestPayment(payInfo)// 3.2 未完成支付if (err) return uni.$showMsg('订单未支付！')// 3.3 完成了支付，进一步查询支付的结果const { data: res3 } = await uni.$http.post('/my/orders/chkOrder', { order_number: orderNumber })// 3.4 检测到订单未支付if (res3.meta.status !== 200) return uni.$showMsg('订单未支付！')// 3.5 检测到订单支付完成uni.showToast({title: '支付完成！',icon: 'success'})
}

以上就是功能代码啦，但是要注意的是，可能做出来后会没有效果，因为这个东西是需要一些权限账号的，如果是自己写的话，没有特定的权限是出不来支付功能的

主要其实就是调用uni.requestPayment()这个api的，具体可以去参照uniapp的官方文档uni.requestPayment(OBJECT) | uni-app官网

使用uniapp开发微信小程序的微信支付流程相关推荐

微信小程序登录、支付流程简介
登录流程登录流程 1. 获取用户的头像和昵称信息(可选) 2. 通过wx.login() 获取code 3. 把code+用户信息(可选)发送给后端 4. 后端通过code+appid+AppSec ...
如何开发微信小程序？微信小程序有哪些特点？
目前,小程序因为其无需安装.无需下载的便捷性.易用性获得了越来越多用户的青睐,微信小程序基于微信庞大的用户基数,也成为越来越多商家开拓增值业务的优先选择.什么是小程序?以微信小程序为例,微信小程序便是 ...
视频教程-微信小程序全集-微信开发
微信小程序全集拥有丰富的开发经验,熟练掌握html5等相关技术. 杨春鹏 ¥800.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订阅课程,领取优惠,最少立减 ...
微信小程序（微信应用号）开发ide安装解决方法
微信小程序(微信应用号)开发ide安装解决方法参考文章: (1)微信小程序(微信应用号)开发ide安装解决方法 (2)https://www.cnblogs.com/muyixiaoguang/p/ ...
微信小程序使用微信公众号的模板消息进行消息推送开发流程
微信小程序使用微信公众号的模板消息进行消息推送开发流程微信公众号服务号,微信公众号订阅号,微信公众号开发者平台,微信小程序这些的账号都是独立的不能共用微信开放平台开发者资质认证审核费用为300元 ...
《微信小程序》微信小程序开发实例
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
android微信运动页面开发,微信小程序仿微信运动步数排行(交互)
微信小程序仿微信运动步数排行(交互) 发布时间:2020-08-20 00:51:02 来源:脚本之家阅读:101 作者:祈澈姑娘本文介绍了微信小程序仿微信运动步数排行(交互),分享给大家,也给自 ...
基于微信小程序的微信社团小程序
文末联系获取源码开发语言:Java 框架:ssm JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7/8.0 数据库工具:Navicat11 开发软件:eclipse/my ...
【微信小程序】微信小程序基础知识篇
开发文档小程序简介 | 微信开放文档 1.微信小程序的环境准备 1.1注册账号 1.2获取APPID 是开发者唯一的身份认证,应用要发布要上线必须提供APPID 1.3开发工具由于微信小程序自带开 ...
微信小程序通过微信群发消息（订阅消息）
微信小程序通过微信群发消息(订阅消息):(这个是云开发的教程,可能对于http的不适用) 一.怎么实现这个功能: 1.在微信公众号平台上面开启功能先完善小程序的信息,才能开通这个功能这一步前面还有 ...

使用uniapp开发微信小程序的微信支付流程

主要其实就是调用uni.requestPayment()这个api的，具体可以去参照uniapp的官方文档uni.requestPayment(OBJECT) | uni-app官网

使用uniapp开发微信小程序的微信支付流程相关推荐

最新文章

热门文章