基于微信的付費語音問答系統設計與實現

曲 健，高 航，王 鵬

(1.南京航空航天大學 計算機科學與技術學院，江蘇 南京 211106; 2.南京航空航天大學 航天學院，江蘇 南京 210016)

0 引 言

不斷發展的移動互聯網技術降低了知識信息交互的難度，手機等移動終端成為用戶最重要的上網方式之一。第39次《中國互聯網絡發展狀況統計報告》顯示，截至2016年12月，中國手機網民規模達6.95億，手機網上支付用戶規模達4.69億，網民手機網上支付的使用比例提升至67.5%[1]。

百度知道、搜狗問問等誕生于個人電腦端的傳統問答系統，只是將原有系統界面針對移動終端進行適配，依然采取通過虛擬積分吸引用戶回答問題的問答模式，沒有很好地利用語音消息、位置服務、手機支付等移動終端的特色交互方式，也沒有解決文字錄入效率低的弊端，難以激發用戶的使用熱情。

目前提出的部分針對移動終端問答系統的解決方案，大多需要用戶安裝額外的手機軟件，對使用頻率較低的在線問答系統的推廣造成了障礙。對此，文中基于微信對問答系統進行設計，利用Web開發技術提供了一個可行的解決方案，彌補移動終端中現有問答系統的弊端[2]。

1 系統關鍵技術

1.1 微 信

微信客戶端是騰訊公司推出的為智能終端提供即時通訊服務的免費應用程序。2017年3月22日，騰訊公布2016年年度財務報告，微信月活躍用戶數達8.89億，騰訊移動支付的月活躍賬戶及日均支付交易筆數均超過6億。

微信公眾平臺是微信客戶端的一個功能模塊，開發者在公眾平臺創建公眾號后獲得微信接口權限，為微信用戶提供資訊和服務。利用這些技術接口可實現大量功能，第三方開發者無需耗費大量時間就能開發獨立的手機軟件。

1.2 Web開發技術

該系統采用MVC設計模式[3]，利用HTML5、JavaScript設計面向用戶的系統界面，通過超文本預處理器語言(hypertext preprocessor,PHP)實現用戶界面與服務器、數據庫、微信技術接口的連接。其中，服務器采用云服務器，數據庫采用MySQL。

(1)MVC模式與PHP。

MVC是一種軟件設計典范，包括模型層(model)、視圖層(view)、控制器層(controller)三層結構，用業務邏輯、數據、界面三者分離的方式組織代碼，使網站系統更易于維護。MVC的結構模型如圖1所示。

圖1 MVC結構模型

模型層承擔著項目大部分的業務邏輯代碼，使得項目的業務處理和實體分離，可以對數據庫進行操作；視圖層包括所有用戶界面，分離出這一層是為了使業務邏輯有更好的復用性，讓美工、后臺、前端設計人員同時進行開發，互不影響；控制器層也叫控制層，用于接收用戶請求后下發指令，選擇模型層的相應業務邏輯執行，最后調用視圖層顯示執行結果。

PHP是一種通用開源腳本語言，語法簡單、性能優越，跨平臺兼容性較強，主要適用于Web開發領域。越來越多的網站開始在PHP開發中使用MVC模式，兩者的結合使得網站的目錄結構更加清晰，網站更易于維護與擴展，實現模塊的復用。

(2)HTML5。

HTML5是萬維網的核心語言[4]、標準通用標記語言下的一個應用超文本標記語言(hypertext markup language，HTML)的第五次重大修改，通常配合基于對象和事件驅動的客戶端腳本語言(JavaScript)、層疊樣式表(cascading style sheets，CSS)等實現各類網站的開發工作[5]。

HTML5可以跨平臺使用，其新增的圖形繪制、音頻內容、地理位置定位等特性，能幫助開發者實現更多應用場景。JavaScript常用來為網頁添加各種動態功能[6]，對瀏覽器事件做出響應，配合CSS給用戶帶來更友好的網頁界面[7]。

2 系統設計

