一、回顾:
移动端开发:
①3种趋势 webApp、NativeApp、HybridApp
②Eclipse开发工具 新建Android的工程,通过webView组件,加载一个部署在服务器端的url或者file:///android_asset/index.html
③phoneGap是一个提供jsAPI的平台(框架),允许开发者通过编写js调用设备底层的软件、硬件信息,实现只有原生应用才能实现的功能. 借助phoneGap所提供的核心API(加速度传感器、罗盘、地理位置、摄像头。。。)
④Ionic是一个集成了ng、cordova、ui库、uiRouter
的框架,使用ng来去处理我们的数据,如果数据操作比较频繁的时候,提高开发速度;使用cordova所提供的plugin中支持的jsAPI实现原生应用才能调用的借口;使用配套的移动端的ui库,给用户提供原生的ui的体验;使用uiRouter(增强版的ngRoute)来实现更复杂的代码片段的管理。
⑤开饭啦项目:项目框架的搭建、借助ionic的组件实现静态页面、通过ng去实现数据的获取和展示、将web代码打包成可以安装在手机中的移动端的应用程序(1、借助Android系统下的WebView进行打包
2、
①将开饭啦项目中的代码拷贝到template.zip-->www目录 ,②kaifanla.html->index.html,
③path(http://172.163.100.78/****/www/)+"data/dish_getbypage.php"
④要想调用核心API,必须<script src='cordova.js'></script>
⑤设置头像:创建代码片段、配置状态、创建控制器,navigator.camera.***(func,func,{})
)
$scope.changPhoto = function () {
navigator.camera.getPicture(
function (url) {
$scope.imgUrl = url;
$scope.$apply();//手工更新视图
},
function () {
console.log('选择失败');
},
{sourceType:Camera.PictureSourceType.PHOTOLIBRARY}
)
}
二、ZeptoJS
2天的时间
第一天 :学习Zepto提供的核心API、Event。。
第二天:Zepto与表单、移动端事件,2048
1、介绍
what? 是一个轻量级的针对现代浏览器的js库
why? ①门槛比较低 ②轻量 ③性能优越
when? 功能简单的移动端的app
不支持ie10以下的浏览器,支持现代浏览器
zeptojs.com
http://github.e-sites.nl/zeptobuilder/
自定义构建的模块:
①到zeptoBuilder网站 ②选中需要的模块 ③generate custom build④save to disk
2、核心模块
①数据操作
map\each\grep\extend\parseJSON\trim\is**
②查找元素
属性、后代、id。。
③插入、删除、改
插入:insertAfter/Before append appendTo prpend prenpendTo
修改:html/css/attr/addClass
删除:remove/removeAttr/removeClass..
查找:兄弟元素
3、 event 事件模块
事件的绑定和解绑:on/off/one/trigger
练习:
新建一个文件,
视图:button,给按钮绑定事件,自增操作,当数据超过10的时候,解除事件的绑定,同时再one方法绑定一个事件,提示‘ in one function’
4、touch模块(结合gesture、detect一起来使用)
需要自己构建js文件,去包含对应的touch模块。
移动端和触控相关的:
tap/longTap/doubleTap
swipe/swipeLeft/swipeRight/swipeUp/swipeDown
如果无法实现检测swipe事件,设置阻止浏览器默认的行为:
document.addEventListener('touchmove',function(event){
event.preventDefault();
},false)
5、detect 获取设备os、browser相关信息
$.os
$.browser
6、Ajax 发起异步请求
$.ajax $.get $.post load
练习:
分别调用$.ajax和$.post发起post请求,参数name='web1609'
demo.php 接收参数,返回 hello Web1609,客户端接收到服务器返回的结果打印出来
启动apache服务,工程放在htdocs目录中。
7、form
serialize 序列化&字符串
serializeArray 序列化成一个对象数组(对象包含name、value)
submit 指定提交时的处理函数
8、fx以及fxmethod(动画模块)
animate/show/hide/fade*
Zepto.js day02
目标:2048游戏 -》 移植到手机上应用
步骤1:加入zepto中的touch模块,能够检测到上下左右的滑动
关键词:swipeUp swipeDown swipeLeft swipeRight
结果:通过上下左右的滑动 能够打印出往左右滑动
注意:$符号的冲突 通过chrome内置的手机模拟效果去调试
Zepto('#grid_panel').on
步骤2:调整grid、cell的宽高适应当前屏幕
分析:计算当前视窗的宽和高,同时计算每一个grid和cell的宽高、距离上边左边的margin;同时通过zepto来设置css
①拿到实际的宽和高 width height
②计算grid/cell宽度、高度
cell之间base-margin-left base-margin-top 约定为cell本身宽度、高度的1/4 -->
cell-width : 5*1/4*(cell-width)+4*(cell-width) = width
-》(cell-width)*(21/4)=width
cell-height : 5*1/4*(cell-height)+4*(cell-height) = height
base-marign-left: (1/4)*cell-width
base-marign-top: (1/4)*cell-height
③ 将得到*width *height 应用到元素。
1、将之前写死的数据 删除掉--》 zepto找到元素 css方法去设置
2、设置gridPanel宽高
3、设置grid、cell宽高
4、同时设置id=g00 01...g30 .. g33 top/left
id=c00 c01...c30 .. c33 top/left
步骤3:
①部署在新浪云
分析:创建sae应用,将代码和对应的zepto通过代码管理进行上传
②(apache服务,把工程htdoc,localhost)
步骤4:创建基于webview的混合应用,生成移动端的app
①eclipse 新建android工程
②直接在java文件中,使用webView 载入指定的网页 setContentView 允许执行js
③加上网络权限