• 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