2.1 系統整體架構

系統采用云服務器、Windows Server 2008服務器系統、MySQL數據庫[8]，借助Web服務器軟件Apache搭建PHP開發環境。

系統主要由裝有微信軟件的移動終端、微信服務器以及開發者自行購買的云服務器組成，微信用戶可以通過微信公眾號或在微信內點擊鏈接進行訪問。系統整體架構如圖2所示。

圖2 系統整體架構

其中，公眾號由開發者通過微信公眾平臺注冊，注冊成功后擁有調用微信技術接口的權限；移動終端與用戶對接，用于接收用戶發出的指令或請求，并為用戶展現服務器處理指令或請求后返回的結果；微信服務器包含微信公眾平臺的各類技術接口，供云服務器調用，同時將用戶發出的指令或請求轉發至云服務器；云服務器運行該系統的全部代碼，用于處理用戶發出的各類指令或請求，并將處理指令或請求后的結果返回至用戶。

2.2 系統功能設計

針對現有用戶需求與傳統問答系統的不足，主要包括四大功能：付費懸賞提問，用現金懸賞代替虛擬積分，吸引用戶解答問題；語音解答問題，用語音代替文字錄入，解決移動終端文字錄入效率較低的弊端；按地理位置分類問題，提升區域性問題的解答效率；第三方付費查看答案，所付費用由提問者與解答者均分，增加用戶分享傳播的熱情。

根據系統整體架構，為了實現上述功能，系統具體包含的功能模塊如圖3所示。

圖3 系統功能結構

(1)微信授權登錄模塊。該模塊利用微信的“OAuth2.0網頁授權”技術接口，使用戶直接通過微信賬號登錄系統，無需額外注冊或安裝軟件。OAuth是目前國際通用的授權方式[9]，其特點是不需要用戶在第三方網站輸入用戶名及密碼，就可以申請訪問該用戶的受保護資源，OAuth2.0是OAuth協議的最新版本。

(2)懸賞提問模塊。該模塊用于提問者發布懸賞提問，通過支付一定費用而征請眾人為之解答，用現金代替傳統問答系統中的虛擬積分。

(3)語音消息模塊。該模塊借助微信網頁開發工具包JS-SDK，通過服務器存取回答者通過音頻形式提交的答案[10]。

(4)地理位置服務模塊。該模塊利用HTML5可以獲取基于瀏覽器的當前用戶地理位置的新特性，獲取用戶當前的位置信息[11]。對于某些區域性的提問，如“XX社區附近哪里有打印店”，系統可以根據位置信息，將提問優先展示給該區域附近的回答者。

(5)第三方付費查看答案模塊。該模塊用于除提問者、回答者之外的第三方用戶付費查看問題的答案，第三方用戶所支付的金額均分給該問題的提問者和回答者。

(6)微信支付模塊。該模塊借助微信支付功能向用戶發起支付請求，以及向用戶發放在系統內獲得的現金收益[12]。

3 系統關鍵技術實現

3.1 微信授權登錄模塊實現

微信用戶在微信客戶端中訪問該系統時，可以通過微信網頁授權機制獲取用戶基本信息，進而實現業務邏輯。微信授權登錄模塊主要包括OAuth2.0網頁授權[13]和獲取用戶信息兩大部分。

具體而言，網頁授權流程分為四步[14]：

(1)用戶同意授權，獲取code。

code用于后續網頁授權流程，每次獲取后只能使用一次。開發者獲得微信網頁授權接口權限后，擁有授權作用域(scope參數)中的參數snsapi_userinfo，引導用戶訪問帶有此參數的指定鏈接，用戶同意授權后即可獲取code。

具體鏈接如下：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

獲取code鏈接中的相關參數說明見表1。

表1 獲取code鏈接參數說明

授權操作具有較高安全等級，微信會對授權鏈接進行校驗，若鏈接的參數順序不對，授權頁面也將無法訪問。

(2)通過code換取網頁授權access_token。

