jquerymobile移动开发应用.pptx

jQueryMobile移动开发

学习目标123456认识移动Web应用开发用jQueryMobile创建移动应用jQueryMobileUI组件、触摸事件、页面事件用工具快速构建、部署代码用PhoneGap生成Android端应用用PhoneGap调用原生系统组件

认识移动Web应用开发三个优点

1.上手迅速并支持快速迭代

2.?避免麻烦的应用商店审批过程以及调试、构建带来的痛苦

3.?支持跨平台和跨设备开发html5

三个缺点

1.比原生程序运行慢

2.?界面在不同平台浏览器效果略微不同

3.?功能不完善常见移动开发框架(支持html5)jQueryMobile(基于jQuery)html驱动Senchatouch(基于ExtJs)js驱动jQTouch(基于jQuery)Bootstrap(Twitter推出)

在assets资产目录下创建index.html文件在主界面的layout布局中添加WebView控件执行WebView.loadUrl(url)方法加载html文件 注意加载路径:file:///android_asset/index.html Android中创建加载简单的html界面

jQueryMobile简介用于创建移动Web应用的前端开发框架。jQueryMobile是jQuery针对手机和平板设备的版本。包含jQuery核心库和专门针对主流移动平台设计的完整统一的jQuery移动UI框架。jQueryMobile本身也是对JavaScript的封装，属于jQuery的一个插件jQueryMobile的功能是开发html5界面内容，这些界面效果和NativeApp（本地应用）很相似。可以使用PhoneGap将这些内容打包成不同平台的WebApp部署在移动设备上。官网地址：用jQueryMobile创建移动应用

jQueryMobile案例演示用jQueryMobile创建移动应用

开发准备流程1.文档声明设置为HTML52.在Header标签中添加 metaname=viewportcontent=width=device-width,initial-scale=13.新建html文件，引入一个css、两个js linkrel=stylesheethref=css/jquery.mobile-1.4.5.min.css/ scriptsrc=js/jquery-1.4.5.min.js/script scriptsrc=js/jquery.mobile-1.4.5.min.js/script4.在body中添加divdata-role=page divdata-role=header标题/div divdata-role=content内容/div divdata-role=footer页脚/div/divJQM创建具有移动风格的html5界面

安装jdk6及以上，配置环境变量配置AndroidSDK环境变量安装apache-ant：配环境下载phonegap1.直接下载zip安装phonegap2.在线安装phonegap下载安装nodejs：安装Git(在线安装phoneGap时使用)执行命令npminstall-gphonegap@latest用jQueryMobile创建移动应用

data-theme=b主题风格data-role属性,角色data-position属性,位置data-rel属性,类型data-transition属性,动画类型JQM界面跳转及对话框

Button按钮Checkbox、Radio多选单选Collapsible可收缩选项Grid栅格布局ListView列表布局NavbarPopupSelectMenuJQM的UI配置

jQueryMobile针对移动端浏览器的事件:触摸事件：用户触摸屏幕时触发滑动事件：用户在屏幕上滑动时触发定位事件：移动设备水平或垂直翻转时触发页面事件：页面创建、加载、显示、隐藏等时刻触发pageinittap,tapholdswipe,swipeleft,swiperightscrollstart,scrollstoporientationchangejQueryMobile的页面事件,触摸事件

系统事件设备信息系统通知加速度传感器系统联系人操作使用PhoneGap调用系统组件