今天給大家介紹一下微信小程式是如果實現支付的流程，在開發之前我們首先要獲取到商戶的appId和mchId最後就是商戶的key值了。這些值在商戶申請成功之後都會通過郵件的形式傳送給商戶，所以如果還沒有拿到這些值的情況下，是不能夠進行微信支付的。

上面的那些值全部拿到之後，我們就可以開始微信支付開發了。

微信支付的流程大致分為四步驟：

1.在小程式中獲取使用者的登入資訊，成功後可以獲取到使用者的code值

2.在使用者自己的服務端請求微信獲取使用者openid介面，成功後可以獲取使用者的openid值   

微信官方api地址：點選開啟連結

3.在使用者自己的伺服器上面請求微信的統一下單介面，下單成功後可以獲取

prepay_id值

微信官方api地址：點選開啟連結

4.在微信小程式中支付訂單，最終實現微信的支付功能

微信官方api地址：點選開啟連結具體的流程圖如下所示：
下面我們就開始詳細的介紹一下微信支付的整個流程：首先是獲取使用者的資訊，也就是小程式中的登入介面：

//app.js
App({
  onLaunch: function() {
    wx.login({
      success: function(res) {
        if (res.code) {
          //發起網路請求
          wx.request({
            url: 'https://test.com/onLogin',
            data: {
              code: res.code
            }
          })
        } else {
          console.log('獲取使用者登入態失敗！' + res.errMsg)
        }
      }
    });
  }
})
 

小程式的官方寫法是這樣的，通過login登入來獲取使用者的code值。因為這個code值，在請求使用者的openid需要用到。獲取到使用者code值之後，就需要我們服務端來請求微信的這個地址：https://api.weixin.qq.com/sns/jscode2session服務端程式碼如下：

    public Map<String,Object> onLogin(String code){
        Map<String,Object>result=new HashMap<>();
        String url=ConstantUtils.getSessionKeyUrl+"?appid="+ ConstantUtils.appId+
                "&secret="+ConstantUtils.secret+"&js_code="+code+"&grant_type="+ConstantUtils.grantType;
        JSONObject httpResult=HttpUtils.httpGet(url);
        result.put("openid",httpResult.get("openid"));
        result.put("session_key",httpResult.get("session_key"));
        result.put("expires_in",httpResult.get("expires_in"));
        return  result;
    }
 

具體的介面介紹這裡就不做過多的介紹，因為微信官方api裡面寫的很清楚了。請求這個介面之後我們就可以獲取到使用者的openid了，這個引數是在接下來統一下訂單的介面需要用到的。最後就是統一下單的介面，這個介面主要是為了獲取支付介面所需要的prepay_id欄位值。統一下訂單介面是發生在我們自己的服務端這邊的，我們需要請求微信的：https://api.mch.weixin.qq.com/pay/unifiedorder介面。這個介面有很多注意點，特別是sign簽名的生成規則，我在初期好多次都是因為sign簽名驗證失敗導致最後下單失敗的。還有一點就是total_fee總金額是以分為單位，而且只能是整數，不能是分數。下面看我服務端的程式碼：

 public Map<String,Object> createOrder(String openId){
        Map<String,Object>result=new HashMap<>();
        result.put("status","1");
        result.put("payType","weixin");
        result.put("orderId","12345678");
        String formData=orderService.commitData(openId);
        String httpResult = HttpUtils.httpXMLPost(ConstantUtils.createOrderUrl,formData);
        try {
            Map<String, String> resultMap = WXPayUtil.xmlToMap(httpResult);
            result.put("package", "prepay_id=" + resultMap.get("prepay_id"));
            result.put("nonceStr",resultMap.get("nonce_str"));
        } catch (Exception e) {
            e.printStackTrace();
        }
        String times= WXPayUtil.getCurrentTimestamp()+"";
        result.put("timeStamp",times);
        Map<String, String> packageParams = new HashMap<String ,String>();
        packageParams.put("appId", ConstantUtils.appId);
        packageParams.put("signType", ConstantUtils.signType);
        packageParams.put("nonceStr",result.get("nonceStr")+"");
        packageParams.put("timeStamp",times);
        packageParams.put("package", result.get("package")+"");//商戶訂單號
        String sign="";
        try {
            sign= WXPayUtil.generateSignature(packageParams, ConstantUtils.key);
        } catch (Exception e) {
            e.printStackTrace();
        }
        result.put("paySign",sign);
        return result;
    }

