移動(dòng)支付的普及越來(lái)越廣，像地鐵站的無(wú)人售貨機(jī)，小區(qū)的快遞柜，停車場(chǎng)的充電樁等，這些設(shè)備大部分集成了掃碼支付功能。今天，我們就以項(xiàng)目的形式介紹如何為Linux工控機(jī)接入微信掃碼支付。

一、硬件環(huán)境

• Linux工控機(jī)：致遠(yuǎn)電子DCP-3000L工控機(jī)，配套7寸LVDS液晶屏，分辨率800x480；

• 服務(wù)器：64位Ubuntu主機(jī)，具備上網(wǎng)功能；

• 手機(jī)客戶端：微信客戶端，具備掃一掃識(shí)別二維碼功能。

整體硬件連接框架如圖 1所示：

圖1 硬件連接圖

二、演示效果

先看看最終的效果，客戶端使用Qt框架編寫，其啟動(dòng)界面如圖 2所示：

圖2 演示Demo主界面

點(diǎn)擊小鍵盤，輸入支付金額，點(diǎn)擊確定后客戶端將與服務(wù)器進(jìn)行通信，拿到支付鏈接，本地生成支付二維碼，如圖 3所示：

圖3 生成支付二維碼

接下來(lái)打開手機(jī)微信客戶端，使用掃一掃進(jìn)行掃碼，根據(jù)支付頁(yè)面提示輸入支付密碼，支付結(jié)果如圖 4所示：

圖4 支付結(jié)果

完成支付后，演示客戶端界面上將顯示支付成功字樣，如圖 5所示：

圖5 顯示支付結(jié)果

掃碼接入為何如何容易？服務(wù)器客戶端應(yīng)該怎么處理？PHP是不是世界上最好的語(yǔ)言？說(shuō)好的源碼究竟在哪里？敬請(qǐng)關(guān)注本文以下章節(jié)。

三、系統(tǒng)流程

整個(gè)項(xiàng)目采用CS架構(gòu)，分為嵌入式Linux客戶端、后臺(tái)服務(wù)器以及手機(jī)客戶端三部分，系統(tǒng)流程如圖 6所示：

圖6 系統(tǒng)流程圖

從系統(tǒng)流程圖中可以看到，我們需要編寫客戶端和服務(wù)器端的代碼，客戶端我們使用的是QT框架，服務(wù)器端我們直接使用微信官方的支付SDK包。在客戶端與服務(wù)器的交互過程中，最主要的是拿到微信支付的鏈接地址以及訂單號(hào)，鏈接地址為了生成二維碼圖片，訂單號(hào)為了查詢支付狀態(tài)。

四、服務(wù)器端實(shí)現(xiàn)

從微信官方下載SDK（文末有鏈接），有JAVA、.NET C#、PHP三種類型的SDK提供，如圖 7所示：

圖7 微信SDK

這里我們選擇PHP版本進(jìn)行下載，服務(wù)器端環(huán)境為Ubuntu14.04系統(tǒng)，采用nginx進(jìn)行搭建，端口號(hào)8080。（必答題：PHP是世界上___的語(yǔ)言）

1、PHP+NGINX環(huán)境搭建

我們?cè)赨buntu主機(jī)上進(jìn)行nginx服務(wù)器的搭建，具體步驟為安裝-配置-啟動(dòng)。

安裝nginx服務(wù)器：

配置nginx服務(wù)器，為了不與其它服務(wù)器監(jiān)聽端口號(hào)沖突，我們直接修改nginx服務(wù)器的配置，將默認(rèn)的80端口修改為8080，修改過程如下：

啟動(dòng)nginx服務(wù)器：

由于我們使用的是微信官方SDK的PHP版本，所以我們需要為系統(tǒng)裝上PHP環(huán)境，同時(shí)需要修改nginx服務(wù)器的配置，使其支持PHP。

安裝PHP環(huán)境比較簡(jiǎn)單，Ubuntu 14.04中的安裝命令如下：

接下來(lái)修改nginx服務(wù)器配置，使其支持PHP：

在/usr/share/nginx/html目錄下新建index.php，重啟php5-fpm和nginx進(jìn)行測(cè)試：

打開本地瀏覽器，輸入地址localhost:8080即可看到對(duì)應(yīng)PHP頁(yè)面，如圖 8所示，此時(shí)PHP+NGINX環(huán)境搭建已完成。

圖8 PHP+NGINX測(cè)試結(jié)果

2、微信SDK安裝及修改

將下載好的微信支付PHP版本的SDK進(jìn)行解壓，并將相關(guān)文件拷貝到nginx服務(wù)器根目錄（默認(rèn)為/usr/share/nginx/html，可通過修改/etc/nginx/sitesavailable/default的root參數(shù)進(jìn)行指定，這里我們使用默認(rèn)參數(shù)）：

本地瀏覽器中輸入地址服務(wù)器地址，可以看到微信SDK已經(jīng)運(yùn)行起來(lái)了，如圖 9所示：

圖9 微信SDK頁(yè)面

