- 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