Knowledge Management Forum >

2015 , Vol. 2015 >Issue 3: 37 - 44

DOI: https://doi.org/10.13266/j.issn.2095-5472.2015.03.006

Design and Implementation of a Social Library under WeChat JS-SDK

  • Chen Chen
Expand

Received date: 2015-07-23

  Online published: 2025-04-28

Fold

Cite this article

Chen Chen . Design and Implementation of a Social Library under WeChat JS-SDK[J]. Knowledge Management Forum, 2015 , 2015(3) : 37 -44 . DOI: 10.13266/j.issn.2095-5472.2015.03.006

1 引言

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的功能，为微信用户提供更优质的网页体验[1]。微信开放的SDK，使微信浏览器分享的页面能够通过JS-SDK按照自定义格式分享到朋友圈，而微信朋友圈是当下炙手可热的社交圈子(截至2014年12月，微信朋友圈的月活跃账户增长至2.47亿户[2]),因此可以充分利用微信整个产品生态环境进行推广使用。北京市委党校图书馆以微信浏览器为前端开发展示平台，既克服了不同浏览器的兼容问题，同时也避免了在android、ios等不同手机系统下操作带来的不一致性；充分利用微信JS-SDK进行创新开发，加入语音录制上传、图片上传等功能，则让用户像使用手机社交应用一般使用微信图书馆。

2 系统方案设计

2.1 相关高校图书馆微信平台分析

以微信为平台的图书馆公众号日益增多，笔者按开发时间顺序调查了多个高校图书馆公众号和社会上的图书馆公众号。东南大学图书馆公众号[3]和清华大学图书馆公众号[4]，采用的方式大致一样，点击自定义菜单，进入的页面只是一个常规网页页面，内容堆积过多；在首都图书馆公众号的部分菜单下，用户必须发送相关指令才能进行相关操作，用户体验不够良好；2015年的云南大学图书馆公众号则克服了这一问题，使用HTML 5响应式网页设计改善了用户体验[5]，但是在图片显示上没有做到优化，图片无法单击查看原图，用户体验效果低下。绝大多数公共和高校图书馆的服务内容都大体一致[6]，没有实现用户与用户之间的交互，只是图文的堆积。因此，本文将利用微信开放的JS-SDK，建立一个集图文、声音、社交于一体的移动图书馆。

2.2 系统流程架构

笔者所设计的系统主要实现网上微信图书馆的功能，这个图书馆社交空间主要包括以下3个功能模块：①接口配置模块；②前端用户模块；③数据储存模块。
前端用户模块是核心模块，用以实现文字、图片、声音、社交图书馆的相关功能，主要包括以下3个部分：①用户可以在图书馆页面将喜欢的书籍封面拍照上传，其他用户可以通过点赞进行表态，实现简单社交功能，点赞排名靠前的书籍，图书馆将优先采购，同时其他用户可以通过微信书籍封面的扫一扫功能获取图书的详细信息；②用户可以在图书馆页面现场录制一段语音，本功能后期将只针对即将毕业的同学开放，用于毕业生寄语；③改善用户体验，一是增加网络环境提示，二是提供朋友圈自定义分享功能，即用户在自己的页面进行朋友圈转发或好友转发时能显示自定义的图片和文字。
读者首先需要登录自己的微信账号，然后可以通过各种入口进入微信浏览器，包括扫二维码、点击公众号的文章里的链接、消息内容里的超链接等，进入到微信内置浏览器后系统首先需要用户进行授权认证，即需要访问用户的微信头像、昵称等个人信息，为以后做用户结构调查奠定基础。用户被允许访问后，便可以体验微信JS-SDK提供的各项功能，另外，使用微信JS-SDK之前，微信公众号管理员首先需要到后台设置JS接口安全域名，即设置为SAE[7]提供的免费二级域名。后台内容存储方面，系统使用Storage[8]来存储微信录音或上传的图片内容，而图书馆动态等文字性内容则使用关系型数据库来存储，具体如图1所示：
图1 微信开放JS-SDK下的图书馆系统流程架构

2.3 系统功能模块分析

