如何利用Linux工控機實現(xiàn)微信掃碼？

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

一、硬件環(huán)境

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

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

• 手機客戶端：微信客戶端，具備掃一掃識別二維碼功能。

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

圖1 硬件連接圖

二、演示效果

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

圖2 演示Demo主界面

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

圖3 生成支付二維碼

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

圖4 支付結(jié)果

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

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

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

三、系統(tǒng)流程

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

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

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

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

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

圖7 微信SDK

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

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

我們在Ubuntu主機上進行nginx服務(wù)器的搭建，具體步驟為安裝-配置-啟動。

安裝nginx服務(wù)器：

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

啟動nginx服務(wù)器：

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

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

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

在/usr/share/nginx/html目錄下新建index.php，重啟php5-fpm和nginx進行測試：

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

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

2、微信SDK安裝及修改

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

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

圖9 微信SDK頁面

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

• 替換商戶信息

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

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

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

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

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

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

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

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

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

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

1、二維碼圖片生成

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

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

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

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

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

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

這里說明下硬件連接方式，首先服務(wù)器為Ubuntu主機，工控機通過網(wǎng)線將百兆網(wǎng)口與服務(wù)器直連，形成一個局域網(wǎng)。而本項目中服務(wù)器局域網(wǎng)地址為192.168.1.164，所以在源碼中直接指定了服務(wù)器地址，當(dāng)使用無線上網(wǎng)時可以修改服務(wù)器地址為遠程服務(wù)器的公網(wǎng)IP地址（重大消息：DCP-3000L工控機自帶4G無線上網(wǎng)功能，同時具備全網(wǎng)通撥號守護腳本，支持?jǐn)嗑€重?fù)?，流量異?a target="_blank">檢測，三網(wǎng)自動識別。）。

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

六、說好的源碼

源碼github地址：

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