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

精心整理本科毕业论文姓 名： 李维 学 号： 20131041101 专 业： 物联网工程 班 级： 2013级4班 题 目： 基于H5的微信开发与实现 指导教师： 李尧 书目1 前言31.1 系统开发目的和背景31.2外卖平台现状综述31.2.1 外卖平台的开展状况31.2.2 外卖市场分析41.2.3 消费者分析41.2.4 商家分析41.3 系统开发意义52 系统开发环境和开发工具52.1 WEX5简介53 系统功能64 系统设计64.1 外卖系统功能介绍64.2 架构原理74.2 数据交互过程74.3 系统数据库设计74.4 开发过程84.4.1 前端页面开发过程94.4.2 后端效劳开发过程114.4.3 调用原生插件134.4.4 打包及部署145 结论14参考文献15致谢16基于H5的微信开发与实现摘要：在21世纪互联网已经进入了一个快速开展和成熟阶段，电子产品成为了生活中不行缺少角色。随着社会的开展和生活观念的变更，我们的消费意识也生了巨大的变更，孕育出了一种新网络营销模式，即外卖行业。外卖行业具有广袤的开展空间和潜在动力，有大市场，大的消费群体，可以为我们缔造可观的财产价值。鉴于当前此行业的蓬勃开展，研发一个迎合当前群众消费习惯和生活方式，结合地方特色建立一个区域性的特色的名为“小香厨”的H5 APP外卖平台。该系统运用了主流的HTML5、原生JS、CSSCSS3、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, electronic 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 space 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 establish 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 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 系统开发目的和背景手机最初作为一种通讯工具为人们所熟知，现如今它已不单是一种通讯设备了，多样化的功能赐予了它更多的管用价值，手机越来越普及，小到学生大到老人，在各个领域的人都在运用手机。我们沟通和沟通的内容在不断的扩大，那么社会效劳也必需紧跟着社会开展方向开展和前进。如今电子商务得到了很好的开展和普及。生活中传统的餐饮业，大多数都是实体店的经营模式存在的。而餐饮业是多元化，特性化的效劳性行业，那么最能表达这两点的效劳方式就是电商。网上订餐系统随着人们生活方式的变更也越来越成熟。随着手机订餐APP的普及，外卖作为一种便捷的就餐方式以走进我们的日常生活。为了打造一个独特的网上订餐APP，为顾客供应周到就餐效劳，建立独特的区域性餐饮效劳，开发“小香厨”外卖平台。“小香厨”外卖APP工程总的指标是运用数字通信技术，电子商务，互联网技术等多种前沿技术。开发一个以个人，民众为主体，以居民楼和小区为根本单元，结合平板，手机等电子通性设备，供应刚好和美味的饮食效劳平台。1.2外卖平台现状综述1.2.1 外卖平台的开展状况近年来，移动互联网取得了前所未有开展，它打破了传统模式日益成为供应信息的最正确渠道。线上购餐成为了一种全新的美食购物途径，它丰富了我们的生活方式，为我们带来巨大的便利，因而它快速的崛起，在网络购物中占据一席地位，它诞生就很快得到大家的认可和欢送，并快速的承受了这一效劳方式。餐饮业务参加到网络平台上它就不仅要留意食物的味道，还得提高餐品的外送速度上。就针对我们的大学生而言，他们在生活中运用外卖效劳的比例竟然高达87%。在此可以简洁的看出我们的就餐行为在渐渐的向随时性，随地性，自由性的方向开展，不在受到空间和时间的约束，通俗的说就是想吃就定餐，而不是之前的按时就餐。大学生对网络的运用率高也是促进以大学为中心的区域性网上消费网络。我们的生活习惯的变更极大的加快了外卖行业的开展，呈现了一种相互促进的态势现如今，国内的网上订餐平台得到了快速的开展，具有良好的前景和开展空间。已有很多人一起来分这块大蛋糕。此前国内外卖市场上呈现了包含糯米网，美团，淘点点，饿了么，百度外卖，点我吧，外卖超人等十几种相互竞争大型的外卖平台。饿了么与美团在大学生占有了较大的份额，由此可见大学生已认可外卖这一消费理念。1.2.2 外卖市场分析遵照相关数据显示，有很多饮食店利用网上销售的销售额还高出了实体店的营业额。近年来外卖市场在不断的扩大，据一些报告显示，仅在2015年一年中，线上外卖交易额到达了216.84亿元。而在2015年第一季度，交易额是32.18亿元，到第四季度就涨到了81.7亿元，季度增速到达20点，由此可见外卖开展速度的惊人。1.2.3 消费者分析快节奏的城市生活，催出了 一种叫做“宅居”的社会现象。外卖效劳满意了“民以食为天”的生存须要，这就让 “外卖”拥有了很大的市场，“宅”生活的盛行加快了这一行业的开展。虽然人们情愿“宅在家里”的缘由是很多的，这样的社会现象促进了“外卖业”的开展， “宅生活”与“外卖业”紧紧的联系在一起。“送餐到家”形成了一条特色产业，让更多的人养成了“外卖情结”，通俗的说就是一想到吃就想到了外卖。此时此刻，假设你问我们生活中的“宅人”是如何解决自己吃饭问题的，他们既不进厨房自己做饭也不去外卖餐厅吃饭，那么能送饭上门的“外卖”那么成了他们不二的选择。外卖业的产生和开展促进了社会的开展，极大的便利了我们的生活。1.2.4 商家分析传统的餐饮业根本上都是到店用餐，而随着社会的进步，时代的开展，我们的生活方式也在发生着巨大的变更，因此传统的经营模式也渐渐的发生向着人们的开展的方向开展。此时此刻流行这一种生活方式那就是“宅居”，随着“宅”生活的渐渐流行，不管是年轻人，还有未成年人，以及老人都不情愿出门，那么外卖就成了满意人们生活须要的最好的方式，也是越来越多的商家的参加外卖这一行业，提高了他们的利润来源。就我们大学校内而言，大多数的外卖商家普遍采纳的是快速占据市场的路途，对于商家品牌的建立并没有做大多的投入和精力。因为小商家的资金不够雄厚，实力有限，那么节约本钱，提高出餐效率那么是他们主要关注的地方。网络外卖平台就符合了他们的根本目的，线上订餐具有互动性，直观性的特点，而且本钱低廉，便利快捷。网上餐厅可以为我们呈现食物的色泽和样貌，也可以和顾客进展沟通，实时的依据顾客们提出的看法对餐厅的效劳和菜系做修改。依据人们的消费观念和生活习惯，建立起迎合大学生的销售模式，对平台的菜品进展促销活动，增大竞争力，促进消费。1.3 系统开发意义针对目前餐饮业上存在的问题和开展方向的背景下，我们可以依据地方的文化，风俗，饮食文化角度入手在这一大环境中找到一个缔造利益的地方。“小香厨”外卖平台适合全部的有外卖需求的消费者，为他们供应最好的效劳，以他们的消费要求作为平台研发和开展的目标。利用网上订餐平台为商家缔造经济利益，促进地方的消费水平。网上订餐渐渐被人们所宠爱，在为商家和企业带来利润的同时，拉动了消费，便利了人们的生活。“小香厨”外卖APP的目的是为了打造直观，牢靠，安康，快捷，便利的网络订餐系统，便利消费者的饮食生活，为大家的生活带来便利。平台应抓住地方上的中小型店铺，建立区域化的饮食效劳圈，为广袤消费者供应最切合他们要求的效劳，搭建一个具有特色的外卖平台。2 系统开发环境和开发工具“小香厨”外卖平台采纳的是B/S阅读器和效劳器架构，整个平台运用H5，JS，Mysql数据库与插件等结合实现，运用WEX5作为开发工具。2.1 WEX5简介WEX5作为一款高性能的开源，免费和轻架构的快捷H5 App开发工具，极大的提高了App的开发效率。其在ECLIPSE的根底上进展了封装，增加了它的根底功能，同时还融合了很多的组件，简洁快捷，成为了一款集成的前端开发工具。Wex5采纳了主流的MVCModelViewControlle即模型试图限制器设计模式，供应了对HTML，CSS和JavaScript的全局限制，同时遵循ApacheApache HTTP Server开源协议，主见采纳视图View与数据Data分别，代码的逻辑和页面的描述分别，支持原生调试，真机调试，阅读器调试等多种调试模式，开发工程师可驾驭每一段代码。Wex5采纳了H5，CSS3和JS的标准前端开发技术，运用了AMDAsynchronous Module Definition标准，即运用了异步加载机制的NodeJs，Bootstrap，RequireJS，JQuery等主流的前端技术；同时Wex5运用的混合应用Hybirid App开发模式是基于PhoneGapCordova的，可以特别简洁的调用移动设备的功能以及它的硬件实力，如手机的很多功能，比方说图片库，相机，语音通话，计算器，文件，视频，电池，指南针，通讯录，阅读器等众多手机应用，到达了一次开发，屡次利用部署的效果，确保了开发人员的开发成果始终得到最大利用；而且Wex5开发出的作品支持包括C，C+，C#，PHP，Java，NodeJS，.NET在内的多种类型的后端技术，而且对云API的兼容性也特别友好。让开发工程师可以轻松的面对各种困难的数据，精简代码。虽然过程变得简洁了但研发出的手机应用运用和运行体验能够媲美原生开发。Wex5作为一种可视化开发工具，简洁的开发界面，为工程师营造良好的开发环境，拖拽式页面设计极大的提高了开发效率。虽然Wex5的功能很多，很强大，但开发者设计的特别人性化是一种便携式的软件，不须要进展安装，解压压缩包后翻开就能运用，很便利，幸免的安装的繁琐操作。3 系统功能该系统主要能实现以下几种功能：（1） 顾客登录“小香厨”外卖平台进展菜品预览（2） 购物车（3） 点菜完毕生成订单（4） 网上支付（5） 用户信息（6） 定位4 系统设计4.1 外卖系统功能介绍表1 系统功能表外卖分类从数据库查询获得相关菜品信息显示菜品信息从数据库中获得菜品信息参加购物车页面数据计算下单并支付将订单保存到数据库配置默认配送信息. 通过定位获得地址信息. 将配送信息保存到数据库4.2 架构原理图1 系统架构原理4.2 数据交互过程数据库前端后台查询、保存数据查询、保存数据数据库效劳数据组件呈现组件返回S数据返回JSON菜品表Takeout_food订单表Takeout_order用户表Takeout_user查询菜品queryFood查询订单QueryOrder查询用户QueryUser保存saveServletBaasSqlSpringHibernateMyBatisDataPanelContentsListInputImageButton图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(20) 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_addressVARCHAR(200)配送地址To_paystateINT支付状态4.4 开发过程HTML5供应了丰富的页面组件，并且可以通过数据的绑定实现数据的感知，JS模块化AMD加载，不用写Script标签，CSS3供应了很多样式，例如Bootstrap样式和扩展样式X开头，NativeCordova可以调用原生插件如支付宝支付，微信支付，定位等。将下载好的Wex5压缩包解压到电脑的硬盘上，翻开解压后的文件夹里面有几个bat文件，点击启动“Wex5开发工具.bat”文件就可以翻开我们的开发工具。4.4.1 前端页面开发过程1搭建页面框架. 新建应用. 新建页面文件 新建w文件. 制作上下两端固定的页面 放panel组件. 在页面顶部放标题栏 在panel的top中放titlebar组件. 在页面底部放导航栏 在panel的bottom放buttonGroup组件. 在页面中部放多个内容块 在panel的content放contents组件完成的页面框架如图3所示。 图3 页面框架2开发首页菜品展示界面. 打算首页数据 在module组件中放data组件 添加数据表中的列. 访问数据表获得菜品数据 调用baas供应的queryFood动作. 制作向上滑动加载数据的列表 在foodContent中放scrollview组件 在scrollview的其次个div中放list组件. 运用媒体对象 Bootstrap组件. 显示菜品图片 运用image组件. 显示菜品名称，描述，价格 运用output组件图4 菜单界面3购物车界面. 打算购物车数据在module组件中放data组件 添加数据表中的列. 制作有标题的内容区域 在cartContent中放panelbootstrap组件 设置标题. 显示菜品名称，菜品单价，订购数量在panel的body中放list组件 在list组件的li中放row组件 在rowt组件的col中放output组件. 参加购物车. 加减订餐数量 在row组件的col中放button组件. 计算合计金额图5 购物车界面4订单界面. 打算订单页数据 在module组件中放data组件 添加数据表中的列. 访问数据表获得我的订单数据 调用baas供应的queryOrder动作. 制作向上滑动加载数据的列表 在orderContent中放scrollview组件 在scrollview的其次个div中放list组件. 显示订餐时间，订餐内容，配送地址，合计金额 在li中放labelOutput组件. 实现下单功能 存储订单数据和用户信息 清空购物车 跳转到订单页图6 订单界面5个人中心界面. 打算个人中心也的数据在module组件中放data组件 添加数据表中的列 访问数据表获得个人信息调用baas供应的queryUser动作. 制作有标题的内容区域 在cartContent中放panelbootstrap组件 设置标题. 显示个人信息在panel的body中放labelInput组件，显示姓名，手机号和地址. 获得个人信息运用手机设备的ID作为用户ID运用用户ID过滤用户的信息. 保存个人信息图7 个人中心界面5页面细微环节处理. 分页加载数据. 保存后更新数据状态. 购物车按钮上显示数量总计. 购物车内没有菜品时显示为空. 图片进展圆角处理. 页面的样式调整 后端效劳开发过程1开发效劳及调用效劳. 新建servlet作为效劳. 运用ajax调用servlet$.ajax(type:post;async: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查询，支持分页将查询到的数据表写入responseUtil.queryData支持表单查询，支持sql查询，支持分页JSON转TableTransform.jsonToTable传入json，反序列化为Table保存数据Util.saveData.BaaS JS库调用效劳sendRequest运用ajax发送post 恳求返回json数据支持胜利的回调和失败的回调获得列定义getDataColumns获得列名称，列类型. 图片进展圆角处理. 页面的样式调整2开发自己的效劳. 开发查询数据的效劳获得数据库连接 查询数据表，获得Table 将Table写入response. 开发保存数据的的效劳 获得用户新增，修改，删除的数据 获得数据库连接 将新增，修改，删除的数据写入数据库4.4.3 调用原生插件1App支付插件. 支付宝支付 方法 navigator.alipay.pay 参数. 微信支付 方法 navigator.weixin.sendPayReq 参数 特殊留意：证书，包名，发布模式2获得地理位置插件. 获得地理位置信息 方法 navigator.geolocation.getCurrentPostion. 在百度地图上显示 运用HTML文件显示百度地图 坐标系转换4.4.4 打包及部署. 运用模式2打包及部署打包运用模式2 部署到随意web应用效劳器资源更新编译UI资源，部署资源5 结论“小香厨”外卖平台只做了用户界面，没有涉及管理平台。在开发过程中，具体的定义了每个模块的根本功能，运用了前端工程师的思维与设计思路，在数据库设计中采纳了关系模式的设计方法，采纳模块化开发完成系统每个功能模块。“小香厨”外卖平台主要包括了四个大的模块；分别是个人中心模块，订单管理模块，购物车，首页外卖展示模块。开发过程包括前端页面开发，Web应用效劳器，后端效劳开发，APP开发。参考文献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致谢时间过得真快，转瞬间四年大学即将完毕，这四年的大学生活欢乐，惊慌，充溢。在大学期间学会了很多东西，不仅学到了有用的学问，较强的专业学问以及待人接物，为人处事等。在这期间得到了很多教师，同学和挚友的鼓舞，关怀和协助。此时此刻已迎来了大学的最终一学期，即将绽开惊慌的毕业辩论事宜。在完成学士学位论文之际，我要向赐予我协助的人最真诚的谢意和诚心的祝愿。在此我要特殊感谢我的论文指导教师，李尧教师。在我确定论文题目以及后面的论文编写上提出了很多指导性的建议和看法，在我的事情上花费了大量的时间和精力，孜孜不倦的为我讲解论文的留意事项，在内容上给出了很多改良看法。感谢你，我尊敬的李教师！最终，感谢论文评阅教师们的辛苦工作。