基于H5的微信开发与实现三稿.docx

1、基于H5的微信开发与实现三稿本科毕业论文* * * 学 号： * 专 业： 物联网工程 班 级： 2013级4班 题 目： 基于H5的微信开发与实现 * * 基于H5的微信开发与实现摘要：在21世纪互联网已经进入了一个快速发展和成熟阶段，电子产品成为了生活中不可缺少角色。随着社会的发展和生活观念的改变，我们的消费意识也生了巨大的变化，孕育出了一种新网络营销模式，即外卖行业。外卖行业具有广阔的发展空间和潜在动力，有大市场，大的消费群体，可以为我们创造可观的财富价值。鉴于当前此行业的蓬勃发展，研发一个迎合当前大众消费习惯和生活方式，结合地方特色建立一个区域性的特色的名为“小香厨”的H5 APP外卖

2、平台。该系统使用了主流的HTML5、原生JS、CSS（CSS3）、JS类库（jQuery）、CSS框架（bootstrap）、Cordova插件（调用设备上的API）等做前台页面的开发，使用Java开发后台服务，使用Apache做Web服务器以及数据库技术（Mysql）。此平台使用可视化界面的Wex5作为开发工具。应用的操作系统为Android或IOS.关键字：互联网；WeX5；微信；外卖APPABSTRACT：In the 21st century has entered a rapid development of Internet and maturity stage, electron

3、ic products has become an indispensable role in life. With the development of the society and the change of the concept of life, our consumer consciousness also had a great changes, and finally give birth to a new network marketing model, namely the delivery. Food industry has a broad development sp

4、ace and potential power, have a big market, big consumer groups, can create considerable wealth value for us. Due to the vigorous development of the industry, the present research and development a cater to the current mass consumption habits and lifestyle, combined with local characteristics to est

5、ablish a regional characteristics of H5 APP called small incense kitchen delivery platform. The system USES the mainstream of HTML 5, native JS, CSS (range), JS library (jQuery), CSS framework (the bootstrap), Cordova plug-in (API) call equipment make the development of the front desk page, such as

6、using Java development background, using the Apache Web server and database (Mysql). The platform using the visual interface Wex5 as development tool. Application of the operating system for Android or IOS.KEY WORDS：Internet; WeX5; WeChat; Take-away APP1 前言1.1 系统开发目的和背景 手机最初作为一种通讯工具为人们所熟知，现如今它已不单是一种

7、通讯设备了，多样化的功能赋予了它更多的实用价值，手机越来越普及，小到学生大到老人，在各个领域的人都在使用手机。我们交流和沟通的内容在不断的扩大，那么社会服务也必须紧跟着社会发展方向发展和前进。如今电子商务得到了很好的发展和遍及。生活中传统的餐饮业，大多数都是实体店的经营模式存在的。而餐饮业是多元化，个性化的服务性行业，那么最能体现这两点的服务方式就是电商。网上订餐系统随着人们生活方式的改变也越来越成熟。随着手机订餐APP的普及，外卖作为一种便捷的就餐方式以走进我们的日常生活。为了打造一个独特的网上订餐APP，为顾客提供周到就餐服务，建立独特的区域性餐饮服务，开发“小香厨”外卖平台。“小香厨”外

8、卖APP项目总的指标是运用数字通信技术，电子商务，互联网技术等多种前沿技术。开发一个以个人，民众为主体，以居民楼和小区为基本单元，结合平板，手机等电子通性设备，提供及时和美味的饮食服务平台。1.2外卖平台现状综述1.2.1 外卖平台的发展情况 近年来，移动互联网取得了前所未有发展，它打破了传统模式日益成为提供信息的最佳渠道。线上购餐成为了一种全新的美食购物途径，它丰富了我们的生活方式，为我们带来巨大的便利，因而它快速的崛起，在网络购物中占据一席地位，它诞生就很快得到大家的认可和欢迎，并快速的接受了这一服务方式。餐饮业务加入到网络平台上它就不仅要注重食物的味道，还得提高餐品的外送速度上。就针对我

9、们的大学生而言，他们在生活中使用外卖服务的比例竟然高达87%。在此可以简单的看出我们的就餐行为在慢慢的向随时性，随地性，自由性的方向发展，不在受到空间和时间的约束，通俗的说就是想吃就定餐，而不是之前的按时就餐。大学生对网络的使用率高也是促进以大学为中心的区域性网上消费网络。我们的生活习惯的改变极大的加快了外卖行业的发展，呈现了一种相互促进的态势 现如今，国内的网上订餐平台得到了快速的发展，具有良好的前景和发展空间。已有很多人一起来分这块大蛋糕。此前国内外卖市场上呈现了包含糯米网，美团，淘点点，饿了么，XX外卖，点我吧，外卖超人等十几种相互竞争大型的外卖平台。饿了么与美团在大学生占有了较大的份额

