毕业论文:摩尔口碑微信公众平台设计


     毕业设计(论文) 题目:摩尔口碑微信公众平台设计 学 院:计算机科学与技术学院 专 业:软件工程 届 别:2017届 学 号:1325116025 姓 名:*** 指导老师:** 指导老师职称:讲师 华侨大学教务处印制 2017年4月 摩尔口碑传播实验室微信平台开发 内容摘要 在互联网快速发展的这个时代,社交网络作为现今最方便快捷的媒介也越来越受到人们欢迎,并且融入到我们的生活中去。在HTML5的发展与兴起下,它同时也在推动着信息传播方式的发展。HTML5对网站的改变也是巨大的。它使网站的可视界面转变了了以往的呆板直接,而变得更加丰富。如今的HTML5与之前的HTML对比来说,在维护和管理方面更加的容易。 而在新兴媒体上微信的社交化网络无疑是占了很大比重的。本论文主要围绕基于微信的公众平台进行二次开发的公众号“摩尔口碑传播实验室”进行原型设计与前端的讨论。在前端开发中,用到的也是最基础的三个开发语言,在编写布局页面的时候,用到HTML语言将元素进行定义,打下基础框架;使用css对定义好的的HTML元素进行相应的渲染,最后再用Javascript来进行特定的效果实现。在这里需要认真探讨的东西很多。在进行前端开发的时候,需要对这些实用工具语言很熟悉,在开发的时候还要深入的考虑兼容性,性能优化等问题。并且在设计与测试实现的阶段,解决一些出现的问题与难点。 关键词:原型设计;微信公众平台;HTML5;CSS Abstract In this era of rapid development of the Internet, social networks as the most convenient and efficient media is now more and more popular, and into our lives. In the development and rise of HTML5, it is also promoting the development of information dissemination. HTML5 changes to the site is also huge. It makes the site of the visual interface has changed the past rigid and become more rich. Today's HTML5 is easier to maintain and manage in contrast to previous HTML. And in the emerging media WeChat of the social network is undoubtedly a large proportion of the share. This paper focuses on the prototyping and front-end discussion of the public number "Moore word of mouth communication laboratory", which is based on the WeChat public platform. In the front-end development, the use of the most basic is the three development language, in the preparation of the layout of the page, the use of HTML language elements will be defined, lay the basic framework; use css on the definition of good HTML elements corresponding rendering , And finally use Javascript to achieve a specific effect. There are many things that need to be carefully explored here. In front of the development of the time, these tools need to be very familiar with the language, in the development of the time to consider the compatibility, performance optimization and other issues. And in the design and testing to achieve the stage, to solve some of the problems and difficulties. Key words:prototype degin; wechat public platform; HTML5; CSS 目 录 摘 要 Ⅰ Abstract Ⅱ 目 录 3 第一章 绪论 3 1.1传统商家在微信公众平台下的新发展及存在的问题 4 1.2“摩尔口碑传播实验室”对于商家和用户的发展机遇 5 1.3论文的结构 5 第二章 目标市场分析 6 2.1目标市场容量分析 6 2.2目标市场竞争分析 7 2.3竞争分析小结 8 第三章 微信公众平台的二次开发 8 3.1微信公众平台二次开发的基本原理 8 3.2微信公众平台二次开发的消息接口 9 3.3进行二次开发的设计目的 9 第四章 开发工具概述 10 4.1 HTML5前端开发工具 10 4.2 HTML5 10 4.3 CSS 12 4.4 JS 12 第五章 产品原型设计 13 5.1 代言人体系模块分割 14 5.2 产品原型设计 14 5.3 界面设计效果展示 16 第六章 前端界面编程实现 19 6.1 关于使用用户,前端的关系 19 6.2 编码实现阶段 20 6.3 HTML的编码 21 6.4 CSS模块与编码 24 6.5 部分项目源码 25 第七章 内部测试与后续优化 28 第八章 总结 29 参考文献 29 致 谢 31 附 录 31 第一章 绪论 2011年,腾讯推出了一款全新的通讯软件,它就是微信。微信是以互联网为基础,为客户免费提供通讯服务。当前,在新媒体不断兴起,使用用户有多重选择的情况下,微信具有自己独特的优势,在短时间内积累了数亿用户。微信成为一个崭新的“明星”的主要原因就在于它实现了在一个综合性平台既有通信又有社交。而且在实时信息传递方面,微信支持文字、语音、图片,视频等消息内容,它是为广大用户提供全方位的沟通平台,给予新鲜感。相隔一年,腾讯推出了微信公众平台,这是微信的一个升级的功能区,任何公司或者个人都可以通过平台来免费注册账号。申请成功之后就可以通过后台编辑图文消息素材、语音、视频等相关信息,发送给该平台账号的使用用户,推送消息每天可发一次。自从公众号推出后,因为其传播的独特性,很快就成为公司、媒体组织、传播机构、知名人士、个人等的又一个重要的运营平台。微信公众平台的也因此变得越来越重要。因此,口碑传播基于微信的平台传播理念是十分科学的。 1.1传统商家在微信平台上的新发展以及存在的问题 对于传统线下商家来说,微信平台的出现是机遇也是挑战。传统线下商家可以通过运营微信公众平台将口碑真正的传播出去,让更多的人知道自己的产品质量与服务质量。但是在机遇面前传统线下商家很难突破自身的局限,因为有以下几点问题是传统线下商家能否突破自己的关键。第一,线下商家营销方式较为传统,营销投入具有很大的不确定性,很难自主把控,多依赖渠道的流量分发。第二,线下商家对社群运作不专业,社群运营效率不高。第三,线下商家懂得利用老顾客口碑传播,但没有一个实用的落地方案及监控工具。第四点也是最重要的一点,就是非刚需商家的使用用户忠诚度不高,需要不断吸引新消费者,这个导致商家需要花更多的营销成本在吸引首次消费顾客,而新顾客的忠诚度和消费频次又不高,所以对营销投入来讲不是最大化效益的方式。 1.2 “摩尔口碑传播实验室”对于商家和用户的发展机遇 对于B端商家来讲,代言人体系不是给你带来当下的客流,而是给你带来未来的客流。让商家意识到,以前的营销取决于渠道非他们所能把控的,现在的代言人体系的营销完全取决于商家自己的产品及服务,还有老顾客传播的意识,这是对他们很好的品牌传播工具,要让商家由内而外的驱动其门店所有客户都去帮助他们自己代言和传播。 在用户方面,分享已经是大部分用户在线下消费时必须做的行为,代言人体系能够在几本不需要教育的消费场景下,首先满足消费意识越来越高的消费者的生活达人成就感,其次通过代言人奖励更好的刺激其分享的认可感知,让达人持续保持分享热度,形成更好的口碑传播良性循环。 未来,摩尔口碑希望在覆盖大部分B端商家后,将会通过代言人体系、沉淀的用户分享关系链、社交型的优质商家推荐体制,打造一个在消费升级中独特的品质生活社交化消费引导平台。 1.3论文的结构 第一章 绪论部分主要介绍了基于本文设计的公众号平台发展研究与创作设计的基本概念,并且介绍了本篇论文的主要内容。 第二章 介绍了目标市场的竞争分析以及项目设计的可行性与产品的设计流程。 第三章 主要介绍基于微信的二次开发技术与WEB开发的基本架构和应用规则。 第四章 介绍了本文用到的开发工具以及开发环境。并且对HTML5,CSS以及JS进行了深入的解析和相关说明。 第五章 介绍了原型设计的一系列模块,包括用户界面,商家端,后台管理的系统。并且展示了产品原型的概念设计海报。 第六章 主要介绍了前端界面的代码实现,HTML5主要运用的标签的定义和概念。以及展示HTML的部分项目源码。 第七章 对前端界面进行了测试以及预览,进一步进行完善和优化。 第八章 对全文进行总结。 第二章 目标市场分析 2.1目标市场容量分析 近年来,随着团购市场规模的持续性集中,今年4月的团购网站排名前五的交易额总共是11.5亿元。它占整个行业市场份额的68.3%,这一市场份额数字已经三个月连续超过50%。团购网站的前五名分别为:美团网、窝窝团购网、大众点评、拉手和糯米。这些团购网站与去年同期相比市场占比大幅度提升。 易观2016年发布的中国线上餐饮市场成交份额分析数据指出,中国2016年线上餐饮市场规模极大。高达1133亿。成为第四个突破千亿级别的O2O领域。从竞争分析看,2016年中国线上餐饮市场规模达到1133亿,同比增长147.9%。然而线上餐饮市场交易规模在餐饮行业的渗透率仍不足5%,这代表着在线餐饮市场远未达到饱和状态。 根据以上数据可以预估消费020在2016年全年交易额约在7291亿元,团购及线上渠道平台的抽佣比例大部分在3%~15%之间,同时随着消费升级的变化,整体的渠道交易额和投入比重还将会持续上升,所以目标市场的容量还有很大的开拓空间。 2.2目标市场竞争分析 2.2.1非直接竞争分析: 非直接竞争主要来自团购网站等线上020渠道,竞争点主要在于完整的商家crm 体系,以及海量的使用用户基数,导致大型的线下商家会优先选择团购等线上交易渠道作为主要导流手段;但也正是因为其规模,导致使用用户选择消费时出现盲点,很多优质的新商家在团购网站上很难被使用用户发现,同时使用用户的消费意识以及从价格导向逐步升级为品质及体验导向,团购网站在这点上有了其天然的劣势。 2.2.2直接竞争分析: 来自有赞等分销系统的竞争,有赞分享系统很多线下商家自建渠道时会使用, 同时有赞也有针对老顾客的分销体系设计。但有赞本身并没办法利用已经到店消费的使用用户来传播,其传播的种子顾客来源于线上,这个直接取决于商家本事营销能力的强弱,有天然的矛盾。同时,有赞的传播体系主要通过分佣将老顾客的传播变成了职业化的行为,而不是利用使用用户本身有的分享欲及达人成就感的心理,这个会导致社交传播的信任度和可持续度降低,从而没办法正真的做好社交化传播。 2.3竞争分析小结 通过以上的竞争分析严格来说口碑传播的可行性是极大的,并且对使用用户是有十分强烈的吸引力的。所以通过对以上的市场分析与总结,利用WEB前端开发技术与微信平台的设计结合是一个非常成熟的创作理念。 第三章 微信公众平台的二次开发 3.1微信公众平台二次开发的基本原理 在微信的系统里面,服务器就是一个转发服务器,在终端系统上,例如:手机、iPad等,都可以对这个微信服务器发起请求,服务器接收到请求之后将这个请求转发给具体的操作实现。操作处理完毕后会再次回发给微信服务器,服务器再将已经处理好的请求命令,具体响应到终端系统上面。这里的通信协议是:HTTP。数据格式为:XML。 具体流程为: 这就是对HTTP的请求做出的响应流程。具体的请求内容,会在自定义服务器上进一步的进行解析。 3.2微信公众平台二次开发的消息接口 首先,在微信公众平台提交相应的申请信息后,服务器将发送GET请求到相应的URL上,并且会带上四个参数: 参数 描述 signature 微信加密签名 timestamp 时间戳 nonce 随机数 echostr 随机字符串 然后申请人将通过检验Signature对GET请求进行检验。如果确定这个GET请求来自微信服务器,就会原样发送ECHOSTR参数内容回去,这样就接入生效了,不然就是接入失败。Signature结合了token参数,time stamp参数和nonce参数。 3.3进行二次开发的设计目的 通过微信公众平台的二次开发,将基于微信的社交化代言体系系统进行很好的设计与实现。首先,利用现有的微信平台网络基础和互联网的学习资源,能够设计很好的产品原型。然后,通过掌握Web前端代码实现产品原型与“摩尔口碑传播实验室”微信公众平台的设计无缝连接。熟悉HTML5大体框架的设计机制和原理以及其他脚本语言对于前端界面书写的。 第四章 开发工具概述 4.1 HTML5前端开发工具 jetbrains公司旗下有一款广为人知的Javascript 开发工具,就是WebStorm。它被开发者们赞誉为“Web前端的开发神器”、“最强大的HTML5编辑器”、“最智能的Javascript IDE”等等称号。通过这些赞誉可以知道, WebStorm其功能的强大。它沿袭了IntelliJ IDEA强大的Javascript部分的功能。然后根据原型设计呈现出来的PNG页面,进行高度还原的布局编写。它能兼容各主流浏览器,能做到排版不乱,IE9以上进行响应式布局。此外, WebStorm能够对网站做一些维护工作和性能优化。 4.2 HTML5 HTML5是万维网的核心语言,它是标准通用标记语言下的应用超文本标记语言。HTML是一种包括文本、图片、链接等多种元素的编辑类型语言。通过HTML进行以网站页面为操作区域,可以任意定义网页页面具有哪些元素,这些元素包括文字和图片等传播内容。这种语言还可以定义页面的基本格式。如文字大小、字体、位置等,图片的位置、一些状态变化等等。HTML5是使用标签进行标记的,它能将多种不同种类的元素关联在一起,它也也能够将不同位置的文件关联在一起,因此HTML被叫做超文本标记语言。而HTML5就是HTML语言的最新标准,这种新的标准制定使页面可以表现的更加丰富。一开始的HTML只含有少量的元素属性,它也只能完成简单的元素基本格式,但是这些简单的界面,随着互联网的高速发展,以及人们对于界面的视觉化丰富程度要求越来越高的情况下,是不能满足人们的需求的。网站开发竞争越来越激烈,前端界面可以展现的元素格式越来越多,内容越来越强大,代码也越来越多。因此新的标记语言就在这样的需求下应运而生。它能够通过定义元素的属性,设置元素的格式,最终形成内容丰富的整体效果。HTML5的设计出现是为了满足在移动设备上的媒体展示。新标准下添加的新的语法特征足够支持这一点。例如;video标签、audio标签和canvas 标签。与此同时HTML5还新加了SVG矢量图形实现的方式。这些元素的加入是为了更清晰的在网页中处理和添加图片和相关媒体内容。同时也有一些属性和元素被移除掉了。像是这些标签被修改或者重新定义将它们标准化了。还有一些其它新的元素,包括

    文档贡献者

    serendipity1

    贡献于2018-11-09

    下载需要 5 香币 [香币充值 ]
    亲,您也可以通过 分享原创文档 来获得香币奖励!