通过对图1进行功能分解可以看出，系统主要功能模块是浏览器页面端的数据处理，腾讯在新版QQ浏览器内置了X5内核，并直接应用到了微信浏览器中，因此，微信浏览器将调用X5内核，完美支持HTML 5技术，与JS-SDK协作以实现更好的用户体验。本文从以下3个模块进行分析：

2.3.1 Oauth 2.0用户认证模块

通过网页授权获取用户基本信息，即用户通过网页授权后才能访问页面，非微信客户端的用户无法访问。Oauth通过组织在资源拥有者和HTTP服务商之间的被批准的交互动作代表用户，允许第三方应用代表用户获得访问的权限。同时为Web应用、桌面应用提供专门的认证流程[9]。

2.3.2 前端JS-SDK的调用模块

调用音频类接口实现“毕业寄语”功能,即由毕业季学生在线朗读并录音一句话或一句语录，实现“有声”图书馆的用户体验；调用图片类接口实现“图书推荐”功能,即用户上传手机本地图片或调用摄像头功能拍照上传图书的封面照片作为推荐，其他用户可以进行点赞，并将其作为图书馆定期采购书籍的重要参考,同时用户上传的封面图片可以通过微信的扫一扫封面功能直接跳转到书籍的介绍页面和购买页面，方便用户参考；调用分享类接口实现自定义分享内容到朋友圈；最后利用获取网络状态接口，判断用户网络状态，并给予用户友好的提示以增强用户体验，尤其是当用户播放长时间的音频和下载比较大的图片的时候。

2.3.3 数据存储模块

系统运行过程中产生的数据主要包括录音、图片、统计数据等。此模块分别用到了分布式文件存储服务和关系型数据库，其中关系型数据库同时作为后台程序的数据存储，包括图书馆动态发布等功能。

3 系统实现

系统开发语言使用PHP 5.3.29，为提高开发效率，采用面向对象的Web框架Thinkphp 3.1进行开发，集成开发工具使用Zend studio 10，关系型数据库MYSQL、Web服务器、代码托管工具SVN、二级域名都由SAE提供。SVN客户端使用Zend studio内置的SVN客户端。前端页面的结构功能采用javascript的框架Jquery以及HTML 5相关标签。系统首先使用网页授权获取用户基本信息。授权过程与传统登录过程类似，通过判断当前用户是否存在会话SESSION来判断用户是否已经授权。主要包括以下3个步骤：①用户同意授权，系统获取code；②通过code获取网页授权access_token；③获取用户信息 [10]。由于多个页面需要用户授权，因此将用户授权功能写入一个基类，需要授权的页面继承这个基类即可，授权成功后将用户的信息存入数据库，并设置用户相关SESSION以标识已经授权的状态，避免多次调用授权接口。认证界面如图2所示：
图2 微信Oauth认证界面
下文重点介绍系统的微信JS-SDK调用模块。微信JS-SDK调用前需要做一些准备工作。管理员登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”，设置为SAE提供的二级域名即可。JS-SDK统一封装在一个js文件中，使用时先下载该js文件，然后在系统中引入该文件，而且所有需要使用JS-SDK的页面必须先输入配置信息，否则将无法调用，认证签名时获取的jsapi_ticket需要将其缓存，避免多次请求接口。再将服务器端的签名作为参数传入客户端js文件。全局配置部分代码如下：
<script type="text/javascript" src="__PUBLIC__/js/jweixin-1.0.0.js"></script>
wx.config({
debug: false, // 调试模式
appId: '{$app_id}', // 必填，公众号的唯一标识
timestamp: '{$timestamp}', // 必填，生成签名的时间戳
nonceStr: '{$nonceStr}', // 必填，生成签名的随机串
signature: '{$sign}',// 必填，签名，见附录1
jsApiList: ['scanQRCode','previewImage','onMenuShareTimeline','getLocation','openLocation','startRecord','stopRecord','playVoice','uploadVoice','downloadVoice','chooseImage','uploadImage'] // 必填，需要使用的JS接口列表，包括录音模块、图片模块、网络模块等。
});
wx.ready(function () {
……//模块调用位置
});
系统调用JS-SDK签名认证的详细流程如图3所示：
图3 微信JS-SDK的签名认证
最终实现页面见图4，左右图分别为iPad和手机端的浏览效果。
图4 首页页面效果图

