全网最详细的uniapp微信支付教程，包含APP微信支付、微信内置浏览器支付、微信外h5支付_uniapp h5支付详解

---

一、APP微信支付

效果预览

1、微信那边的配置
1、微信开放平台申请创建APP，并开通微信支付
（1）微信开放平台https://open.weixin.qq.com
(2)不知道怎么申请和开通的小伙伴去百度一下，已获得支付能力会显示如图的“已获得”，没有微信支付能力的需要点击去申请，按流程进行申请。


（3）微信支付的APPID是这里申请的APPID，不要和其他的搞混淆了，想微信内置浏览器支付的APPID使用的是微信公众号的APPID。
（4）应用签名必须要填写正确，不然找几天也找不到报错原因


下载签名生成工具

https://developers.weixin.qq.com/doc/oplatform/Downloads/Android_Resource.html

（5）安装到手机上，打开后输入app的报名就可以获取了，需要注意的是这个app要是正式打包的才能获取，这个值要填到第三步那里

（6）微信支付操作证书获取可按这个操作流程进行：

https://www.sohu.com/a/234912109_100142931
证书下载下来要存到代码目录里面去，在支付配置的这里要用到

2、微信支付之前就要生成自己的订单了，也就是存在自己服务器的订单。

//每个人的请求方式封装不一样，可忽略this.$u.api...
this.$u.api.submitOrder({
   
    good_name: _that.bjInfo.name,
    good_id: _that.bjInfo.id,
    user_id: _that.userId,
    address_id: _that.addressInfo.id,
    total: _that.bjInfo.price,
    paymethod: _that.isWechat ? 0 : 1,
    buyType: _that.buyType,
}).then(res => {
   
    console.log(res)
    //这里自己的订单生成成功了,可以调用微信支付了，把下面的微信支付代码封装到一个方法里面在这里调用即可

    //#endif

}).catch(err => {
   
    this.$refs.uToast.show({
   
        title: err.data.msg,
    })
    console.log(err)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

console.log('微信支付')
//第一步调用后台微信支付接口，一般传参是三个out_trade_no、good_name、total_fee
//这个接口返回所有前端唤起微信支付的所有参数
/**前端需要的参数
let obj = {
		appid: '',
		noncestr: '',
		package: '', // 固定值，以微信支付文档为主
		partnerid: '',
		prepayid: '',
		timestamp: '',
		sign: '' // 根据签名算法生成签名
	};
**/
_that.$u.api.wxPay({
   
	out_trade_no: order.out_trade_no,
	good_name: order.good_name,
	total_fee: order.total_fee,
}).then(res => {
   
	console.log(res)
	let obj = {
   
		appid: res.data.appid,
		noncestr: res.data.noncestr,
		package: res.data.package, // 固定值，以微信支付文档为主
		partnerid: res.data.partnerid,
		prepayid: res.data.prepayid,
		timestamp: res.data.timestamp,
		sign: res.data.sign // 根据签名算法生成签名
	};

	let orderInfo = JSON.stringify(obj);
	// console.log(orderInfo);
	console.log(orderInfo);
	uni.requestPayment({
   
		provider: 'wxpay',
		orderInfo: orderInfo, //微信、支付宝订单数据
		success: res => {
   
		_that.editOrderStatus(order);
	
	},
	fail: function(err) {
   
		_that.$u.route('/pages/payresult/payresult', {
   
		out_trade_no: order.out_trade_no
	})
	console.log('fail:' + JSON.stringify(err));
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

3、我的后端是TP6，我选的插件是Yansongdapay
我安装的是2版本，3版本我看作者还在更新，就没用，安装代码如下：

composer require yansongda/pay:~v2.10.2 -vvv
1

<?php

declare(strict_types=1);

namespace app\websit\controller;

use think\facade\Cache;
use think\facade\View;
use think\facade\Session;
use think\facade\Log;
use app\websit\BaseController;
use think\exception\Handle;
use Yansongda\Pay\Pay;
use think\facade\Db;
use think\facade\Config;

class Wxpay extends BaseController
{
   

    public function submitOrder()
    {
   
        if ($this->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23