access_token用于獲取用戶基本信息，開發者借助第一步獲取的code，請求以下指定鏈接獲取access_token：

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

獲取access_token鏈接中的相關參數說明見表2。

表2 獲取access_token鏈接參數說明

access_token的有效期較短，失效后需要用戶重新授權。

獲取正確時返回的JSON數據包[15]如下：

{“access_token”:“網頁授權接口調用憑證”,

“expires_in”:“access_token超時時間”,

“openid”:“用戶唯一標識”,

“scope”:“用戶授權的作用域”}

(3)獲取用戶基本信息。

開發者通過第二步JSON數據包中的access_token和openid拉取用戶信息，請求方法為：

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

獲取正確時返回的JSON數據包中的用戶信息主要包括：用戶昵稱、用戶的性別、省份、城市、國家、用戶頭像。

3.2 語音消息模塊實現

語音消息模塊用于用戶訪問該系統后，系統網頁錄制用戶音頻并存儲至云服務器。目前，能在移動終端實現通過網頁錄制用戶音頻的方法較少，主要包括兩個：微信網頁開發工具包JS-SDK和HTML5的navigator.getUserMedia接口。

navigator.getUserMedia接口的兼容性較差，僅支持谷歌安卓系統原生瀏覽器5.x以上版本，原生安卓瀏覽器在國內的占有率極低。因此通過HTML5實現音頻錄制，不具有實際應用價值。

微信JS-SDK是微信公眾平臺面向網頁開發者提供的基于微信內的網頁開發工具包，借助微信客戶端高效地使用語音、位置等手機系統的能力。開發者在微信公眾平臺配置相關驗證信息，在網站內引入指定JavaScript文件后，即可調用微信JS-SDK。

語音消息模塊的實現，具體分為以下部分：

(1)錄制音頻。

通過調用JS-SDK中的開始錄音、停止錄音接口實現。由于微信系統限制，錄音時間超過一分鐘沒有停止的，將調用JS-SDK中的監聽錄音自動停止接口，強制停止錄音。

(2)上傳和下載音頻。

通過調用JS-SDK中的上傳語音、下載語音接口實現。JS-SDK將音頻文件上傳至微信服務器，開發者可利用微信多媒體接口下載語音到自己的服務器。

(3)播放音頻。

通過調用JS-SDK中的播放語音、暫停播放、停止播放接口實現。

3.3 地理位置模塊實現

地理位置模塊的實現，可以通過兩種方法：微信JS-SDK和HTML5的定位功能[16]。

(1)微信JS-SDK。

通過調用JS-SDK中的獲取地理位置接口實現。可以獲取到用戶的經度、緯度、速度以及位置精度。

(2)HTML5定位功能。

定位功能(Geolocation)是HTML5的新特性，通過調用HTML5中的navigator.geolocation接口實現，可以獲取到用戶的經度、緯度。由于部分版本瀏覽器不支持運行HTML5，因此使用定位功能時，需要首先檢測用戶設備瀏覽器是否支持地理定位。

自動定位功能會產生一個優先推薦地區[17]，最終由用戶確定發布問題的地理位置。

3.4 微信支付模塊實現

用戶在微信內訪問該系統時，可以調用微信支付模塊完成懸賞提問、第三方付費查看功能中的支付流程。

開發者申請到微信支付的接口權限后，將擁有微信分配的商戶系統，統一管理微信支付交易[18]。微信內網站頁面發起支付請求時，商戶系統將首先調用統一下單接口，在微信支付服務后臺生成預支付交易單，等待返回正確的預支付交易回話標識(prepay_id)后再借助微信JS-SDK調起支付。整個業務流程如圖4所示。

圖4 微信支付模塊業務流程

微信支付模塊的實現，具體包括以下步驟：

(1)統一下單。

商戶系統將包括以下參數的請求發送至微信支付服務后臺的統一支付接口，請求成功后將返回XML格式[19]的prepay_id參數值。

<商品詳情

(2)微信內調起支付。

