WeX5开发外卖

1、使用WeX5开发外卖案例完整过程外卖案例功能介绍显示菜品信息从数据库中获取菜品信息加入购物车页面数据计算下单并支付将订单保存到数据库配置默认配送信息可通过定位获得地址信息将配送信息保存到数据库运行方式手机AppWeb App 微信公众号课程概览课程介绍讲解使用WeX5开发外卖案例的完整过程，前端页面开发 （六讲）原生插件调用 （二讲）微信公众号开发（一讲）课程目标学会开发App前端页面、调用后端服务、以及访问数据库学会开发手机定位、手机支付、以及打包部署学会微信公众号开发适合人群App开发人员 后端服务开发 （三讲） 打包及部署 （一讲）架构原理数据交互过程PanelContentsListI

2、nputImageButtonData查询菜品查询菜品queryFood查询订单查询订单queryOrder查询用户查询用户queryUser保存save菜品表菜品表Takeout_food订单表订单表Takeout_order用户表用户表Takeout_userServletBaasSqlSpringHibernateMyBatisAJAX外卖案例使用的数据表菜品表字段菜品表字段字段名称字段名称字段类型字段类型fID菜品IDVARCHAR(50) NOT NULLfName 菜品名称VARCHAR(50)fPrice 单价DECIMAL(10,2)fDescription 描述VARCHAR

3、(100)fImage 图片VARCHAR(100)用户信息表用户信息表 字段名称字段名称字段类型字段类型fID 用户IDVARCHAR(50) NOT NULLfName 姓名VARCHAR(50)fPhoneNumber 手机号VARCHAR(20)fAddress 配送地址VARCHAR(200)外卖案例使用的数据表订单表字段订单表字段字段名称字段名称字段类型字段类型fID 订单IDVARCHAR(50) NOT NULLfCreateTime 订餐时间DATETIMEfContent 订餐内容VARCHAR(200)fSum 订餐金额DECIMAL(10,2)fUserID 用户IDV

4、ARCHAR(50)fUserName 用户姓名VARCHAR(50)fPhoneNumber 用户手机号VARCHAR(20)fAddress 配送地址VARCHAR(200)fPayState 支付状态INT外卖案例的提供的服务查询数据查询菜品lhttp:/IP:端口/baas/takeout?action=queryFood&params=查询订单lhttp:/IP:端口/baas/takeout?action=queryOrder&params=查询用户信息lhttp:/IP:端口/baas/takeout?action=queryUser&params=保存数

5、据保存订单、用户信息lhttp:/IP:端口/baas/takeout?action=save&params=外卖案例的服务调用前端ajax请求后端服务 $.ajax( type : post, async : options.async ? options.async : false, dataType : json, url : this.BASE_URL + options.url, data : action : options.action, params : JSON.stringify(options.params) , “complete : function(xhr)

6、 );外卖案例的前端页面Html5提供了丰富的页面组件通过数据绑定实现数据感知JS模块化（ AMD ）加载，不用写script标签CSS3提供很多样式lBootstrap 样式l扩展样式（x-开头）Native(Cordova)原生插件调用l支付宝支付、微信支付、定位前端页面开发过程第一讲 搭建页面框架第二讲 开发菜品列表页第三讲 开发购物车页第四讲 开发我的信息页第五讲 开发订单页第六讲 细节处理第一讲 搭建页面框架新建应用新建页面文件 新建w文件制作上下两端固定的页面 放panel组件在页面上端放标题栏 在panel的top放titlebar组件在页面下端放导航栏 在panel的botto

7、m放buttonGroup组件在页面中部放多个内容页在panel的content放contents组件第二讲 开发菜品列表页准备数据在module组件中放data组件添加数据表中的列访问数据表获得菜品数据l 调用baas提供的queryFood动作第二讲 开发菜品列表页制作向上滑动加载数据的列表 在foodContent中放scrollview组件 在scrollview的第2个div中放list组件使用媒体对象 Boostrap组件显示菜品图片 使用image组件显示菜品名称、描述、价格使用output组件第三讲 开发购物车页准备数据在module组件中放data组件添加数据表中的列第三讲

