理論上整合微信支付的全部工作可以在小程式端完成，因為小程式js有訪問網路的能力，但是為了安全，不暴露敏感key，也更好地跨平臺(對於iOS與Android原生APP開發來說，哪天小程式的支付介面也納入了開放平臺了，這條也就成立了)，而且可以使用官方提供的現成php demo更省力，於是在服務端完成簽名與發起請求，小程式端只做一個wx.requestPayment(OBJECT)介面的對接。

整體整合過程與JSAPI、APP類似，先統一下單，然後拿返回的結果來請求支付。

一共三步：

1.小程式端通過wx.login的返回的code換取openid

2.服務端向微信統一下單

3.小程式端發起支付

事先準備好這幾樣東西：

APPID = 'wx426b3015555a46be';
MCHID = '1900009851';
KEY = '8934e7d15453e97507ef794cf7b0519d';
APPSECRET = '7813490da6f1265e4901ffb80afaa36f';

PHP SDK，下載連結見文尾

第1、4樣是申請小程式時獲得的，第2、3樣是申請開通微信支付時獲得的，注意第3、4樣長得比較像，其實是2個東西，兩者混淆將導致簽名通不過。

向微信端下單，得到prepay_id

1. 建立一個Controller，引並WxPay.Api.php類

<?php
require_once
 
 __DIR__ . '/BaseController.php';
require_once __DIR__ . '/../third_party/wxpay/WxPay.Api.php';

classWXPayextendsBaseController{
    functionindex(){
    }
}

之後可以通過index.php/wxpay來作訪問請求

2. 修改配置檔案WxPay.Config.php

改成自己申請得到相應key

3. 實現index方法

        functionindex(){
//         初始化值物件
        $input = new WxPayUnifiedOrder();
//         文件提及的引數規範：商家名稱-銷售商品類目
 

        $input->SetBody("靈動商城-手機");
//         訂單號應該是由小程式端傳給服務端的，在使用者下單時即生成，demo中取值是一個生成的時間戳
        $input->SetOut_trade_no('123123123');
//         費用應該是由小程式端傳給服務端的，在使用者下單時告知服務端應付金額，demo中取值是1，即1分錢
        $input->SetTotal_fee("1");
        $input->SetNotify_url("http://paysdk.weixin.qq.com/example/notify.php");
        $input->SetTrade_type("JSAPI");
//         由小程式端傳給服務端
        $input->SetOpenid($this->input->post('openId'));
//         向微信統一下單，並返回order，它是一個array陣列
        $order = WxPayApi::unifiedOrder($input);
//         json化返回給小程式端
        header("Content-Type: application/json");
        echo json_encode($order);
    }

說明1：文件上提到的nonce_str不是沒提交，而是sdk幫我們填上的

出處在WxPay.Api.php第55行

$inputObj->SetNonce_str(self::getNonceStr());//隨機字串

說明2：sign也已經好心地給setSign了，出處在WxPay.Data.php第111行，MakeSign()中

    /**
     * 生成簽名
     * @return 簽名，本函式不覆蓋sign成員變數，如要設定簽名需要呼叫SetSign方法賦值
     */
    public functionMakeSign(){
        //簽名步驟一：按字典序排序引數
        ksort($this->values);
        $string = $this->ToUrlParams();
        //簽名步驟二：在string後加入KEY
        $string = $string . "&key=".WxPayConfig::KEY;
        //簽名步驟三：MD5加密
        $string = md5($string);
        //簽名步驟四：所有字元轉為大寫
        $result = strtoupper($string);
        return $result;
    }

4. 小程式內呼叫登入介面，獲取openid

向微信登入請求，拿到code，再將code提交換取openId

wx.login({
          success: function(res) {
            if (res.code) {
              //發起網路請求
              wx.request({
                url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wx9114b997bd86f***&secret=d27551c7803cf16015e536b192******&js_code='+res.code+'&grant_type=authorization_code',
                data: {
                  code: res.code
                },
                success: function (response) {
                    console.log(response);
                }
              })
            } else {
              console.log('獲取使用者登入態失敗！' + res.errMsg)
            }
          }
        });

從控制檯看到已經成功拿到openid，剩下的事情就是將它傳到服務端就好了，服務端那邊$this->input->post('openId')等著收呢。

                    //統一下單介面對接
                    wx.request({
                        url: 'https://lendoo.leanapp.cn/index.php/WXPay',
                        data: {
                            openId: openId
                        },
                        success: function (response) {
                            console.log(response);

                        },
                                header: {
                        'content-type': 'application/x-www-form-urlencoded'
                },
                    });

得到如下結果

