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

	})