Uni-App 微信小程序接入微信支付

微信小程序用的是 JSAPI 方式，在前端，把商品信息传到后台，后台创建订单，然后调用统一下单接口，然后打包一个数据包给App调起微信支付

 

要准备一下资料：

1. 微信公众号认证，并开通微信支付。

2. 小程序绑定微信支付（小程序管理后台左侧点微信支付，然后按提示操作）

3. 获取开发必要参数

开发参数包含：

APPID：小程序 appID
MCHID：商户号
KEY：商户支付密钥， 设置地址：https://pay.weixin.qq.com/index.php/account/api_cert
APPSECRET： 获取地址：https://mp.weixin.qq.com/advanced/advanced？action=dev&t=advanced/dev&token=2005451881&lang=zh_CN

统一下单接口：

这里一定要注意，用到的trade type 为 JSAPI，然后，一定要设置 OpenId（顾客的openid）

            require_once WEB_ROOT_DIR . 'lib/wx/WxPay.Data.php';
            require_once WEB_ROOT_DIR . 'lib/wx/WxPay.Config.php';
            require_once WEB_ROOT_DIR . 'lib/wx/WxPay.Api.php';

            $orderData = new WxPayUnifiedOrder();
            $wxConfig = new WxPayConfig();
            $wxApi = new WxPayApi();
            $orderData->SetOut_trade_no($out_trade_no);
            $orderData->SetBody('购买课程');
            $orderData->SetTotal_fee($amount);
            $orderData->SetTrade_type('JSAPI');
            $orderData->SetOpenid($this->userInfo['open_id']);

            $this->debug($orderData->getData());

            $unifiedOrder = [];
            try {
                $unifiedOrder = $wxApi->unifiedOrder($wxConfig, $orderData);
            } catch (WxPayException $e) {
                $this->debug($e->errorMessage());
                FResponse::jsonErr($e->errorMessage());
            }

            $this->debug($unifiedOrder);


            if ($unifiedOrder['return_code'] == 'SUCCESS' &&
                $unifiedOrder['result_code'] == 'SUCCESS'
            ) {
                // 下单成功
            }

恭喜，如果下单成功了，说明你的配置没问题了。

如果没有返回下单成功，需要检查，小程序是否绑定微信支付，是否开通了JSAPI支付。

下单成功后，我们获得了一个重要的参数：prepay_id

然后，我们下一步就构造一个供小程序调用的数据包：

                // 小程序 finalPkg
                $finalPkg = [
                    "appId" => $wxConfig->GetAppId(),
                    "timeStamp" => time(),
                    "nonceStr" => $unifiedOrder['nonce_str'],
                    "package" => 'prepay_id='.$unifiedOrder['prepay_id'],
                    "signType"=>$wxConfig->GetSignType(),
                ];

                $orderData = new WxPayUnifiedOrder();
                $finalPkg['sign'] = $orderData->getPkgSign($wxConfig, $finalPkg);

这里一定要注意，这个包和 App 的包结构不一样。所以，严格对照参数！

最后，Uni-App里使用这个包就可以调起微信支付了。

	this.httpGet("order/pay" + "?order_id=" + resp.data.result.id).then(resp1 => {
		if (resp1.data.status == 'ok') {
				
			uni.requestPayment({
				provider: 'wxpay',

				timeStamp: resp1.data.result.timeStamp + '',
				nonceStr: resp1.data.result.nonceStr,
				package: resp1.data.result.package,
				signType: resp1.data.result.signType,
				paySign: resp1.data.result.sign,


				success: function(res) {
					uni.showToast({
						title: "支付成功",
						duration: 3000,
						icon: 'none',
					});
					setTimeout(function() {

						uni.redirectTo({
							url: '/pages/my_orders/my_orders' +
								'?order_id=' + order_id
						});
					}, 1500);
					
				},
				fail: function(err) {
					uni.showModal({
						content: "支付失败,原因为:\n " + err.errMsg,
						showCancel: false,
					})
					console.log('fail:' + JSON.stringify(err));
				}
			});
		}

	})