10、，由此可见大学生已认可外卖这一消费理念。1.2.2 外卖市场分析 按照相关数据显示，有很多饮食店利用网上销售的销售额还高出了实体店的营业额。近年来外卖市场在不断的扩大，据一些报告显示，仅在2015年一年中，线上外卖交易额达到了216.84亿元。而在2015年第一季度，交易额是32.18亿元，到第四季度就涨到了81.7亿元，季度增速达到20点，由此可见外卖发展速度的惊人。1.2.3 消费者分析 快节奏的城市生活，催出了 一种叫做“宅居”的社会现象。外卖服务满足了“民以食为天”的生存需要，这就让 “外卖”拥有了很大的市场，“宅”生活的盛行加快了这一行业的发展。虽然人们愿意“宅在家里”的原因是很多的

11、，这样的社会现象促进了“外卖业”的发展， “宅生活”与“外卖业”紧紧的联系在一起。“送餐到家”形成了一条特色产业，让更多的人养成了“外卖情结”，通俗的说就是一想到吃就想到了外卖。现在，假如你问我们生活中的“宅人”是如何解决自己吃饭问题的，他们既不进厨房自己做饭也不去外卖餐厅吃饭，那么能送饭上门的“外卖”则成了他们不二的选择。外卖业的产生和发展促进了社会的发展，极大的方便了我们的生活。1.2.4 商家分析 传统的餐饮业基本上都是到店用餐，而随着社会的进步，时代的发展，我们的生活方式也在发生着巨大的改变，因此传统的经营模式也慢慢的发生向着人们的发展的方向发展。现在流行这一种生活方式那就是“宅居”，

12、随着“宅”生活的渐渐流行，不论是年轻人，还有未成年人，以及老人都不愿意出门，那么外卖就成了满足人们生活需要的最好的方式，也是越来越多的商家的加入外卖这一行业，提高了他们的利润来源。就我们大学校园而言，大多数的外卖商家普遍采用的是迅速占领市场的路线，对于商家品牌的建设并没有做大多的投入和精力。因为小商家的资金不够雄厚，实力有限，那么节约成本，提高出餐效率则是他们主要关注的地方。网络外卖平台就符合了他们的根本目的，线上订餐具有互动性，直观性的特点，而且成本低廉，方便快捷。网上餐厅可以为我们呈现食物的色泽和样貌，也可以和顾客进行交流，实时的根据顾客们提出的意见对餐厅的服务和菜系做修改。根据人们的消费

13、观念和生活习惯，建立起迎合大学生的销售模式，对平台的菜品进行促销活动，增大竞争力，促进消费。1.3 系统开发意义 针对目前餐饮业上存在的问题和发展方向的背景下，我们可以根据地方的文化，风俗，饮食文化角度入手在这一大环境中找到一个创造利益的地方。“小香厨”外卖平台适合所有的有外卖需求的消费者，为他们提供最好的服务，以他们的消费要求作为平台研发和发展的目标。利用网上订餐平台为商家创造经济利益，促进地方的消费水平。网上订餐逐渐被人们所喜爱，在为商家和企业带来利润的同时，拉动了消费，方便了人们的生活。“小香厨”外卖APP的目的是为了打造直观，可靠，健康，快捷，方便的网络订餐系统，方便消费者的饮食生活，

14、为大家的生活带来便利。平台应抓住地方上的中小型店铺，建立区域化的饮食服务圈，为广大消费者提供最切合他们要求的服务，搭建一个具有特色的外卖平台。2 系统开发环境和开发工具“小香厨”外卖平台采用的是B/S（浏览器和服务器）架构，整个平台使用H5，JS，Mysql数据库与插件等结合实现，使用WEX5作为开发工具。2.1 WEX5简介 WEX5作为一款高性能的开源，免费和轻架构的快捷H5 App开发工具，极大的提高了App的开发效率。其在ECLIPSE的基础上进行了封装，增加了它的基础功能，同时还融合了许多的组件，简单快捷，成为了一款集成的前端开发工具。Wex5采用了主流的MVC（ModelViewC

15、ontrolle即模型试图控制器）设计模式，提供了对HTML，CSS和JavaScript的全局控制，同时遵循Apache（Apache HTTP Server）开源协议，主张采用视图（View）与数据（Data）分离，代码的逻辑和页面的描述分离，支持原生调试，真机调试，浏览器调试等多种调试模式，开发工程师可掌握每一段代码。 Wex5采用了H5，CSS3和JS的标准前端开发技术，使用了AMD（Asynchronous Module Definition）规范，即使用了异步加载机制的NodeJs，Bootstrap，RequireJS，JQuery等主流的前端技术；同时Wex5使用的混合应用（H