利用第一步獲取的prepay_id，借助微信JS-SDK中的微信支付接口調起微信支付請求，接口輸入輸出數據格式為JSON。支付請求發起后，微信客戶端將調起微信支付控件引導用戶輸入支付密碼，密碼驗證通過支付成功后，商戶系統得到支付成功的通知。

4 結束語

文中設計并實現了一種基于微信的付費語音問答系統，包括懸賞提問模塊、語音消息模塊、地理位置服務模塊、微信授權登錄模塊、第三方付費查看答案模塊、微信支付模塊。系統以語音消息代替純文字作為解答形式，解決了文字錄入效率低的弊端；以現金激勵代替虛擬積分，增加用戶熱情；以微信為基礎，消除了獨立軟件的推廣門檻。

目前系統核心功能均已實現，但仍需在實際使用中不斷優化，不斷設計滿足用戶需求的新功能。

參考文獻：

[1] 沈金萍.第39次《中國互聯網絡發展狀況統計報告》發布我國網民達7.3億[J].傳媒,2017(3):30.

[2] AHMED W,ANTO B. Answer extraction technique for qu-estion answering systems[J].International Journal of Innovative Research in Computer and Communication Engineering,2016,4(11):20352-20357.

[3] 鄭 賢.基于MVC的新型輕量級PHP框架的研究與實現[D].武漢:華中科技大學,2016.

[4] 白 蕾,郭清菊.HTML5與CSS3的設計模式[J].智能計算機與應用,2016,6(2):104-106.

[5] HALLé S, BERGERON N, GUéRIN F,et al.Declarative layout constraints for testing web applications[J].Journal of Logical and Algebraic Methods in Programming,2016,85(5):737-758.

[6] WITTERN E,YING A T T,ZHENG Yunhui,et al.Statically checking web API requests in JavaScript[C]//Proceedings of the 39th international conference on software engineering.Buenos Aires,Argentina:IEEE,2017:244-254.

[7] CHRISTODOULOU S P,GIZAS A B.Design patterns and coding practices for performance-optimised JQuery mobile cultural sites[J].International Journal of Computational Intelligence Studies,2016,5(1):50.

[8] 王家隆.基于MVC公眾賬號交互平臺的數據庫開發[J].電子技術與軟件工程,2017(7):156.

[9] 王丹磊,李長軍,趙 磊,等.OAuth 2.0協議在Web部署中的安全性分析與威脅防范[J].武漢大學學報:理學版,2016,62(5):411-417.

[10] 楊 平.基于iOS平臺交互式語音錄播系統的設計與實現[J].微型電腦應用,2016,32(7):39-41.

[11] GE Jin,GU Juan,HU Yongdeng,et al.Relative positioning of a mobile computing device in a network:U.S.,US9576364[P].2017-02-21.

[12] 畢耕毓.易寶微信支付系統的設計與實現[D].濟南:山東大學,2016.

[13] FETT D,KüSTERS R,SCHMITZ G.A comprehensive formal security analysis of OAuth 2.0[C]//Proceedings of the 2016 ACM SIGSAC conference on computer and communications security.[s.l.]:ACM,2016:1204-1215.

[14] 王婷婷,趙松澤.基于OAuth2.0協議的安全授權模型研究[J].軟件工程,2017,20(1):55-59.

[15] 仇小花,秦栓栓,邱 果.基于WEB開發中的XML與JSON數據傳輸格式研究[J].信息技術與信息化,2017(4):123-125.

[16] 彭 紅.基于云計算的LBS應用研究[J].軟件工程,2016,19(10):27-29.

[17] 王榮榮,薛旻輝,李祥學,等.基于位置社交網絡的高效定位算法[J].華東師范大學學報:自然科學版,2016(2):62-72.

[18] 敖 毅.基于HTML5實現的微信公眾號支付漏洞分析與研究[J].網絡安全技術與應用,2016(8):41-43.

[19] KUPER G, MASSACCI F, RASSADKO N. Generalized XML security views[J].International Journal of Information Security,2016,8(3):173-203.