【《基于HTML5微信公众号的设计与实现》7500字（论文）】.docx

基于HTM1.5微信公众号的设计与实现摘要：随着4G网络的大规模应用，移动互联时代的到来改变了人们的上网方式。传统的网站在移动端的不便利性也越来越明显，新一代的万维网核心语言HTM1.5,实现了新的超文本标记语言，可以多设备的跨平台使用，加上目前国内智能手机的迅速普及和政府对于4G网络的大力推广，也为HTM1.5在国内开发者的使用上提供了一个良好的发展环境。微信公众号利用HTM1.5的新技术特性来开发具有很好的实践意义，今后随着移动互联网技术的不断发展，能够开发出用户体验更好和客户端安全性更高的微网站。关键词：微信公众号；HTM1.5;移动互联网目录1"Vts211¾tf212HTM1.5j)I2121I彳/31.2.2Drag&Drop直接拖拽功能31.2.3CarlVaS31.2.4Audio/Video标签32.茁i32.1数据通信子系统42. 2消息处理模块库42. 3粉丝行为收集子系统43. 'S11-53. 1HTM1.5推客户而设十.53. 2消息处理模块库的设计53. 3微站可视化编辑子系统的设计63. 4数据通信子系统的设计741通信录树状结构实现84. 295. 3II*生91 .绪论1.1 研究背景及意义微信公共平台于2012年8月23日正式上线，这是基于微信的一个附加功能，任何组织或个人均可免费申请微信公众帐号。获得帐号后可通过后台编辑文字、图片、语音、视频等信息，并群发给关注该帐号的用户，但每天仅可群发一次。同样地，用户主动给微信公众平台发送文字、图片、语音、视频等信息，公众平台可以根据预先设定好的规则，自动反馈相应的信息给用户支基于HTM1.5微信公众平台，丰富了原有编辑平台的功能，可以使接入公众账号瞬间拥有十分强大的功能。基于HTM1.5的微信公众平台设计与实现的意义在于以下几个方面：一是对于微信公众账号的运营者。对那些不懂计算机程序技术的运营者可以建立属于自己的程序接口，让他们通过简单的配置，即可拥有强大而又个性化的微信公众平台管理系统。使运营者可以专注于内容的运营，而不被如何呈现内容的方式而分心。相反地，该HTM1.5还可以辅助运营者，以更佳的方式方法呈现运营者发布的内容，用一些程序小工具维系订阅用户的粘度。另一方面，对于微信公众账号的订阅者。通过关注接入了微信公众平台HTM1.5的公众号，可以获得比一般公众账号更多的功能，诸如天气查询、列车查询、微网站等。可以使得用户对这样的公众账号有着更好的用户体验，使用户更加乐于使用这们的公众账号。再者，对于微信公众平台本身来说，开发这样的HTM1.5,丰富和加强了微信公众平台本身的功能,扩展了微信公众平台的生态链。从另一个角度来看，也可以促进微信公众平台自身功能的扩展。1.2 HTM1.5简介HTM1.5取代了HTM1.4.0和XHTM1.l.0标准，是更为适应互联网近几年飞速发展的需要的技术。HTM1.5的技术开发主要包括HTM1.5、JavaScript和CSS3.0技术，也就是说HTM1.5标准包含了以上者三种技术。它能够有效简化浏览器处理由不同公司研发的富互联网应用程序方式(如AdobeFlashyMicrosoftSilVerIight)的解析过程。新版本的HTM1.搭载了新的网页元素、行为与属性，主要为以浏览器为基础的互联网新体验模式，例如使用VIDEO)标签和AUDIO标签，不需要安装插件就能在浏览器中浏览多媒体内容；同时HTM1.5也摒弃了HTM1.4标准中的部分内容，如font标签，这部分功能由CSS3.0代替。除此之外，HTM1.5标准还支持富互联网应用程序的开发，比如及时二维绘图、本地离线存储、控件拖拽和历史记录功能等。HTM1.5不仅仅是HTM1.4版本的全面升级，更是20年来互联网技术的一次巨大飞跃。它使Web应用更加成熟化、平台化，潜移默化中改变着互联网的使用模式。林江，俞宙，肖然.基于HTM1.5打造广东天气微信微门户几广东气象，2014,03:71-73.林江,俞宙,肖然.基于HTM1.5打造广东天气微信微门户川.广东气象，2014,03:71-73.我的工作运用了HTM1.5的文件缓存、网页内拖拽、地理信息共享、Canvas图形绘制等相关技术。下面对这些技术的应用进行相关介绍。1.2.1 文件缓存文件缓存功能能够为用户储存浏览器中的浏览资料，使其在断网或离线的情况下仍然能够正常浏览网页。对于移动产品特别是iPad平板电脑上的网页应用程序的开发来说这项技术特别重要。在产品演示系统的开发中，真用户在移动平台上使用产品演示系统时经常出现的网络不通畅、掉线和用户的误操作等突发状况,这些不能由传统HTM1.静态网页解决。但是我们利用HTM1.5的文件缓存功能，能够在任何临时情况下使用产品演示系统，通过浏览器缓存浏览演示Demo,实现用户实现无障碍浏览。1.2.2 Drag&Drop直接拖拽功能HTM1.5新增了DragStart和DragEnd事件，能够实现开发者在网页中的拖拽事件功能，此外，通过拖拽事件，用户能够把本地文件拖拽入网页中。最初，这项技术是针对在桌面上进行的鼠标操作而设计的。但是其本身却不能在iPad中运用，为了实现用手指随意移动拖拽网页内控件的功能，同时现有的资源库中缺少能够同时兼容iPad和鼠标操作的类。我们在产品演示系统中增加了OnTouchEvent等支持捕获手指位置及状态的类的程序编写，并且做到了桌面上进行鼠标操作的兼容支持。这项新增功能便于用户实现的演示Demo中对于视频、音频的处理操作。1.2.3Canvas图形绘制使用Canvas标签不仅能轻松实现网页的控制或修改图像，也给网页中的动画开发提供了条件。这种操作方法是以像素为基础的，配合JaVaSCriPt代码，不需要安装任何插件即可达到当前仅在FlaSh或SiIVerlight中才能实现的效果。在产品演示系统中，Canvas标签是不可或缺的工具，它能够实现在不同场景间演示DCmO的模拟和扩展，比如显示动画、创建复杂控件等。比如说，我们在iPad平板电脑中利用Canvas画布实现了CoverFlow效果的模拟，而现有的大部分CoverFlow模拟程序都是以Flash技术为基础的，而这一类的控件无法在IPad平板电脑中使用。此外，本课题还通过CanVaS技术对网页内多媒体播放进行多元化效果控制，一个创新的、动态的演示系统能够有效吸引用户使用产品演示系统，因此在对于升级与开发产品演示系统的时候，Canvas技术可以用来解决更为复杂的应用问题。1.2.4Audio/Video标签在HTM1.5网页中只需要加入AUDIO>/<VIDEO>标签并使用JaVaSeriPt代码开发操作面板就能够在网页中灵活播放多媒体，而无需安装插件播放音频或视频多媒体文件，而同时利用CanVaS技术对多媒体文件进行效果控制。因为公司很多宣传靠视频手段，所以在产品演示系统的演示Demo场景中也存在大量用于用户租住浏览的视频文件。通过同时使用这两个标签，使在iPadSafari中直接浏览视频成为了可能，而无需再在系统升级时安装浏览器插件。此外，我们利用Audio标签研制了嵌入演示Demo中的语音向导模块，这不仅引起了潜在用户群对于产品演示系统的兴趣、同时也使演示DemO所要表现的内容更为清晰。可以说，如果没有这两项功能，就无法实现在iPad上开发产品演示系统。2.需求分析本系统程序在.DIETFramework4.0框架下开发，数据库采用SQ1.Server2005,使用C#编程语言，页而依照HTM1.5标准开发设计，并将客户端绑定到学校的微信公众平台，学员通过手机访问应用程序。2.1数据通信子系统数据通信子系统是本文所开发的基于微信公众平台的自助管理的基础。用户对系统进行授权，即输入微信公众帐号的用户名和密码，数据通信子系统能够获取到微信公众帐号的信息，包括二维码、头像、帐号属性等，如果帐号为服务号，还能获取到它的自定义菜单列表。其次，数据通信子系统应还具备微信后台数据的解析和系统用户数据的封装的功能。通过消息路由，即粉丝用户经公众平台发送内容至本系统，本系统查找对应的规则记录，并将消息分配至合适的模块处理的过程，用户可以实现绑定公众帐号，并且能够在微信后台、公众帐号和公众帐号粉丝之间的通信。2.2消息处理模块库系统通过功能模块使得用户使得用户不需要通过编码，只需要对消息处理模块进行简单的规则编辑操作就可以构建一个功能完整的微信公众账号后台。通过对微信公众平台的功能使用情况进行分析，将系统的功能性需求进行归纳和分类,最终确定本文需要开发的消息处理模块类型。如对访客消息的自动回复，包括基本文字、混合图文和语音回复等。表3-3列出本文开发的微信公众号信息服务平台的部分关键模块。每一个模块都对应处理不同的消息事件类型。表3.3系统模块库模块名称模块功能基本文字回史问答的简单对话，当访客的对话语句中包含指定的关键字，或者对话语句完全等于特定关健字，或者符合某种格式时，系统自动应答设定好的回亚内容。基本混合图文回亚动的媒体内容，当访客的对话语句中包含指定关键字，或对话语句完全等于特定的关健字，或符合某些特定的格式时，系统白动应答设定好的图文PI复内容。基本语音回亚在回复规则中平那个可选择具有语音、音乐等音频类的回亚内容，并根据用户所设置的特定关键字精准的返回给粉丝，实现一问一答的简答对话。自定义接口回复对接整合。粉丝管理心，提供粉丝的常用个人资料管理。微信墙在大型活动中，场内所有微信用户都可以参与到活动中来，他们发送到公众帐号的消息内容都可以同步到大屏幕上，打破微信消息只对好友可见的约束。2. 3粉丝行为收集子系统为了更好的了解到粉丝，应将有意义的粉丝行为数据收集起来。本文所设计的系统收集的粉丝行为数据主要有两点：谢远超.微信公众号信息服务平台的设计与实现【3.中山大学，2014.1 .粉丝个人信息的统计，包括粉丝的姓名，昵称，生日和所在城市等信息；2 .是粉丝与公众帐号后台发生的交互数据，包括聊天记录，规则触发率和关键字使用率。对于规则触发率和关键词使用率因提供直观的折线图，来清晰的表示每一个规则和关键字的使用率走势。3.系统设计3. 1HTM1.5推送客户端设计经过之前的设计与实现，HTM1.S推送客户端可以通过PhoneGap中间件及安卓插件完成跨平台安装与运行。HTM1.S推送客户端的实现可以细化为连接服务器、同步推送类型、设备控制、消息接收和消息呈现五大块。推送客户端连接服务器功能实现时，通过监听页面上对连接按钮的点击监听事件，然后新建一个WebSocket对象，连接url的协议类型使用ws或wss协议，形式如ws:/10.108.165.254:8080PushServerreg的形式。这个对象成功创建则表示连接服务器成功。在连接完成后，通过覆写WebSoCket.Onmessage来实现消息接收，当有消息到达时，由底层通过层层回调，执行这个方法中的逻辑。同样地，onopen,onclose,onerror这几个方法也需要被覆写，只不过覆写的代码中不执行任何额外动作。在。nmessage中执行消息呈现的相关逻辑，消息呈现时，一般使用文件对象模型，解析出事件对象CVent中data域对应的值，解析出其中的数据域，对其进行一定的运算与统计，然后根据推送来数据的类型对展示的页面中元素进行实时更新。当连接刚建立时，服务器端并不会对移动客户端进行任何消息推送，直到客户端主动通知推送服务器其所希望接收的消息类型。推送客户端通过文件对象模型，调用其document.getElementByld(,Types,).innerHTM1.,获取页面上id标识符为“Types”的输入框中用户输入的类型信息，对其通过正则表达式进行格式丝测，确保其符合“TYPE1；TYPE2；TYPES”的这种使用分号作为分隔符的形式，然后对其加上前缀“TYPES:"，再调用websocket的send发送方法将经过处理的类型信息发送给服务器端进行注册。在某些情况下，移动终端也可以以控制信息发起者的形式作为推送服务器的数据源。这时，推送客户端通过文件对象模型，使用与之前描述类似的方式，分别得到控制目标TARGET与控制量VA1.UE,然后通过字符串拼接的方式，按照aCONTRO1.:TARGET:dataTypel；valuel:dataType2;VaIUe2”的方式组建控制指令，再调用websocket的send发送方法将经过处理的类型信息发送给服务器端，由服务器端进行进一步处理和下发控制。3. 2消息处理模块库的设计消息处理模块库是本文所设计的微信公众号信息服务平台的关键。消息处理模块负责对微信后台发送过来的消息进行处理逻辑上的封装。消息处理模块需要和数据通信子系统和消息回复规则进行通信和交互，一条消息回复规则可以由多个关键词触发，然后选择到一个处理模块进行处理。每个模块的处理流程都是一样的，所以本文设计了一个消息处理模块的对象模型，下面将详细分析其架构设计。方毓偈.基于微信公众平台的手机营业厅应用构架的设计与实现13.兰州大学，2015.每一个消息处理模块都可以由四个部分组成：1 .面向本文所设计的微信公众号信息服务平台的接口；2 .接收来自数据通信子系统的消息包，并解析他们存入数据库;3 .处理接收到的数据，封装响应的处理逻辑；4 .如果模块可以由粉丝用户进行交互，还需要有模块微站。具体过程如图3-1所示：RuleManagement图3-1消息处理模块库设计3.3微站可视化编辑子系统的设计如图3-2所示为微站可视化编辑子系统的总体设计，其中主题风格库是设备模拟器和微站属性管理工具的基础模块，用户在风格库中选择所需主题风格，选择后微站数据会提供给设备模拟器进行可视化呈现。当用户对微站导航才进行添加、删除等操作时，微站属性相应进行改变，同时设备模拟器也给予实时的预览效果。当用户需要对微站进行属性修改操作时，微站属性管理工具将微站属性实时地保存到数据库中。设定微站好入口，微信客户端可以通过入口访问到微站。图3-2微站可视化编辑子系统设计3. 4数据通信子系统的设计数据通信子系统主要利用微信后台提供的API进行微信后台与本文所设计的信息服务平台进行通信。数据通信子系统两个部分组成，第一部分是和微信后台进行Token验证。第二部分是对数据的解析和再封装。Token验证的过程分成两个步骤：1 .微信后台在发送数据的时候，会额外的带上三个参数：SignatUre,noce和timestampo其中timestamp是时间戳，noce是一个随机生成的数。signature是将Token,noce和timestamp进行不可逆的SHA1加密后生成的字符串；2 .接收到微信后台发送过来的三个参数之后，同样对Token,timestamp和noce进行SHAl机密，如果得到的字符串和发送过来的signature一样的话，验证就通过了，此时就可以和微信后台进行数据通信。由于本文所设计的系统使用PHP脚本语言，PHP的数组和XM1.之间能很好的进行转换。所以本文对所有的消息进行重新封装。将消息的基本对象结构定义为如表4T所示：模块处理平台消息设置项<platform><subscribes><messagetype=,text"/><messagetype=',image"/><messagetype=11click11/><subscribes><handles><messagetype=',image"/><messagetype="voice"><messagetype="text"><handles><ruleembed="true"><platfrm>模块处理脚本设置项VinStanX!CDATA安装脚本><install>VUninStaIlX!CDATA卸载脚本>vUninSta11>VUPgradeX!CDATA升级脚本xupgrade>消息订阅器提供了一种处理公众平台消息的方式，可以接受到指定类型的消息，来进行分析和统计，不能用以处理消息返回结果.这种处理是并行的，同一个消息会被每一个订阅它的模块接收到。消息处理器用于接收公众平台的消息，并返回相应的处理结果.这种处理是互斥的，同一个消息只能从一个模块返回处理结果。4.系统实现4.1 通信录树状结构实现通信录形成的树状数据结构本身是一个n叉树的树状，只能用递归结构来处理。在数据库中，通信录分为2个表，其一是部门表organisation表,其二是人员表companyMember表，companyMember表的人员依赖于organisation表中的单位树来显示。通过查找系统中类似模块的实现，发现PHPCMS系统中内置了一个tree的类，因此组织架构中的树形结构显示即采用了系统内置的tree类来辅助实现。在ComPanyMenIber表的显示中，由于列表过长，采用了AjaX的方法来模拟实现，基本过程是：在companyMember表的显示中，由于列表过长，采用了Ajax的方法来模拟实现，基本过程是：列表初始化时，通过数据库查找显示parentid为0的单位和单位id为0人员。有人点击列表中单位时，JavaScript通过Ajax请求获取该单位的下级单位和人员列表，JaVaScript获取到XM1.数据之后显示出来。因此在companyMember表中显示，不是真正的树状结构显示，但是采用AjaX动态显示，动态展开，用户界面显得更加友好。为了在显示单位列表时能够准确判断一个单位的下级单位列表是否展开，本文为单位列表的节点增加了一个HTM1.标记语言中没有的属性expand=,true/falsev,并结合jQuery库进行查找。虽然树状目录显示的过程很简单，如何高效的收缩树状目录没有现成的解决办法。观察树状菜单，可以发现某个被展开的节点A之下的结点B会具有以下特征：假设节点的深度属性为Ievelo如果某节点B是A的子孙系节点，则B.level>A.Ievelo如果某节点B是A的兄弟节点或父级的兄弟节点，则B.IeveK=A.Ievel0如果该节点B不是A的子孙节点，而B.level>A.level,那么节点B与A之间肯定存在节点C.level>=A.level的C节点。因此要收缩节点A的子节点，只需要查找节点A之下所有深度ICVCl大于A的节点并删除即可，直到某个节点的深度小于或等于A的深度。由此，树状目录收缩的JavaScript基本代码如下：*$(#+id)代表查找获取HTM1.属性id值为变量id的节点*/if($("#"+id).attr("expanded")="falsc")/*菜单展开，调用AJAX完成*/AJAXJfethod;else/*菜单收缩*/varthis1.eVel=$("#"+id).attr("level");varnextTr=$("#"+id).next();while(nextTr.attr(zzlevel/z)>this1.evel)vartempnode=nextTr;nextTr=nextTr.next()tempnode,remove();$(#"+id).attr("expanded","false");4. 2二维码生成技术二维条码/二维码是条形码的一种，用按一定规律在一定平面区间内分布的黑白相间的方块图形符号，实现信息的记录与传递。到80年代末为止，世界上已经有多种二维码实现方法，包括CodeOne.PDF417.Code16KQRCode.Code49等许多种。与一维条码相比，二维码的信息容量较大，能够记录和传递更多的信息。QR码是二维条码中比较常见的一种。1994年日本DensoWave公司为了实现其公司汽车零部件的流程记录,设计了一种新型二维码23,即QR码。QR码的"QR”是QUiCkResponse的缩写。在最大密度模式下，QR码最多可以存储7089个数字，4296个英文字母或者1817个汉字字符。因此，QR码很适合传递一些有一定长度的文字信息。由于操作方式的不同，在移动设备上输入复杂的网址不太方便，二维码的出现刚好解决了这一问题。二维码可以通过印刷分发,又可以被手机摄像头轻易识别，手机本身体积小，握持方便，又方便了以各种角度对焦拍摄，因此被手机的移动操作系统和各种手机浏览器广泛支持。目前，PHP网站中，生成QR码主流的做法有以下2种方式：一是利用internet上的一些网站提供的QRcode应用程序接口来获得二维码。例如Google公司就对外发布了一个二维码生成产品，供各类网络用户使用。缺点是受Google公司限制，如果无法正常访问Google公司的网络接口，则二维码生成会受到限制。二是利用PHPQRcode库生成二维码。PHPQRcode库是一个开源的PHP二维码生成库，将源码放到本地网站服务器上，再引用对应的类即可生成自己的二维码。这样做优点非常明显，而且调用接口也很简单,本文就采用了这种方式生成二维码。PHPQRcode库的使用要按照以下步骤：1 .引用PHPQRcode库：includezzphpqrcode/phpqrcode.php；2 .定义各种参数，如：SerrorCorrection1.evel='1.'SmatrixPointSize=4;$size=,10,;$url=,http:WwW.website,com'3 .调用生成类输出png格式二维码：QRcode:png($url,false,JerrorCorrection1.evel,$size);4.3个性化模块作为面向大众用户的微信公众号，必须面向用户多种多样的个性化需求，而且还要兼顾部分用户傻瓜化的操作需求。项目中设计了以下几个方面满足用户的个性化需求：一、可选择的多种客户端模板文件。客户端模板文件可以实现多种多样的用户界面特效，使用户有比较大的选择空间。项目中的模板文件是可以在项目运行期间不断增加的，用户的选择空间可以不断增大。二、附加文件包的设定。为了兼顾需要个性化的用户和需要易用性的用户，项目中采用了一个创新的“附加文件包”的设定。附加文件包中可以包含各种内容，例如图片、配置文档和其他需要扩展的HTM1.页面等。由于附加文件包中的内容多种多样，不能用程序自动校验，因此采取了人工审核的模式，由网站管理员通过人工逐一对比附加文件包中的内容，确保文件的安全性之后才能审核通过。为了确保安全性，附加文件包所需的内容要求会在网站模板的附加说明（一个PDF文件）中进行详细说明，用户在选择模板后必须仔细阅读说明，如图片等文件的分辨率、类型等必须严格与要求保持一致，网站管理员才能审核通过。由于应用是基于HTM1.5核心设计的，因此如果用户需要扩展其他功能，只需要在附加文件包中增加个性化的HTM1.页面即可实现。例如，某单位需要增加一个班车时刻表功能，只需要在附加文件包中增加包含班车时刻数据的HTM1.页，即可实现功能的灵活增加。附加文件包中包含了files,db的文本文件，其本身是一个XM1.文件,该文件指定了附加文件包中的文件和模板文件包中文件的对应关系。该文件具体结构如下：<list><files><from>数据包中文件路径l<from><to>模板中文件路径l<to><files><files><from>数据包中文件路径2<from><to>模板中文件路径2<to><files>（其他文件）<list>生成应用的过程中，程序自动读取该文件，并将该文件中的列出的文件，从数据包中指定路径，复制到模板文件包的指定路径，使最终生成应用包含个性化元素。采用这种方式，用户可以通过修改附加文件包中文件的方式来实习自定义AndrOid应用图标、自己按需添加本地功能模块等功能。总结微信公众号利用HTM1.5的新技术特性来开发具有很好的实践意义，今后随着移动互联网技术的不断发展，能够开发出用户体验更好和客户端安全性更高的微网站。参考文献1林江，俞宙，肖然.基于HTM1.5打造广东天气微信微门户J.广东气象,2014,03:71-73.2郭涛.基于JQueryMobile的公安系统微信公众平台的设计与实现D.吉林大学，2015.3李炜康.基于微信的网上购物系统的设计与实现D.南京大学，2015.4谢远超.微信公众号信息服务平台的设计与实现D.中山大学，2014.5王协舟，王露露.1.ightAPP在档案移动信息服务中的应用研究一一基于档案机构微信公众号的调查J.档案学研究,2016,01:38-43.6方毓偈.基于微信公众平台的手机营业厅应用构架的设计与实现D.兰州大学，2015.