3.1 毕业寄语模块

毕业寄语模块的实现主要包括以下几个步骤：录音开始、录音结束、播放录音、暂停录音、上传录音、下载录音。首先获取用户授权录音权限，用户通过开始录音接口和结束录音接口进行录音并保存在本地，然后调用播放录音接口提供本地播放试听，当用户确认录音没有问题以后，客户端通过上传录音接口请求微信服务器并将录音上传，微信服务器上传的语音有效期为3天，因此需要通过微信多媒体接口下载语音到自己的服务器，也即是SAE的Storage。微信服务器将用户上传的本地录音保存为音频流并生成一个媒体标识，微信客户端再将返回来的媒体标识通过客户端ajax异步存储到MYSQL中。当用户请求自己之前录制的录音时，服务器端通过MYSQL查询当前用户的媒体标识，再将此媒体标识作为参数传给微信下载接口，将下载的音频流存入Storage。下载的音频流格式为amr，该格式可以直接通过微信内置X5浏览器所支持的HTML 5的audio标签播放。系统模块流程如图5所示：
图5 读者上传录音并下载最终音频流的过程
最终效果如图6所示：
图6 录音功能界面
语音上传接口需要上传音频的本地ID，由stopRecord接口获得，上传成功后通过ajax将音频保存到数据库服务器。再构造微信音频下载接口所需要的URL，下载音频到Storage。

3.2 用户分享模块