接下來(lái)我們需要對(duì)SDK進(jìn)行修改，主要是替換商戶信息，SSL服務(wù)端驗(yàn)證禁用，支付接口實(shí)現(xiàn)，查詢接口實(shí)現(xiàn)等。

• 替換商戶信息

要使用微信支付，必須先開通公眾號(hào)或企業(yè)號(hào)微信支付的相關(guān)功能，這里不對(duì)如何開通做過多說(shuō)明，在開通微信支付后，微信會(huì)提供商戶信息，如商戶號(hào)、支付秘鑰等。我們需要替換/lib/WxPay.Config.php文件的商戶信息（SDK中的文件，已經(jīng)被我們拷貝到nginx服務(wù)器根目錄），修改的位置如下：

• SSL服務(wù)端驗(yàn)證禁用

下載的SDK包為V3版本，在低版本的SSL庫(kù)上運(yùn)行會(huì)出現(xiàn)錯(cuò)誤，我們直接禁用SSL服務(wù)端驗(yàn)證功能，修改/lib/WxPay.Api.php文件，將postXmlCurl函數(shù)中的SSL服務(wù)端驗(yàn)證功能禁用，修改如下：

• 支付接口實(shí)現(xiàn)

掃碼支付接口位于/example/native.php文件中，原生SDK包中有示例代碼，我們對(duì)其進(jìn)行修改，實(shí)現(xiàn)的執(zhí)行流程為獲取輸入金額→請(qǐng)求微信支付鏈接→下發(fā)鏈接地址及訂單號(hào)，這里我們使用了分隔符簡(jiǎn)單進(jìn)行數(shù)據(jù)的封裝，實(shí)際應(yīng)用中可以加入JSON或XML格式的響應(yīng)報(bào)文。修改后的代碼如下：

• 查詢接口實(shí)現(xiàn)

訂單查詢接口位于/example/orderquery.php文件中，我們對(duì)其進(jìn)行修改，當(dāng)客戶端POST訂單號(hào)到該接口后，將進(jìn)行相應(yīng)訂單號(hào)的支付狀態(tài)查詢，然后返回支付狀態(tài)。修改后代碼如下：

以上四步完成了微信SDK的安裝和修改，同時(shí)實(shí)現(xiàn)了支付接口以及查詢接口，至此，服務(wù)器部署已完成。

五、客戶端實(shí)現(xiàn)

客戶端使用Qt框架編寫，其中需要處理的幾個(gè)關(guān)鍵點(diǎn)有二維碼圖片生成、網(wǎng)絡(luò)通信及數(shù)據(jù)解析，下面介紹各個(gè)部分實(shí)現(xiàn)的重點(diǎn)。

1、二維碼圖片生成

我們使用了開源的QRencode進(jìn)行二維碼圖片的生成，可以將QRencode的源碼集成進(jìn)Qt工程中調(diào)用，也可以使用編譯好的QRencode可執(zhí)行文件進(jìn)行調(diào)用。

這里我們直接編譯QRencode源碼，編譯依賴zlib以及l(fā)ibpng庫(kù)，為了編譯方便，源碼包中提供了一個(gè)自動(dòng)化編譯腳本，編譯過程如下：

編譯完成后，可以得到qrencode二維碼生成工具，其大致用法如下：

在Qt中調(diào)用該工具顯示二維碼的代碼如下：

2、網(wǎng)絡(luò)通信及數(shù)據(jù)解析

我們使用了Qt的QNetworkRequest模塊進(jìn)行網(wǎng)絡(luò)通信，將相關(guān)功能封裝成Post函數(shù)供調(diào)用，與服務(wù)器交互及數(shù)據(jù)解析的代碼如下：

這里說(shuō)明下硬件連接方式，首先服務(wù)器為Ubuntu主機(jī)，工控機(jī)通過網(wǎng)線將百兆網(wǎng)口與服務(wù)器直連，形成一個(gè)局域網(wǎng)。而本項(xiàng)目中服務(wù)器局域網(wǎng)地址為192.168.1.164，所以在源碼中直接指定了服務(wù)器地址，當(dāng)使用無(wú)線上網(wǎng)時(shí)可以修改服務(wù)器地址為遠(yuǎn)程服務(wù)器的公網(wǎng)IP地址（重大消息：DCP-3000L工控機(jī)自帶4G無(wú)線上網(wǎng)功能，同時(shí)具備全網(wǎng)通撥號(hào)守護(hù)腳本，支持?jǐn)嗑€重?fù)埽髁慨惓z測(cè)，三網(wǎng)自動(dòng)識(shí)別。）。

客戶端剩下的就是界面的邏輯處理啦，在第一小節(jié)部分我們已經(jīng)看到了演示的效果，就不在詳細(xì)介紹了。項(xiàng)目中支付完成后是顯示支付完成并等待下一次支付，而在實(shí)際應(yīng)用中往往是進(jìn)行硬件操作，如打開繼電器開關(guān)，播放音樂等等。至此，微信掃碼支付已介紹完畢，源碼往下拉。

六、說(shuō)好的源碼

源碼github地址：

https://github.com/kp339/qt-wxpay.git