利用微信公众号建立的问答系统主要分为两大板块, 分别是后台的题库部分和前端的读者答题部分。整个系统的流程如图1所示:

图1

	Figure Option ViewDownloadNew Window
	图1 趣味问答流程图

建立微信趣味问答系统, 需要首先建立一个题库。常见的题目类型有单选题、多选题和问答题, 鉴于读者使用手机时的便捷性以及系统运行、阅卷的人力开销, 微信趣味问答系统以选择题题型为好, 尤以单选题为佳。后台题库的数据表字段如表1所示。题库由系统管理员操作, 涉及新建题目、对题目增删改的管理操作, 实现方法较为常见, 此处不再详述。

表1

表1

表1 题库表Questions字段 字段 字段类型 字段含义 id int(8), AUTO_INCREMEN 题目序列 type tinyint(1) 题型: 单选, 多选 tag char(255) 标记: 出题人信息 question char(255) 题目内容 answer char(10) 正确答案 options char(255) 题目选项 create_time datetime 题目创建时间 limit_time smallint(4) 限制答题时间 status tinyint(1) 题目是否删除

表1 题库表Questions字段

趣味问答系统的读者答题界面由微信公众号接口实现, 其一级菜单设置为“ 趣味问答” , 二级菜单设置为“ 开始答题” 、“ 历史成绩” 和“ 错题解答” 。

点击二级菜单“ 开始答题” , 开启答题功能, 系统从题库中随机选取任意道题目, 形成趣味测试卷, 供读者互动答题。回答正确则记录答题耗时、答题情况等信息; 回答错误则记录错误信息并记录答题情况等信息; 无论对错与否都给出相应提示。“ 历史成绩” 和“ 错题解答” 是基于上述信息的。因此, 答案表非常重要, 字段设计如表2所示:

表2

表2

表2 答题表Answers字段 字段 字段类型 字段含义 id int(8), AUTO_INCREMENT 答题序列 user char(255) 答题读者 question_id int(10) 题目题号 create_time datetime 选题时间 answer_time smallint(4) 答题时间 answer char(10) 选择答案 error int(4) 是否回答正确 status tinyint(1) 是否答题 explain char(255) 题目解答

表2 答题表Answers字段

在问答系统整个流程中, 微信的通信方式都是“ text” , 即文本格式。

(1) 答题环节的设定

答题是一个循环的过程, 其流程如图2 所示。系统从缓存中读取相关数据, 根据答题的顺序判断是否是最后一题。如果是最后一题, 则清空缓存, 提示相应信息, 退出系统; 如果不是最后一题, 则继续抽取下一题, 同时答题序号自增。

图2

	Figure Option ViewDownloadNew Window
	图2 答题环节流程图

答题规则根据图书馆举办的活动规则定义。可以全部答完题再判断每题得分, 最后提示读者本次问答竞赛获得的分数; 也可以模拟闯关的方式, 每做完一题就判断得分, 回答正确则继续答题, 回答错误则退出本次问答竞赛。

(2) 随机抽题

从题库中随机抽取任意N道不重复题目是问答系统的关键之一。数据库本身有获取随机记录的函数, 如数据库MySQL中的RAND函数, 但效率不高, 尤其是题库题量大时, 系统运行速度会明显下降。因此可以结合SQL语句解决这一问题。以PHP+MySQL为例, 代码如下, 其中$question_nums是变量, 代表上文所说的随机抽取的N道题目。

$sql="select * from questions where question_id > =(select
floor(rand()*

((select max(question_id) from questions)-

(select min(question_id) from questions)) +

(select min(question_id) from questions)))

order by question_id limit ".$question_nums);

$question_answer_tips="";

如图3所示, 在菜单“ 趣味问答” 一栏, 下分三个二级子菜单, 分别对应不同功能。

图3

	Figure Option ViewDownloadNew Window
	图3 趣味问答测试平台效果图

该功能在测试阶段邀请了校内外20位读者同时参与测评, 系统可以稳定运行, 同时向多位读者的微信客户端提供服务。由于后台存取读者微信号的open_id, 所以参与“ 趣味问答” 时无须绑定汇文账号。经过测试, 系统题量在5-10题为佳。

将闭馆音乐菜单功能设计如下: 微信一级菜单“ 闭馆音乐” (也可以命名为“ 闻音” )下分成三个子菜单— — “ 本期美乐” , “ 往期欣赏” 和“ 音乐推荐” , 分别用来向读者提供本期闭馆音乐, 以往的闭馆音乐, 以及互动功能(例如闭馆音乐推荐或者闭馆音乐投票)。