16、ybirid App）开发模式是基于PhoneGap（Cordova）的，可以非常容易的调用移动设备的功能以及它的硬件能力，如手机的许多功能，比如说图片库，相机，语音通话，计算器，文件，视频，电池，指南针，通讯录，浏览器等众多手机应用，达到了一次开发，多次利用部署的效果，确保了开发人员的开发成果始终得到最大利用；而且Wex5开发出的作品支持包括C，C+，C#，PHP，Java，NodeJS，.NET在内的多种类型的后端技术，而且对云API的兼容性也非常友好。让开发工程师可以轻松的面对各种复杂的数据，精简代码。虽然过程变得简单了但研发出的手机应用使用和运行体验能够媲美原生开发。 Wex5作为一种

17、可视化开发工具，简单的开发界面，为工程师营造良好的开发环境，拖拽式页面设计极大的提高了开发效率。 虽然Wex5的功能很多，很强大，但开发者设计的非常人性化是一种便携式的软件，不需要进行安装，解压压缩包后打开就能使用，很方便，避免的安装的繁琐操作。3 系统功能 该系统主要能实现以下几种功能：（1）顾客登录“小香厨”外卖平台进行菜品预览（2）购物车（3）点菜完毕生成订单（4）网上支付（5）用户信息（6）定位4 系统设计4.1 外卖系统功能介绍表1 系统功能表外卖分类从数据库查询获得相关菜品信息显示菜品信息从数据库中获取菜品信息加入购物车页面数据计算下单并支付将订单保存到数据库配置默认配送信息. 通

18、过定位获得地址信息. 将配送信息保存到数据库4.2 架构原理图1 系统架构原理4.2 数据交互过程图2 系统数据交互过程4.3 系统数据库设计 经过仔细研读 “小香厨”外卖系统的需求分析，列出以下系统所需的数据项和数据表:表2 菜品表字段名称数据类型说明To_idVARCHAR(20) NOT NULL菜品IDTo_nameVARCHAR(50)菜品名称To_priceVARCHAR(20)单价To_descriptionVARCHAR(200)描述To_imageVARCHAR(50)图片To_sortVARCHAR(20)菜品类别表3 订单表字段名称数据类型说明To_idVARCHAR(2

19、0) NOT NULL用户IDTo_nameVARCHAR(50)姓名To_phoneVARCHAR(50)手机号To_addressVARCHAR(200)配送地址表4 用户表字段名称数据类型说明To_idVARCHAR(20) NOT NULL订单IDTo_createTimeVARCHAR(50)订餐时间To_contentVARCHAR(20)订餐内容To_moneyVARCHAR(20)订餐金额To_user_idVARCHAR(50)用户IDTo_user_nameVARCHAR(50)用户姓名To_user_phoneVARCHAR(50)用户手机号To_addressVARCH

20、AR(200)配送地址To_paystateINT支付状态4.4 开发过程HTML5提供了丰富的页面组件，并且可以通过数据的绑定实现数据的感知，JS模块化（AMD）加载，不用写Script标签，CSS3提供了很多样式，例如Bootstrap样式和扩展样式（X开头），Native（Cordova）可以调用原生插件如支付宝支付，微信支付，定位等。将下载好的Wex5压缩包解压到电脑的硬盘上，打开解压后的文件夹里面有几个bat文件，点击启动“Wex5开发工具.bat”文件就可以打开我们的开发工具。4.4.1 前端页面开发过程 1）搭建页面框架 . 新建应用. 新建页面文件新建w文件. 制作上下两端固定

21、的页面放panel组件. 在页面顶部放标题栏在panel的top中放titlebar组件. 在页面底部放导航栏在panel的bottom放buttonGroup组件. 在页面中部放多个内容块 在panel的content放contents组件完成的页面框架如图3所示。 图3 页面框架 2）开发首页菜品展示界面 . 准备首页数据 在module组件中放data组件 添加数据表中的列 . 访问数据表获得菜品数据调用baas提供的queryFood动作. 制作向上滑动加载数据的列表 在foodContent中放scrollview组件 在scrollview的第二个div中放list组件. 使用媒体

22、对象Bootstrap组件. 显示菜品图片使用image组件. 显示菜品名称，描述，价格 使用output组件图4 菜单界面3）购物车界面. 准备购物车数据 在module组件中放data组件 添加数据表中的列 . 制作有标题的内容区域在cartContent中放panel（bootstrap）组件设置标题. 显示菜品名称，菜品单价，订购数量 在panel的body中放list组件 在list组件的li中放row组件 在rowt组件的col中放output组件. 加入购物车. 加减订餐数量在row组件的col中放button组件. 计算合计金额图5 购物车界面 4）订单界面. 准备订单页数据

