达内2016前端开发知识点总结--zepto.js--2天 2048移植安卓

Zepto.js  day01(有手册)

 

一、回顾：

移动端开发：

①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

③加上网络权限