WeX5开发外卖案例_软件开发

PPT 内容
PPT 图集

1. 使用WeX5开发外卖案例完整过程
2. 外卖案例功能介绍显示菜品信息从数据库中获取菜品信息加入购物车页面数据计算下单并支付将订单保存到数据库配置默认配送信息可通过定位获得地址信息将配送信息保存到数据库运行方式手机App Web App 微信公众号
3. 课程概览课程介绍讲解使用WeX5开发外卖案例的完整过程，前端页面开发（六讲）原生插件调用（二讲）微信公众号开发（一讲）课程目标学会开发App前端页面、调用后端服务、以及访问数据库学会开发手机定位、手机支付、以及打包部署学会微信公众号开发适合人群 App开发人员后端服务开发（三讲）打包及部署（一讲）
4. 架构原理前端页面Html5JSCSS3Native (Cordova)Web应用服务器TomcatWeblogicIISApache…后端服务java.netPhp…数据库MysqlMssqlOracleSybaseDB2
5. 数据交互过程前端数据组件展现组件后端服务数据库数据表返回Table或JSON查询/保存数据返回数据查询/保存数据Panel Contents List Input Image Button Data 查询菜品 queryFood 查询订单 queryOrder 查询用户 queryUser 保存 save菜品表 Takeout_food 订单表 Takeout_order 用户表 Takeout_userServlet Baas Sql Spring Hibernate MyBatis AJAX
6. 外卖案例使用的数据表菜品表字段字段名称字段类型fID菜品IDVARCHAR(50) NOT NULLfName 菜品名称VARCHAR(50)fPrice 单价DECIMAL(10,2)fDescription 描述VARCHAR(100)fImage 图片VARCHAR(100)用户信息表字段名称字段类型fID 用户IDVARCHAR(50) NOT NULLfName 姓名VARCHAR(50)fPhoneNumber 手机号VARCHAR(20)fAddress 配送地址VARCHAR(200)
7. 外卖案例使用的数据表订单表字段字段名称字段类型fID 订单IDVARCHAR(50) NOT NULLfCreateTime 订餐时间DATETIMEfContent 订餐内容VARCHAR(200)fSum 订餐金额DECIMAL(10,2)fUserID 用户IDVARCHAR(50)fUserName 用户姓名VARCHAR(50)fPhoneNumber 用户手机号VARCHAR(20)fAddress 配送地址VARCHAR(200)fPayState 支付状态INT
8. 外卖案例的提供的服务查询数据查询菜品 http://IP:端口/baas/takeout?action=queryFood¶ms={} 查询订单 http://IP:端口/baas/takeout?action=queryOrder¶ms={} 查询用户信息 http://IP:端口/baas/takeout?action=queryUser¶ms={} 保存数据保存订单、用户信息 http://IP:端口/baas/takeout?action=save¶ms=
9. 外卖案例的服务调用前端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) {} });
10. 外卖案例的前端页面Html5 提供了丰富的页面组件通过数据绑定实现数据感知 JS 模块化（ AMD ）加载，不用写script标签 CSS3 提供很多样式 Bootstrap 样式扩展样式（x-开头） Native(Cordova) 原生插件调用支付宝支付、微信支付、定位
11. 前端页面开发过程第一讲搭建页面框架第二讲开发菜品列表页第三讲开发购物车页第四讲开发我的信息页第五讲开发订单页第六讲细节处理
12. 第一讲搭建页面框架新建应用新建页面文件新建w文件制作上下两端固定的页面放panel组件在页面上端放标题栏在panel的top放titlebar组件在页面下端放导航栏在panel的bottom放buttonGroup组件在页面中部放多个内容页在panel的content放contents组件
13. 第二讲开发菜品列表页准备数据在module组件中放data组件添加数据表中的列访问数据表获得菜品数据调用baas提供的queryFood动作
14. 第二讲开发菜品列表页制作向上滑动加载数据的列表在foodContent中放scrollview组件在scrollview的第2个div中放list组件使用媒体对象 Boostrap组件显示菜品图片使用image组件显示菜品名称、描述、价格使用output组件
15. 第三讲开发购物车页准备数据在module组件中放data组件添加数据表中的列
16. 第三讲开发购物车页制作有标题的内容区域在cartContent中放panel(bootstrap)组件设置标题显示菜品名称、菜品单价、订购数量在panel的body中放list组件在list组件的li中放row组件在row组件的col中放output组件加入购物车加减数量在row组件的col中放button组件计算合计金额
17. 第四讲开发我的信息页准备数据在module组件中放data组件添加数据表中的列访问数据表获得我的信息调用baas提供的queryUser动作
18. 第四讲开发我的信息页制作有标题的内容区域在ownContent中放panel(bootstrap)组件设置标题显示我的信息在panel的body中放labelInput组件，显示我的姓名、手机、地址获取我的信息使用手机设备ID作为用户ID 使用用户ID过滤用户信息保存我的信息
19. 第五讲开发订单页准备数据在module组件中放data组件添加数据表中的列访问数据表获得我的订单信息调用baas提供的queryOrder动作
20. 第五讲开发订单页制作向上滑动加载数据的列表在orderContent中放scrollview组件在scrollview的第2个div中放list组件显示订餐时间、订餐内容、配送地址、合计金额在li中放labelOutput组件实现下单功能存储订单和用户信息清空购物车跳转到订单页
21. 第六讲细节处理分页加载数据保存后更新数据状态购物车按钮上显示数量合计购物车内没有菜品时显示空圆角图片样式调整
22. 后端服务开发过程第七讲开发服务&调用服务第八讲了解BaaS 第九讲开发自己的服务
23. 第七讲开发服务&调用服务新建servlet作为服务使用ajax调用servlet 传参接收参数
24. 第八讲了解BaaSBaaS 服务获得数据库连接 Util.getConnection 通过jndi名称获得数据库链接查询数据 Util.queryData 支持单表查询、支持sql查询、支持分页将Table写入response Util.writeTableToResponse 将Table序列化为json，将json写入response，支持跨域访问 json转Table Transform.jsonToTable 传入json，反序列化为Table 保存数据 Util.saveData
25. 第八讲了解BaaSBaaS js库调用服务 sendRequest 使用ajax发送post请求返回json格式数据支持成功回调、失败回调获取列定义 getDataColumns 获得列名称、列类型
26. 第九讲开发自己的服务开发查询数据的服务获得数据库连接查询数据表，得到Table 将Table写入response 开发保存数据的服务获得用户新增、修改、删除的数据获得数据库连接将新增、修改、删除的数据分别写入数据表
27. 原生插件插件介绍用途：调用设置上的原生API 优点：开发跨平台App 支持自定义插件位置 /Native/plugins目录下插件的使用引用 require("cordova!org.apache.cordova.device") 调用 window.device.uuid; 打包时配置参数
28. 原生插件调用第十讲在App中支付第十一讲在App中获得地理信息
29. 第十讲在App中支付支付宝支付插件 com.justep.cordova.plugin.alipay 方法 navigator.alipay.pay 参数微信支付插件 com.justep.cordova.plugin.weixin.v2 com.justep.cordova.plugin.weixin.v3 方法 navigator.weixin.generatePrepayId navigator.weixin.sendPayReq 参数特别注意：证书、包名、发布模式
30. 第十一讲在App中获得地理信息获得地理信息插件 org.apache.cordova.geolocation com.justep.cordova.plugin.baidulocation 方法 navigator.geolocation.getCurrentPosition 在百度地图上显示使用html文件显示百度地图坐标系转换
31. 第十二讲打包及部署使用模式2的打包部署过程打包——使用模式2 部署——到任意Web应用服务器资源更新——编译UI资源、部署资源使用模式3的打包部署过程打包——使用模式3 部署——使用UIServer，使用Java Web服务器资源更新——修改版本号、模型编译、部署资源必须使用——使用了附件组件或j文件
32. 模式2的发布及更新发布设置App版本号打包发布到Web应用服务器更新仅更新UI资源编译UI资源发布到Web应用服务器更新App及UI资源修改App版本号打包发布到Web应用服务器
33. 模式3的发布及更新发布设置两个版本号打包模型编译、部署资源更新更新UI资源修改资源版本号模型编译、部署资源、重启Tomcat 更新App及UI资源修改App版本号打包修改资源版本号模型编译、部署资源、重启Tomcat
34. 第十三讲微信公众号申请测试账号 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 申请服务号 https://mp.weixin.qq.com/ 配置外卖功能菜单编辑WxMpServiceInstance.java 发送menu重构菜单网页授权获取用户基本信息微信JS接口
35. 微信JS接口设置JS接口安全域名在微信中获得地理信息获取地理位置 getLocation 显示内置地图 openLocation 在微信中支付设置支付授权目录调用方法 chooseWXPay

WeX5开发外卖案例

关键词

相关PPT