曲 健，高 航，王 鹏

(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.