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));
                }
            });
        }
 
    })