分享接口的功能主要是自定义分享内容到朋友圈。该接口必须是认证公众号才能调用成功。首先需要指定自定义的图片和标题与描述，图片路径使用绝对路径。微信右上角分享功能包括分享到朋友圈、分享到微博、分享给朋友等。调用接口形式基本相同，下文以分享到朋友圈为例说明。分享接口调用只在微信浏览器客户端生效，不需要与服务器端有交互。分享类接口的监听接口必须在wx.ready回调函数中触发。部分代码如下所示：
wx.ready(function () {
var imgUrl='http://phelps.sinaapp.com/tp/Public/images/getheadimg.jpg'; //绝对路径
var imgLink = "http://phelps.sinaapp.com/tp/index.php/Index/home"; //绝对路径
var title = '北京市委党校-iLibrary'; //自定义分享标题
wx.onMenuShareTimeline({
title: title, // 分享标题
link: imgLink, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});

3.3 书籍推荐模块

图片类接口主要是调用手机相册或者摄像头拍摄照片并将图片上传，通过调用图片上传的JS-SDK方法，就能实现一个原生APP的复杂调用功能，而且不存在手机操作系统的差异性带来的兼容问题，用户体验良好。数据流程与音频类接口类似，用户选择图片后即在本地生成一个图片缩略图，用户判断是重新选择图片还是上传图片。确认上传图片后将图片上传到微信服务器，同时保存到SAE的Storage文件存储服务器上，存储路径采用与录音文件同一个域domain，但放在不同的文件夹中，方便后期管理。在上传页面通过MYSQL数据库获取用户以往上传的封面图片，并在每张图片上绑定单击预览原图事件，调用成功后，单击列表页面的小图可以进入原图，手指左右滑动能浏览前后的封面书籍图片。
由于SAE不支持文件的写操作，因此系统生成的音频和图片需要借助SAE的Storage分布式文件存储服务来持久化地存储文件。首先在SAE新建domain，笔者取名为phelps，便可以从分布式文件系统中获得分配空间，存储文件和调用文件都需要实例化SAE的SaeStorage类，并将SAE服务器上建立的domain名称作为参数传递给SaeStorage。对于常规的文字信息，笔者使用的是SAE的分布式MySQL数据库集群服务，可以支持百万级的数据库访问。启用该数据库后SAE会自动分配用户名和密码，并通过PHPMYADMIN客户端来进行管理。SAE的PHP环境提供了标准的MySQL、MySQLI和PDO模块(基于libMySQL)，笔者使用MySQL作为关系型数据库。数据库的操作主要集中在用户表的信息上，即是存储通过Oauth 2.0授权后的用户信息以及用户的相关信息、用户录音表、用户图片表等。

4 系统使用反馈

至系统投入使用2个月以来，党校学员、各个部门职工反响积极，根据数据库统计，从上线截至2015年9月11日，已经有212人关注图书馆公众号，绑定职工身份的教职工占人数的三分之二左右，图书馆页面访问共计1 324次，关注用户共推荐书籍323册，所有书籍共被点赞432次，有41位毕业季的研究生上传寄语录音，朋友圈分享474次，分享页面打开689次。笔者总结了其中存在的部分问题，主要有以下3个方面：①缺少用户分类验证功能，暂时无法机器识别用户类别，如馆员、普通用户、毕业季学生等；②缺少图书馆的常规功能，如借书、还书、借阅状况查询、馆藏查询等功能；③系统入口比较不方便，关注者只能通过单击分享的网页才能进入到系统。
针对用户反馈的问题，笔者针对系统设计进行了详细的分析，并积极寻找解决方案：如关于图书馆常规功能的实现，首先向学校图书馆系统承建方获取相关数据表信息，主要包括读者表、借阅信息表、馆藏表等，其数据库采用的是SQL SERVER，通过THINKPHP的跨库查询，将相关数据返回给浏览器。前端入口可以参考其他微信公众号设计，将其入口放置在自定义菜单，通过自定义菜单单击事件来进入相关操作页面，这样能从单击事件中获取用户的微信openid，以此来标识用户身份。系统的入口也可以加入到自定义菜单中，这样便形成了一个整体。

5 结语

如今，越来越多的新颖的图书馆微信公众号涌现出来，而微信用户群也越来越大，读者的需求已经不仅仅是方便地使用移动图书馆，而是更加关注社交类的交互。北京市委党校图书馆提出一种新颖的社交图书馆的概念，在微信JS-SDK的技术基础上开发的富功能的移动社交图书馆，使用户在使用微信图书馆时就像使用原生社交APP一般，甚至优于原生APP。本文针对其中的关键技术模块进行了分析阐述，并及时收集用户使用后的反馈信息进行分析，提出了相应的解决方法，为下一步的研究指明了方向。随着微信JS-SDK开放的接口越来越多，同时HTML 5技术不断发展、无线网络覆盖面积越来越广，微信端的应用在未来还会有很大的发展空间。另一方面，SAE提供的云服务十分全面，包括笔者未使用的Memcache、全文检索等，因此未来可以更高效、便捷、经济地构件一个基于微信的Web系统。

References

Publishing order | Descend order by publishing year | Descend order by cited within
[1]
腾讯公司.微信JS-SDK说明文档[EB/OL].[2015-01-13]. http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html.

[2]
网易财经.微信朋友圈月活跃账户达2.47亿户[EB/OL].[2015-04-18]. http://money.163.com/13/0418/07/8SNODLPQ00253B0H.html.

[3]
罗涛.图书馆微信公众平台的建设与研究[J].现代图书情报技术,2015(1):96-100.

[4]
姚飞,张成里,陈武.清华智能聊天机器人“小图”的移动应用[J].现代图书情报技术,2014,30（7）:120-126.

[5]
毕剑,刘晓艳,张禹.使用响应式网页设计构建图书馆移动门户网站——以云南大学图书馆为例[J].现代图书情报技术,2015(2):97-102.

[6]
赵洁,马铮,王雪雅.基于微信的图书馆服务:现状与服务模式构建[J].情报理论与实践,2014,37(7):90-110.

[7]
新浪公司.新浪应用引擎平台[EB/OL].[2014-11-03]. http://sae.sina.com.cn/doc/intro/architecture.html.

[8]
新浪公司.Storage——分布式文件存储服务[EB/OL].[2014-11-01]. http://apidoc.sinaapp.com/class-SaeStorage.html.

[9]
百度百科.Oauth[EB/OL].[2014-12-03]. http://baike.baidu.com/link?url=TZyIOEZov5pHTytCgtWF44yAsbMdyF73UvdXNp0EhyWf8gCMeNQ551ybt4S3fwFR3yos6KBDb8jU_DQEOdhH1_ .

[10]
腾讯公司.网页授权获取用户基本信息[EB/OL].[2015-01-13]. http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html.

Options
Outlines

/

〈 〉