uni-app:登录与支付-- 微信支付

微信支付

在请求头中添加 Token 身份认证的字段

原因说明：只有在登录之后才允许调用支付相关的接口，所以必须为有权限的接口添加身份认证的请求头字段

打开项目根目录下的 main.js，改造 $http.beforeRequest 请求拦截器中的代码如下：

// 请求开始之前做一些事情
$http.beforeRequest = function(options) {uni.showLoading({title: '数据加载中...',})// 判断请求的是否为有权限的 API 接口if (options.url.indexOf('/my/') !== -1) {// 为请求头添加身份认证字段options.header = {// 字段的值可以直接从 vuex 中进行获取Authorization: store.state.m_user.token,}}
}

判断当前路径有没有包含/my这个字段

如果是有权限的路径，那么就添加它的token值

微信支付的流程

创建订单
- 请求创建订单的 API 接口：把（订单金额、收货地址、订单中包含的商品信息）发送到服务器
- 服务器响应的结果：订单编号
订单预支付
- 请求订单预支付的 API 接口：把（订单编号）发送到服务器
- 服务器响应的结果：订单预支付的参数对象，里面包含了订单支付相关的必要参数
发起微信支付
- 调用 uni.requestPayment() 这个 API，发起微信支付；把步骤 2 得到的 “订单预支付对象” 作为参数传递给 uni.requestPayment() 方法
- 监听 uni.requestPayment() 这个 API 的 success，fail，complete 回调函数

创建订单

改造 my-settle 组件中的 settlement 方法，当前三个判断条件通过之后，调用实现微信支付的方法：

// 点击了结算按钮
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()
},

在 my-settle 组件中定义 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('/api/public/v1/my/orders/create', orderInfo)if (res.meta.status !== 200) return uni.$showMsg('创建订单失败！')// 1.3 得到服务器响应的“订单编号”const orderNumber = res.message.order_number// 2. 订单预支付// 3. 发起微信支付}

拿到服务器响应回来的订单编号

拿到cart内容

订单预支付

改造 my-settle 组件的 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('/api/public/v1/my/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('/api/public/v1/my/orders/req_unifiedorder', { order_number: orderNumber })// 2.2 预付订单生成失败if (res2.meta.status !== 200) return uni.$showError('预付订单生成失败！')// 2.3 得到订单支付相关的必要参数const payInfo = res2.message.pay// 3. 发起微信支付}

发起微信支付

这个uni.requestPayment(OBJECT)需要的5个必填项，就问返回回来的payInfo包含的参数

改造 my-settle 组件的 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('/api/public/v1/my/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('/api/public/v1/my/orders/req_unifiedorder', { order_number: orderNumber })// 2.2 预付订单生成失败if (res2.meta.status !== 200) return uni.$showError('预付订单生成失败！')// 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('/api/public/v1/my/orders/chkOrder', { order_number: orderNumber })// 3.4 检测到订单未支付if (res3.meta.status !== 200) return uni.$showMsg('订单未支付！')// 3.5 检测到订单支付完成uni.showToast({title: '支付完成！',icon: 'success'})}

分支的合并与提交

将 settle 分支进行本地提交：

git add .
git commit -m "完成了登录和支付功能的开发"

将本地的 settle 分支推送到码云：
```
git push -u origin settle
```
将本地 settle 分支中的代码合并到 master 分支：
```
git checkout master
git merge settle
git push
```
删除本地的 settle 分支：
```
git branch -d settle
```

uni-app:登录与支付-- 微信支付相关推荐

android支付宝支付微信支付封装,如何在Android App中集成支付宝和微信支付功能
前言本文主要介绍如何在 Android App 里集成支付宝和微信支付的功能,文中将实现的步骤一步步介绍的非常详细,对同样遇到这个问题的朋友相信会是一个很好的参考,下面话不多说了,来一起看看详细的介 ...
iOS开发之第三方支付微信支付教程，史上最新最全第三方微信支付方式实现、微信集成教程，微信实现流程
本章项目demo: https://github.com/zhonggaorong/weixinLoginDemo 本章不讲解: 微信sdk的集成 , 项目集成的文章请参照 (包含微信登录): h ...
Android如何调用支付宝支付微信支付
1.支付宝支付-------------------------- 1,到支付宝官网,下载支付宝集成开发包,看懂里面的关键代码由于android设备一般用的都是无线支付,所有我们申请的就是支付宝无线 ...
若依分离版整合IJpay实现第三方支付-(微信支付篇_v2)
若依分离版整合IJpay实现第三方支付-(微信支付篇_v2) IJpay官网 https://javen205.gitee.io/ijpay/ 文章目录若依分离版整合IJpay实现第三方支付-(微信 ...
android移动支付——微信支付
前言这里开篇讲解一系列的Android相关的移动支付.移动支付也称为手机支付,用户使用移动的设备,完成对所购买商品或者服务的支付功能.包括远程支付(网上支付.短信支付),近场支付(刷卡.滴卡.pos ...
android移动支付——微信支付，flutter瀑布流内存
我们这里主要是来学习一下支付宝,微信支付,银联支付和paypal支付现实生活中的支付就是:去商店浏览商品->把商品加入购物车->把购物车中的商品拿到收银台付款上面的支付流程细化下来就是 ...
android移动支付——微信支付，360°深入了解Flutter
国内的移动支付方式: 支付宝,微信,银联,百度钱包,QQ钱包,财付通,京东支付易宝支付,快钱支付,还有一些第三方的支付什么连连支付之类的境外的移动支付方式(这里直说一个) :paypal 流程我 ...
uniApp APP端调起微信支付失败errCode:-100的踩坑
使用了在开放平台配置好包名和签名后调试,在有的机型上通过调试可以调起微信支付,但是打包成apk就调起失败,有一种可以成功的结果,反向推断出代码肯定没有问题.但是控制台报errCode:-100的错. ...
android微信支付黑屏,【报Bug】本地打包的APP成功调起微信支付后点击返回APP出现卡死黑屏...
详细问题描述(DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题) [内容] 使用本地打包SDK进 ...