23、在module组件中放data组件 添加数据表中的列 . 访问数据表获得我的订单数据调用baas提供的queryOrder动作. 制作向上滑动加载数据的列表 在orderContent中放scrollview组件 在scrollview的第二个div中放list组件. 显示订餐时间，订餐内容，配送地址，合计金额在li中放labelOutput组件. 实现下单功能 存储订单数据和用户信息 清空购物车 跳转到订单页图6 订单界面 5）个人中心界面. 准备个人中心也的数据 在module组件中放data组件 添加数据表中的列 访问数据表获得个人信息 调用baas提供的queryUser动作. 制作有

24、标题的内容区域在cartContent中放panel（bootstrap）组件设置标题. 显示个人信息 在panel的body中放labelInput组件，显示姓名，手机号和地址. 获取个人信息 使用手机设备的ID作为用户ID 使用用户ID过滤用户的信息. 保存个人信息图7 个人中心界面 5）页面细节处理. 分页加载数据. 保存后更新数据状态. 购物车按钮上显示数量总计. 购物车内没有菜品时显示为空. 图片进行圆角处理. 页面的样式调整4.4.2 后端服务开发过程 1）开发服务及调用服务. 新建servlet作为服务. 使用ajax调用servlet $.ajax( type:post; as

25、ync:options.async?options.async:false; dataType:json; url:this.BASE_URL+options.url; data: action:options.action; params:JSON.stringify(optings.params) complete:function(xhr); 传参 接收返回的后台数据. BaaS服务 获得数据库连接 Util.getConnection 通过jndi名称获得数据库连接 查询数据 Util.queryData 支持表单查询，支持sql查询，支持分页 将查询到的数据表写入response U

26、til.queryData 支持表单查询，支持sql查询，支持分页 JSON转Table Transform.jsonToTable 传入json，反序列化为Table 保存数据 Util.saveData. BaaS JS库 调用服务 sendRequest 使用ajax发送post 请求 返回json数据 支持成功的回调和失败的回调 获取列定义 getDataColumns 获取列名称，列类型. 图片进行圆角处理. 页面的样式调整2）开发自己的服务. 开发查询数据的服务 获取数据库连接 查询数据表，获得Table 将Table写入response. 开发保存数据的的服务获得用户新增，修改，

27、删除的数据获得数据库连接将新增，修改，删除的数据写入数据库4.4.3 调用原生插件 1）App支付插件. 支付宝支付 插件 com.justep.cordova.plugin.alipay 方法 navigator.alipay.pay 参数. 微信支付插件 com.justep.cordova.plugin.weixin.v3方法 navigator.weixin.sendPayReq参数特别注意：证书，包名，发布模式 2）获取地理位置插件. 获取地理位置信息 插件 com.justep.cordova.plugin.baidulocation 方法 navigator.geolocatio

28、n.getCurrentPostion . 在XX地图上显示使用HTML文件显示XX地图坐标系转换4.4.4 打包及部署. 使用模式2打包及部署 打包使用模式2 部署到任意web应用服务器 资源更新编译UI资源，部署资源5 结论 “小香厨”外卖平台只做了用户界面，没有涉及管理平台。在开发过程中，详细的定义了每个模块的基本功能，运用了前端工程师的思维与设计思路，在数据库设计中采用了关系模式的设计方法，采用模块化开发完成系统每个功能模块。“小香厨”外卖平台主要包括了四个大的模块；分别是个人中心模块，订单管理模块，购物车，首页外卖展示模块。开发过程包括前端页面开发，Web应用服务器，后端服务开发，A

29、PP开发。参考文献1马科新形态一体化教材,HTML5 App开发工程师认证考试制定教材M北京：高等教育出版社，2016：1-2562张新成，缪亮Dreamweaver网页制作实用教程M北京：清华大学出版社，2011：104-3763王珊，萨师煊数据库系统概论M北京：高等教育出版社，2006：34-784王素梅，鲍佳等Dreamweaver8 购物网站创建技术精粹 M北京：清华大学出版社，20075飞思科技产品研发中心SQL server 2005 数据库和数据仓库北京：电子工业出版社， 20076 Wex5简介Z北京：起步科技股份有限公司，20167 H5 App开发工具Wex5Z开源中国，20168 梁强坤 Cordova插件开发Z致谢时间过得真快，转眼间四年大学即将结束，这四年的大学生活快乐，紧张，充实。在大学期间学会了很多东西，不仅学到了有用的知识，较强的专业知识以及待人接物，为人处事等。在这期间得到了很多老师，同学和朋友的鼓励，关心和帮助。现在已迎来了大学的最后一学期，即将展开紧张的毕业答辩事宜。在完成学士学位论文之际，我要向给予我帮助的人最诚挚的谢意和衷心的祝福。在此我要特别感谢我的论文指导老师，李尧老师。在我确定论文题目以及后面的论文编写上提出了很多指导性的建议和意见，在我的事情上花费了大量的时间和精力，孜孜