{
  "appid": "wx9114b997bd86f8ed",
  "mch_id": "1414142302",
  "nonce_str": "eEICgYFuGqxFRK6f",
  "prepay_id": "wx201701022235141fc713b8f80137935406",
  "result_code": "SUCCESS",
  "return_code": "SUCCESS",
  "return_msg": "OK",
  "sign": "63E60C8CD90394FB50E612D085F5362C",
  "trade_type": "JSAPI"
}

6. 小程式端調起支付API

// 發起支付
var appId = response.data.appid;
var timeStamp = (Date.parse(new Date()) / 1000).toString();
var pkg = 'prepay_id=' + response.data.prepay_id;
var nonceStr = response.data.nonce_str;
var paySign = md5.hex_md5('appId='+appId+'&nonceStr='+nonceStr+'&package='+pkg+'&signType=MD5&timeStamp='+timeStamp+"&key=d27551c7803cf16***e536b192d5d03b").toUpperCase();
console.log(paySign);
console.log(appId);
wx.requestPayment({
    'timeStamp': timeStamp,
    'nonceStr': nonceStr,
    'package': pkg,
    'signType': 'MD5',
    'paySign': paySign,
    'success':function(res){
        console.log('success');
        console.log(res);
    }
});

模擬器測試，將彈出一個二維碼供掃描

結果報了一個錯誤：

errMsg:"requestPayment:fail"
err_code:2
err_desc:"支付驗證簽名失敗"

key需要加入到簽名中！！！'appId='+appId+'&nonceStr='+nonceStr+'&package='+pkg+'&signType=MD5&timeStamp='+timeStamp+"&key=d27551c7803cf16*e536b192d5d03b"這才是完整的。

可是文件裡明明沒提到key啊

7. 支付成功截圖

吐槽完文件再吐槽下命名規則，GetSpbill_create_ip()、IsSpbill_create_ipSet()都是些什麼鬼一會兒下劃線分隔一會兒駝峰分隔，成員方法首字母還大寫，unifiedOrder()這種正經寫法也不忘來比劃兩下，看來網上說大公司的sdk都是實習生撰寫是真事，可code reviewer又在哪裡？

【2016-1-5】

番外篇 - 服務端生成與二次簽名與引數

之前的作法可視為服務端與小程式雙重請求混合使用的一個範例。

接下來將演示純服務端的方式，小程式只關注wx.requestPayment對接。

二次簽名也通過服務端，讓小程式端呼叫更加簡潔，前端不再關心生成timeStamp，md5，paySign，全部將服務端返回得到。

這種做法應該是更為主流的作法。

        public functiongetJsApiParameters($UnifiedOrderResult){
        if(!array_key_exists("appid", $UnifiedOrderResult)
        || !array_key_exists("prepay_id", $UnifiedOrderResult)
        || $UnifiedOrderResult['prepay_id'] == "")
        {
            throw new WxPayException("引數錯誤");
        }
        $jsapi = new WxPayJsApiPay();
        $jsapi->SetAppid($UnifiedOrderResult["appid"]);
        $timeStamp = time();
        $jsapi->SetTimeStamp("$timeStamp");
        $jsapi->SetNonceStr(WxPayApi::getNonceStr());
        $jsapi->SetPackage("prepay_id=" . $UnifiedOrderResult['prepay_id']);
        $jsapi->SetSignType("MD5");
        $jsapi->SetPaySign($jsapi->MakeSign());
        $parameters = json_encode($jsapi->GetValues());
        return $parameters;
    }

呼叫getJsApiParameters

//         json化返回給小程式端
header("Content-Type: application/json");
echo $this->getJsApiParameters($order);

小程式端發起支付

//統一下單介面對接
wx.request({
    url: 'https://lendoo.leanapp.cn/index.php/WXPay',
    data: {
        openId: openId
    },
    method: 'POST',
    header: {
        'content-type': 'application/x-www-form-urlencoded'
    },
    success: function (response) {
        // 發起支付
        wx.requestPayment({
            'timeStamp': response.data.timeStamp,
            'nonceStr': response.data.nonceStr,
            'package': response.data.package,
            'signType': 'MD5',
            'paySign': response.data.paySign,
            'success':function(res){
                console.log('success');
                console.log(res);
            }
        });
    }
});

省去了timeStamp、paySign的生成，連帶md5.js也省掉了，小程式端呼叫起來就清爽多了。

中間出現了一個小插曲，package被我畫蛇添足地寫成了"prepayid"+response.data.package

報了缺少引數total_fee的錯誤，既不是報引數錯誤，也不是報prepay_id錯誤，相當無厘頭。