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

基于HTML5微信公众号的设计与实现摘要：随着4G网络的大规模应用，移动互联时代的到来改变了人们的上网方式。传统的网站在移动端的不便利性也越来越明显，新一代的万维网核心语言HTML5，实现了新的超文本标记语言，可以多设备的跨平台使用，加上目前国内智能手机的迅速普及和政府对于4G网络的大力推广，也为HTML5在国内开发者的使用上提供了一个良好的发展环境。微信公众号利用HTML5的新技术特性来开发具有很好的实践意义，今后随着移动互联网技术的不断发展，能够开发出用户体验更好和客户端安全性更高的微网站。关键词：微信公众号；HTML5；移动互联网目录TOC\o"1-3"\h\u1.绪论 11.1研究背景及意义 11.2HTML5简介 21.2.1文件缓存 21.2.2Drag&Drop直接拖拽功能 21.2.3Canvas图形绘制 31.2.4Audio/Video标签 32.需求分析 32.1数据通信子系统 32.2消息处理模块库 32.3粉丝行为收集子系统 43.系统设计 43.1HTML5推送客户端设计 43.2消息处理模块库的设计 53.3微站可视化编辑子系统的设计 63.4数据通信子系统的设计 64.系统实现 84.1通信录树状结构实现 84.2二维码生成技术 94.3个性化模块 9总结 101.绪论1.1研究背景及意义微信公共平台于2012年8月23日正式上线，这是基于微信的一个附加功能，任何组织或个人均可免费申请微信公众帐号。获得帐号后可通过后台编辑文字、图片、语音、视频等信息，并群发给关注该帐号的用户，但每天仅可群发一次。同样地，用户主动给微信公众平台发送文字、图片、语音、视频等信息，公众平台可以根据预先设定好的规则，自动反馈相应的信息给用户林江，俞宙，肖然.基于HTML5打造广东天气微信微门户[J].广东气象，2014，03:71-73.林江，俞宙，肖然.基于HTML5打造广东天气微信微门户[J].广东气象，2014，03:71-73.基于HTML5微信公众平台，丰富了原有编辑平台的功能，可以使接入公众账号瞬间拥有十分强大的功能。基于HTML5的微信公众平台设计与实现的意义在于以下几个方面：一是对于微信公众账号的运营者。对那些不懂计算机程序技术的运营者可以建立属于自己的程序接口，让他们通过简单的配置，即可拥有强大而又个性化的微信公众平台管理系统。使运营者可以专注于内容的运营，而不被如何呈现内容的方式而分心。相反地，该HTML5还可以辅助运营者，以更佳的方式方法呈现运营者发布的内容，用一些程序小工具维系订阅用户的粘度。另一方面，对于微信公众账号的订阅者。通过关注接入了微信公众平台HTML5的公众号，可以获得比一般公众账号更多的功能，诸如天气查询、列车查询、微网站等。可以使得用户对这样的公众账号有着更好的用户体验，使用户更加乐于使用这们的公众账号。再者，对于微信公众平台本身来说，开发这样的HTML5，丰富和加强了微信公众平台本身的功能，扩展了微信公众平台的生态链。从另一个角度来看，也可以促进微信公众平台自身功能的扩展。1.2HTML5简介 HTML5取代了HTML4．0和XHTML1．0标准，是更为适应互联网近几年飞速发展的需要的技术。HTML5的技术开发主要包括HTML5、JavaScript和CSS3．0技术，也就是说HTML5标准包含了以上者三种技术。它能够有效简化浏览器处理由不同公司研发的富互联网应用程序方式(如AdobeFlash、MicrosoftSilverlight)的解析过程林江，俞宙，肖然.基于HTML5打造广东天气微信微门户[J].广东气象，2014，03:71-73.林江，俞宙，肖然.基于HTML5打造广东天气微信微门户[J].广东气象，2014，03:71-73.新版本的HTML搭载了新的网页元素、行为与属性，主要为以浏览器为基础的互联网新体验模式，例如使用<VIDEO>标签和<AUDIO>标签，不需要安装插件就能在浏览器中浏览多媒体内容；同时HTML5也摒弃了HTML4标准中的部分内容，如<font>标签，这部分功能由CSS3．0代替。除此之外，HTML5标准还支持富互联网应用程序的开发，比如及时二维绘图、本地离线存储、控件拖拽和历史记录功能等。HTML5不仅仅是HTML4版本的全面升级，更是20年来互联网技术的一次巨大飞跃。它使web应用更加成熟化、平台化，潜移默化中改变着互联网的使用模式。我的工作运用了HTML5的文件缓存、网页内拖拽、地理信息共享、Canvas图形绘制等相关技术。下面对这些技术的应用进行相关介绍。1.2.1文件缓存文件缓存功能能够为用户储存浏览器中的浏览资料，使其在断网或离线的情况下仍然能够正常浏览网页。对于移动产品特别是iPad平板电脑上的网页应用程序的开发来说这项技术特别重要。在产品演示系统的开发中，真用户在移动平台上使用产品演示系统时经常出现的网络不通畅、掉线和用户的误操作等突发状况，这些不能由传统HTML静态网页解决。但是我们利用HTML5的文件缓存功能，能够在任何临时情况下使用产品演示系统，通过浏览器缓存浏览演示Demo，实现用户实现无障碍浏览。1.2.2Drag&Drop直接拖拽功能HTML5新增了DragStart和DragEnd事件，能够实现开发者在网页中的拖拽事件功能，此外，通过拖拽事件，用户能够把本地文件拖拽入网页中。最初，这项技术是针对在桌面上进行的鼠标操作而设计的。但是其本身却不能在iPad中运用，为了实现用手指随意移动拖拽网页内控件的功能，同时现有的资源库中缺少能够同时兼容iPad和鼠标操作的类。我们在产品演示系统中增加了onTouchEvent等支持捕获手指位置及状态的类的程序编写，并且做到了桌面上进行鼠标操作的兼容支持。这项新增功能便于用户实现的演示Demo中对于视频、音频的处理操作。1.2.3Canvas图形绘制使用Canvas标签不仅能轻松实现网页的控制或修改图像，也给网页中的动画开发提供了条件。这种操作方法是以像素为基础的，配合JavaScript代码，不需要安装任何插件即可达到当前仅在Flash或Silverlight中才能实现的效果。在产品演示系统中，Canvas标签是不可或缺的工具，它能够实现在不同场景间演示Demo的模拟和扩展，比如显示动画、创建复杂控件等。比如说，我们在iPad平板电脑中利用Canvas画布实现了CoverFlow效果的模拟，而现有的大部分CoverFlow模拟程序都是以Flash技术为基础的，而这一类的控件无法在iPad平板电脑中使用。此外，本课题还通过Canvas技术对网页内多媒体播放进行多元化效果控制，一个创新的、动态的演示系统能够有效吸引用户使用产品演示系统，因此在对于升级与开发产品演示系统的时候，Canvas技术可以用来解决更为复杂的应用问题。1.2.4Audio/Video标签在HTML5网页中只需要加入<AUDIO>／<VIDEO>标签并使用JavaScript代码开发操作面板就能够在网页中灵活播放多媒体，而无需安装插件播放音频或视频多媒体文件，而同时利用Canvas技术对多媒体文件进行效果控制。因为公司很多宣传靠视频手段，所以在产品演示系统的演示Demo场景中也存在大量用于用户租住浏览的视频文件。通过同时使用这两个标签，使在iPadSafari中直接浏览视频成为了可能，而无需再在系统升级时安装浏览器插件。此外，我们利用Audio标签研制了嵌入演示Demo中的语音向导模块，这不仅引起了潜在用户群对于产品演示系统的兴趣、同时也使演示Demo所要表现的内容更为清晰。可以说，如果没有这两项功能，就无法实现在iPad上开发产品演示系统。2.需求分析本系统程序在.DIETFramework4.0框架下开发，数据库采用SQLServer2005，使用C#编程语言，页面依照HTML5标准开发设计，并将客户端绑定到学校的微信公众平台，学员通过手机访问应用程序。2.1数据通信子系统数据通信子系统是本文所开发的基于微信公众平台的自助管理的基础。用户对系统进行授权，即输入微信公众帐号的用户名和密码，数据通信子系统能够获取到微信公众帐号的信息，包括二维码、头像、帐号属性等，如果帐号为服务号，还能获取到它的自定义菜单列表。其次，数据通信子系统应还具备微信后台数据的解析和系统用户数据的封装的功能。通过消息路由，即粉丝用户经公众平台发送内容至本系统，本系统查找对应的规则记录，并将消息分配至合适的模块处理的过程，用户可以实现绑定公众帐号，并且能够在微信后台、公众帐号和公众帐号粉丝之间的通信谢远超.微信公众号信息服务平台的设计与实现[D].中山大学，2014.谢远超.微信公众号信息服务平台的设计与实现[D].中山大学，2014.2.2消息处理模块库系统通过功能模块使得用户使得用户不需要通过编码，只需要对消息处理模块进行简单的规则编辑操作就可以构建一个功能完整的微信公众账号后台。通过对微信公众平台的功能使用情况进行分析，将系统的功能性需求进行归纳和分类，最终确定本文需要开发的消息处理模块类型。如对访客消息的自动回复，包括基本文字、混合图文和语音回复等。表3-3列出本文开发的微信公众号信息服务平台的部分关键模块。每一个模块都对应处理不同的消息事件类型。2.3粉丝行为收集子系统为了更好的了解到粉丝，应将有意义的粉丝行为数据收集起来。本文所设计的系统收集的粉丝行为数据主要有两点：1．粉丝个人信息的统计，包括粉丝的姓名，昵称，生日和所在城市等信息；2.是粉丝与公众帐号后台发生的交互数据，包括聊天记录，规则触发率和关键字使用率。对于规则触发率和关键词使用率因提供直观的折线图，来清晰的表示每一个规则和关键字的使用率走势。3.系统设计3.1HTML5推送客户端设计经过之前的设计与实现，HTMLS推送客户端可以通过PhoneGap中间件及安卓插件完成跨平台安装与运行。HTMLS推送客户端的实现可以细化为连接服务器、同步推送类型、设备控制、消息接收和消息呈现五大块。推送客户端连接服务器功能实现时，通过监听页面上对连接按钮的点击监听事件，然后新建一个webSocket对象，连接url的协议类型使用ws或wss协议，形式如ws://54:8080/PushServer/reg的形式。这个对象成功创建则表示连接服务器成功方毓偈.基于微信公众平台的手机营业厅应用构架的设计与实现[D].兰州大学，2015.方毓偈.基于微信公众平台的手机营业厅应用构架的设计与实现[D].兰州大学，2015.在连接完成后，通过覆写webSocket.onmessage来实现消息接收，当有消息到达时，由底层通过层层回调，执行这个方法中的逻辑。同样地，onopen,onclose,onerror这几个方法也需要被覆写，只不过覆写的代码中不执行任何额外动作。在onmessage中执行消息呈现的相关逻辑，消息呈现时，一般使用文件对象模型，解析出事件对象event中data域对应的值，解析出其中的数据域，对其进行一定的运算与统计，然后根据推送来数据的类型对展示的页面中元素进行实时更新。当连接刚建立时，服务器端并不会对移动客户端进行任何消息推送，直到客户端主动通知推送服务器其所希望接收的消息类型。推送客户端通过文件对象模型，调用其document.getElementById('Types').innerHTML，获取页面上id标识符为“Types”的输入框中用户输入的类型信息，对其通过正则表达式进行格式丝测，确保其符合“TYPE1；TYPE2；TYPES”的这种使用分号作为分隔符的形式，然后对其加上前缀“TYPES:”，再调用websocket的send发送方法将经过处理的类型信息发送给服务器端进行注册。在某些情况下，移动终端也可以以控制信息发起者的形式作为推送服务器的数据源。这时，推送客户端通过文件对象模型，使用与之前描述类似的方式，分别得到控制目标TARGET与控制量VALUE，然后通过字符串拼接的方式，按照“CONTROL:TARGET:dataTypel；valuel:dataType2；value2”的方式组建控制指令，再调用websocket的send发送方法将经过处理的类型信息发送给服务器端，由服务器端进行进一步处理和下发控制。3.2消息处理模块库的设计消息处理模块库是本文所设计的微信公众号信息服务平台的关键。消息处理模块负责对微信后台发送过来的消息进行处理逻辑上的封装。消息处理模块需要和数据通信子系统和消息回复规则进行通信和交互，一条消息回复规则可以由多个关键词触发，然后选择到一个处理模块进行处理。每个模块的处理流程都是一样的，所以本文设计了一个消息处理模块的对象模型，下面将详细分析其架构设计。每一个消息处理模块都可以由四个部分组成：1.面向本文所设计的微信公众号信息服务平台的接口；2．接收来自数据通信子系统的消息包，并解析他们存入数据库；3．处理接收到的数据，封装响应的处理逻辑；4．如果模块可以由粉丝用户进行交互，还需要有模块微站。具体过程如图3-1所示：图3-1消息处理模块库设计3.3微站可视化编辑子系统的设计如图3-2所示为微站可视化编辑子系统的总体设计，其中主题风格库是设备模拟器和微站属性管理工具的基础模块，用户在风格库中选择所需主题风格，选择后微站数据会提供给设备模拟器进行可视化呈现。当用户对微站导航才进行添加、删除等操作时，微站属性相应进行改变，同时设备模拟器也给予实时的预览效果。当用户需要对微站进行属性修改操作时，微站属性管理工具将微站属性实时地保存到数据库中。设定微站好入口，微信客户端可以通过入口访问到微站。图3-2微站可视化编辑子系统设计3.4数据通信子系统的设计数据通信子系统主要利用微信后台提供的API进行微信后台与本文所设计的信息服务平台进行通信。数据通信子系统两个部分组成，第一部分是和微信后台进行Token验证。第二部分是对数据的解析和再封装。Token验证的过程分成两个步骤:1.微信后台在发送数据的时候，会额外的带上三个参数:signature,noce和timestamp。其中timestamp是时间戳，noce是一个随机生成的数。signature是将Token,noce和timestamp进行不可逆的SHA1加密后生成的字符串；2.接收到微信后台发送过来的三个参数之后，同样对Token,timestamp和noce进行SHA1机密，如果得到的字符串和发送过来的signature一样的话，验证就通过了，此时就可以和微信后台进行数据通信。由于本文所设计的系统使用PHP脚本语言，PHP的数组和XML之间能很好的进行转换。所以本文对所有的消息进行重新封装。将消息的基本对象结构定义为如表4-1所示:模块处理平台消息设置项<platform><subscribes><messagetype="text"/><messagetype="image"/>…<messagetype="click"/></subscribes><handles><messagetype="image"/><messagetype="voice"/>…<messagetype="text"/></handles><ruleembed="true"/></platform>模块处理脚本设置项<install><![CDATA[安装脚本]]></install><uninstall><![CDATA[卸载脚本]]></uninstall><upgrade><![CDATA[升级脚本]]></upgrade>消息订阅器提供了一种处理公众平台消息的方式，可以接受到指定类型的消息，来进行分析和统计，不能用以处理消息返回结果.这种处理是并行的，同一个消息会被每一个订阅它的模块接收到。消息处理器用于接收公众平台的消息，并返回相应的处理结果.这种处理是互斥的，同一个消息只能从一个模块返回处理结果。4.系统实现4.1通信录树状结构实现通信录形成的树状数据结构本身是一个n叉树的树状，只能用递归结构来处理。在数据库中，通信录分为2个表，其一是部门表——organisation表，其二是人员表——companyMember表，companyMember表的人员依赖于organisation表中的单位树来显示。通过查找系统中类似模块的实现，发现PHPCMS系统中内置了一个tree的类，因此组织架构中的树形结构显示即采用了系统内置的tree类来辅助实现。在companyMember表的显示中，由于列表过长，采用了Ajax的方法来模拟实现，基本过程是：在companyMember表的显示中，由于列表过长，采用了Ajax的方法来模拟实现，基本过程是：列表初始化时，通过数据库查找显示parentid为0的单位和单位id为0人员。有人点击列表中单位时，JavaScript通过Ajax请求获取该单位的下级单位和人员列表，JavaScript获取到XML数据之后显示出来。因此在companyMember表中显示，不是真正的树状结构显示，但是采用Ajax动态显示，动态展开，用户界面显得更加友好。为了在显示单位列表时能够准确判断一个单位的下级单位列表是否展开，本文为单位列表的节点增加了一个HTML标记语言中没有的属性expand=”true/false”，并结合jQuery库进行查找。虽然树状目录显示的过程很简单，如何高效的收缩树状目录没有现成的解决办法。观察树状菜单，可以发现某个被展开的节点A之下的结点B会具有以下特征：假设节点的深度属性为level。如果某节点B是A的子孙系节点，则B.level>A.level。如果某节点B是A的兄弟节点或父级的兄弟节点，则B.level<=A.level。如果该节点B不是A的子孙节点，而B.level>A.level，那么节点B与A之间肯定存在节点C.level>=A.level的C节点。因此要收缩节点A的子节点，只需要查找节点A之下所有深度level大于A的节点并删除即可，直到某个节点的深度小于或等于A的深度。由此，树状目录收缩的JavaScript基本代码如下：/*$("#"+id)代表查找获取HTML属性id值为变量id的节点*/if($("#"+id).attr("expanded")=="false"){/*菜单展开，调用AJAX完成*/AJAX_Method;}else{/*菜单收缩*/varthisLevel=$("#"+id).attr("level");varnextTr=$("#"+id).next();while(nextTr.attr("level")>thisLevel){vartempnode=nextTr;nextTr=nextTr.next()tempnode.remove();}$("#"+id).attr("expanded","false");}4.2二维码生成技术二维条码/二维码是条形码的一种，用按一定规律在一定平面区间内分布的黑白相间的方块图形符号，实现信息的记录与传递。到80年代末为止，世界上已经有多种二维码实现方法，包括CodeOne、PDF417、Code16K、QRCode、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库：include"phpqrcode/phpqrcode.php";2.定义各种参数，如：$errorCorrectionLevel='L';$matrixPointSize=4;$size=’10’;$url=’’;3.调用生成类输出png格式二维码：QRcode::png($url,false,$errorCorrectionLevel,$size);4.3个性化模块作为面向大众用户的微信公众号，必须面向用户多种多样的个性化需求，而且还要兼顾部分用户傻瓜化的操作需求。项目中设计了以下几个方面满足用户的个性化需求：一、可选择的多种客户端模板文件。客户端模板文件可以实现多种多样的用户界面特效，使用户有比较大的选择空间。项目中的模板文件是可以在项目运行期间不断增加的，用户的选择空间可以不断增大。二、附加文件包的设定。为了兼顾需要个性化的用户和需要易用性的用户，项目中采用了一个创新的“附加文件包”的设定。附加文件包中可以包含各种内容，例如图片、配置文档和其他需要扩展的HTML页面等。由于附加文件包中的