8、开发购物车页制作有标题的内容区域 在cartContent中放panel(bootstrap)组件 设置标题显示菜品名称、菜品单价、订购数量 在panel的body中放list组件 在list组件的li中放row组件 在row组件的col中放output组件加入购物车加减数量 在row组件的col中放button组件计算合计金额第四讲 开发我的信息页准备数据在module组件中放data组件添加数据表中的列访问数据表获得我的信息l 调用baas提供的queryUser动作第四讲 开发我的信息页制作有标题的内容区域在ownContent中放panel(bootstrap)组件设置标题显示我的信息

9、在panel的body中放labelInput组件，显示我的姓名、手机、地址获取我的信息使用手机设备ID作为用户ID使用用户ID过滤用户信息保存我的信息第五讲 开发订单页准备数据在module组件中放data组件添加数据表中的列访问数据表获得我的订单信息l 调用baas提供的queryOrder动作第五讲 开发订单页制作向上滑动加载数据的列表 在orderContent中放scrollview组件 在scrollview的第2个div中放list组件显示订餐时间、订餐内容、配送地址、合计金额 在li中放labelOutput组件实现下单功能 存储订单和用户信息 清空购物车 跳转到订单页第六讲

10、细节处理分页加载数据保存后更新数据状态购物车按钮上显示数量合计购物车内没有菜品时显示空圆角图片样式调整后端服务开发过程第七讲 开发服务&调用服务第八讲 了解BaaS第九讲 开发自己的服务第七讲 开发服务&调用服务新建servlet作为服务使用ajax调用servlet 传参 接收参数第八讲 了解BaaSBaaS 服务获得数据库连接lUtil.getConnectionl通过jndi名称获得数据库链接查询数据lUtil.queryDatal支持单表查询、支持sql查询、支持分页将Table写入responselUtil.writeTableToResponsel将Table序列化

11、为json，将json写入response，支持跨域访问json转TablelTransform.jsonToTablel传入json，反序列化为Table保存数据lUtil.saveData第八讲 了解BaaSBaaS js库 调用服务lsendRequestl使用ajax发送post请求l返回json格式数据l支持成功回调、失败回调 获取列定义lgetDataColumnsl获得列名称、列类型第九讲 开发自己的服务开发查询数据的服务 获得数据库连接 查询数据表，得到Table 将Table写入response开发保存数据的服务 获得用户新增、修改、删除的数据 获得数据库连接 将新增、修改、

12、删除的数据分别写入数据表原生插件插件介绍用途：调用设置上的原生API优点：开发跨平台App支持自定义插件位置/Native/plugins目录下插件的使用引用 require(cordova!org.apache.cordova.device)调用 window.device.uuid;打包时配置参数原生插件调用第十讲 在App中支付第十一讲 在App中获得地理信息第十讲 在App中支付支付宝支付插件 com.justep.cordova.plugin.alipay方法 navigator.alipay.pay参数微信支付插件 com.justep.cordova.plugin.weixin.

13、v2 com.justep.cordova.plugin.weixin.v3方法 navigator.weixin.generatePrepayId navigator.weixin.sendPayReq参数特别注意：证书、包名、发布模式 第十一讲 在App中获得地理信息获得地理信息插件l org.apache.cordova.geolocationl com.justep.cordova.plugin.baidulocation方法 lnavigator.geolocation.getCurrentPosition在百度地图上显示使用html文件显示百度地图 坐标系转换第十二讲 打包及部署使用模式2的打包部署过程打包使用模式2部署到任意Web应用服务器资源更新编译UI资源、部署资源使用模式3的打包部署过程打包使用模式3部署使用UIServer，使用Java Web服务器资源更新修改版本号、模型编译、部署资源必须使用使用了附件组件或j文件模式2的发布及更新发布设置App版本号打包发布到Web应用服务器更新仅更新UI资源l编译UI资源l发布到Web应用服务器更新App及UI资源l修改Ap