uniapp-支付(微信)

1. 支付的前期准备工作

需要后端和老板(部长/领导)提前获取到appid和商户号 申请之后才能调取支付接口

这里主要讲解前端需要做的工作

在文件内打开支付的相关

2.发请求获取需要的参数

在订单详情页的时候 点击提交订单按钮 先发了一个创建订单的请求 返回的数据有订单的id

请求成功之后 携带订单id 跳转到支付页面

在支付页面内 点击微信支付后 先是用订单id发一个请求获取到需要的参数 (例如appid等6个参数)

请求成功之后 用这些获得的这些参数 发 wx.requestPayment 请求 需要6个参数

这个成功之后 模拟器就会出现一个支付二维码 手机微信扫码就可以支付

3.遇到的bug

第一种 某个值 不为 String 类型 或值为undefined

这种情况 先检查(控制台前后打印)是否把参数传入成功(可能没赋值成功)

确定有值传入了 再看数据类型是否对得上 像需要的参数之一 时间戳 需要的就是字符串类型

再检查属性名是否有大小写的问，uniapp的官方文档以及微信部分官方文档的示例代码大小写是有问题的

第二种 支付验证签名失败

先检查自己的 signType 是否和后端保持一致

再检查 paySign 的格式是否正确（二次签名转换格式，这个需要后端去处理）

检查后端处理的代码是V2还是V3版本 推荐使用V3

实在不行 就把微信开发者工具重启试一下

4.示例代码

<template>
	<view class="btn" @click="handleSubmit">确认支付</view>
</template>

<script>
	import { payCreateOrder } from '@/api/pay-order/pay-weixin.js'
	data() {
		return {
    	...xxx,
			orderId: '',
			orderInfo: {},//支付要用到的数据
		}
	},
	
	methods: {
    async handleSubmit () {
			// 调用接口支付
			const data = {
				orderType: '1',
				orderId: this.orderId,
				payType: 'wx_app',
			}
			await payCreateOrder(data) 
			.then((res) => {
			    console.log(res, '接口成功之后操作');
  				this.orderInfo = {
  					appId: res.data.data.appId,  // 应用ID（AppID）
  					package: res.data.data.package,        // 固定值
  					nonceStr: res.data.data.nonceStr, // 随机字符串
  					timeStamp: Math.floor(Date.now() / 1000).toString(),        // 时间戳（单位：秒）
  					signType: res.data.data.signType ,// 签名
  					paySign: res.data.data.paySign // 签名，这里用的 MD5 签名
  				}
  				console.log(this.orderInfo)
  				uni.getProvider({
				    service: 'payment',
				    success:(res) => {
				        console.log(res.provider)
				        if (~res.provider.indexOf('wxpay')) {
				            wx.requestPayment({
				                appId: this.orderInfo.appId, 
				                package:  this.orderInfo.package, 
				                nonceStr: this.orderInfo.nonceStr, 
				                timeStamp: this.orderInfo.timeStamp,
				                signType: this.orderInfo.signType,
				                paySign: this.orderInfo.paySign,
				                success: (res) => {
				                    // 此处调用接口跳转页面
                          	// go('/vacant_house/submit_successfully/submit_successfully?submitType=1');
				                    console.log("支付成功",  res);
				                },
				                fail: (err) =>  {
				                    console.log('支付失败:' + JSON.stringify(err));
				                    console.log(this.orderInfo);
				                }
				            });
				        }
				    }
				});
			  })
		},
 }
  
</script>