上面用到的WXPayUtil工具類是微信官方支demo中的工具類，裡面函式很齊全，大家可以去官網上下載。請求xml生成函式程式碼如下：

 public String commitData(String openId){
        String nonceStr= WXPayUtil.generateUUID();
        String body="JSAPI支付測試";
        Map<String, String> packageParams = new HashMap<String ,String>();
        packageParams.put("appid", ConstantUtils.appId);
        packageParams.put("body",body);
        packageParams.put("mch_id", ConstantUtils.mchId);
        packageParams.put("nonce_str",nonceStr);
        packageParams.put("notify_url", ConstantUtils.notifyUrl);//支付成功後的回撥地址
        packageParams.put("openid",openId+"");//支付方式
        packageParams.put("out_trade_no", "12345678");//商戶訂單號
        packageParams.put("sign_type", ConstantUtils.signType);
        packageParams.put("spbill_create_ip","127.0.0.1");
        packageParams.put("total_fee", "1");//支付金額，這邊需要轉成字串型別，否則後面的簽名會失敗
        packageParams.put("trade_type", ConstantUtils.tradeType);//支付方式
        String sign="";
        try {
            sign= WXPayUtil.generateSignature(packageParams, ConstantUtils.key);
        } catch (Exception e) {
            e.printStackTrace();
        }
        String formData = "<xml>";
        formData += "<appid>"+ ConstantUtils.appId+"</appid>"; //appid
        formData += "<body>" + body+ "</body>";
        formData += "<mch_id>"+ ConstantUtils.mchId+"</mch_id>"; //商戶號
        formData += "<nonce_str>"+nonceStr+"</nonce_str>";
        formData += "<notify_url>"+ ConstantUtils.notifyUrl+"</notify_url>";
        formData += "<openid>"+openId+"</openid>";
        formData += "<out_trade_no>" + "12345678" + "</out_trade_no>";
        formData += "<sign_type>"+ ConstantUtils.signType+"</sign_type>";
        formData += "<spbill_create_ip>"+"127.0.0.1"+"</spbill_create_ip>";
        formData += "<total_fee>" + "1" + "</total_fee>";
        formData += "<trade_type>"+ ConstantUtils.tradeType+"</trade_type>";
        formData += "<sign>"+sign+"</sign>";
        formData += "</xml>";
        return formData;
    }

sign簽名的拼接規則工具類都給我們實現好了，我們直接呼叫就可以了。最後也是最關鍵的一步就是小程式裡面的微信支付過程了，官方支付的程式碼是：

wx.requestPayment(
{
'timeStamp': '',
'nonceStr': '',
'package': '',
'signType': 'MD5',
'paySign': '',
'success':function(res){},
'fail':function(res){},
'complete':function(res){}
})

關於欄位的解釋大家可以去官網上面看看，裡面說的特別詳細，地址就在上面給出的。


最後支付還是需要我們真實用手機付錢才可以，支付的最小單位可以是1分錢，測試的時候我們支付一分錢就可以了。這樣微信小程式支付的整個過程就好了，大致的流程就是上面說的這樣。當然細節還有很多需要注意的地方，不是一篇文章可以概括的，這篇文章對於有過服務號支付的人來說比較好理解，如果沒有過這樣的經驗看起來還是有點迷糊的。我當時剛接觸的時候也研究了好久。所以我打算專門為這個小程式支付做一個講解視訊，視訊地址我會放在我的公眾號裡面或者百度雲盤上面（專案程式碼也會放在上面哦）。視訊教程已經制作好了，雖然有點囉嗦，但都是滿滿的乾貨，還有就是開發過程中一路遇到的各種坑。如果大家對文章有什麼問題或者疑意之類的，可以加我訂閱號在上面留言，訂閱號上面我會定期更新最新部落格。如果嫌麻煩可以直接加我wechat：lzqcode