微信音乐欣赏的实现流程如图4所示:

图4

	Figure Option ViewDownloadNew Window
	图4 闭馆音乐欣赏的实现流程

(1) 音乐播放器的建立

利用HTML5+JS的方式建立一个音乐播放器, 定义网页播放器的类型和编码, 控制屏幕大小。

播放器控制的代码, 可以用JS实现, 集成在一个JS文件内。主要实现有关播放器的一些绑定操作, 比如播放、暂停, 检测歌曲载入和播放时间, 检测歌曲是否播放完毕等。

(2) 调用音乐

实现闭馆音乐在线欣赏的难点是, 通过微信通信接口调用后台的音乐, 实现前台的播放器操作。播放器是静态页面, 后台通过location.search获取前端页面的URL传递的参数、歌曲ID和微信用户ID。

接下来, 需要从服务器获取歌曲的详细信息, 更新播放器。

function get_song(song_id, open_id)

{

$.ajax({ //异步获取服务器数据

url: "…?t=jsonp& song_id="+song_id+-1003-3513-31-11-104"& open_id="+open_id,

//即: 播放器页面地址?歌曲ID=0& & 微信用户ID=xxx

dataType: 'jsonp', //接收数据的格式

jsonp: 'callback', //校验的变量名

timeout: 3000, //保持连接最大时间, 超过则断开

success: function(json) { //通信成功后执行事件

…

}

其中, song_id表示歌曲ID, 播放器选择本期或者往期闭馆音乐, 需要将歌曲ID传递到服务器上, open_id是微信用户ID, 用于标记读者对音乐的互动看法。获取歌曲信息的方式是, 采用Ajax异步获取, 这样可以在不刷新当前页面的情况下从服务器上获取数据。

音乐在线欣赏的测试环境设计界面如图5所示。界面设计较为简单, 在实际应用中可以通过修改前端的HTML文件, 美化读者界面, 如添加音乐的作者信息、封面信息等。

图5

	Figure Option ViewDownloadNew Window
	图5 在线音乐测试环境效果图

音乐欣赏的功能, 本质是在微信客户端提供一个音乐界面的链接, 读者与系统交互基于读者的微信ID实现。通过测试发现, 如果歌曲以第三方链接方式展现, 效果不好, 将音乐曲目放在本地为佳。

测试阶段邀请20位读者参与, 测试周期为5日。测试结果表明, 该功能符合读者兴趣, 能够吸引读者多次参与使用。

微信照片墙的运行流程如图6所示。读者上传照片到图书馆公众号, 后端对照片进行压缩处理和审核工作。图片上传后, 读者可以在用户界面选择照片墙的实现方式, 选择自己的照片或者感兴趣的其他照片, 点击放大后显示详细图片信息。

图6

	Figure Option ViewDownloadNew Window
	图6 微信照片墙流程

在这一过程中, 关键点是微信的图片消息通信方式和上传图片的处理。目前微信公众号已经开放图片消息接口。当读者向图书馆公众号发消息时, 微信服务器将POST消息的XML数据包到相应服务器上, 上传的数据包内容包括: 图书馆公众号、读者微信ID、消息创建时间(整型)、读者上传图片的链接、图片媒体ID等。

在照片处理过程中, 需要保存图片、等比例缩小图片、为新图片命名等。等比例缩小图片的算法如下, 其中, $distWidth为图片目标宽度, $distHeight为图片目标高度, $percent为图片缩放比例。$new_width为图片实际宽度, $new_height为图片实际高度。

if($width/$height > = $distWidth/$distHeight)

{ if($width > $distWidth)

{ $percent = $distWidth/$width;

}

}

else

{ if($height > $distHeight)

{ $percent = $distHeight/$height;

}

}

$new_width = $width * $percent;

$new_height = $height * $percent;

“ 照片墙” 功能的菜单如图7所示。子菜单“ 上传照片” 是“ CLICK” 类型(type), 点击后系统提示读者上传照片。读者上传互动照片后, 后台自动回复提示信息。

图7

	Figure Option ViewDownloadNew Window
	图7 照片墙测试环境效果图

照片墙功能在测试阶段邀请20位读者参与, 结果无延迟问题。在测试中发现, 用微信客户端欣赏照片, 显示效果与手机屏幕大小有关。因此除了提供微信客户端欣赏, 还可以提供PC端欣赏方式。

照片墙这一功能还能应用在摄影比赛等相关活动, 后期可以增加微信打分等功能。