整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
标：实现一个可以安装在手机上运行的，ui效果很好的app （开饭了）。
前端框架汇总：
框架其实就是优秀的代码，帮助封装了工具、类库等,提高开发速度。
jQuery: js的库 简化DOM操作
jQuery UI ： 是一个html组件库，实现PC端应用
bootStrap： 响应式 pc+移动端 偏向于PC端
angularJS： 是一个实现SPA的js的MVC框架，数据操作比较频繁
Ionic：h5的实现移动端应用程序的框架，集成了ng、cordova、ui库、uiRouter
PhoneGap/cordova：通过plugin插件的形式 提供了丰富的js API，实现原生应用程序才能调用的功能（hybridApp）
配对组合：框架之间的定位是否有相同的部分
jQuery+jQueryUI
jQuery+bootStrap
jQuery+ng 不建议
jQuery+Ionic(ng+phoneGap+ui) 不建议
jQueryUI+bootStrap 不建议
jQueryUI+ng
jQueryUI+Ionic 不建议
bootStrap+ng
bootStrap+Ionic 不建议
技术选型
①考虑生态圈
②明确框架的卖点
③根据需求，选择
④技术是否有定位有很多相似的地方，如果是，建议选其中最好的
ionic (css\ion-list$ionicLoading + uiRouter )
目的：实现移动端的app（开饭啦）
技术构成： ionic
('ui库->内容'+
'ng->数据'+
'uiRouter->处理路由'+
'打包：部署在服务器')
①完成脚手架的搭建
②模拟数据 把页面展示出来
③联调，在前端调用后端的接口进行调试（边做边测试）
④部署到生产环境
1、项目的搭建(15:45 - 16:10)
①、创建项目，添加css、js、img、tpl文件夹，添加必须引用的css、js文件，添加自定义的css、js文件以及img图片，并创建完整的引导页面kaifanla.html；
②、编写kaifanla.html文件：
定义模块ng-app=”kaifanla”
引入ionic.css以及自定义的css文件
定义用于替换模板的视图
引入ionic_bundle.js文件，并引入自定义的js文件
③、添加模板文件：添加 start/main/detail/order/myorder页面，每个页面中删掉原有内容，添加一个文字；
④、编写 kaifanla.js 文件
定义各自的控制器
定义路由：为所有模板定义路由，默认跳转到start
⑥、测试：跳转是否正常，是否有错误
2、所有静态页面的编写---》运行通畅，数据静态死数据
①start.html （16:25 - 16:40）
1.1 页面布局
1.2 实现该页面时，将通过js跳转的方法封装在控制器中（所有的代码片段都可以去用）
②main.html 模拟数据
http://ionicons.com/
可以通过ng-include包含页头和页尾
has-header has-footer --> ion-content
③detail.html 详情页
card
(9:45 - 10:10)
④order.html 表单提交页
⑤myOrder.html 个人中心页
通过grid 模拟 table 展示数据
每日一练：
完成所有的静态页面。
3、调用php页面，联调
在进行联合调试时，如果遇到了问题？
①确认请求的api接口是否正确
②请求服务器端时，确保参数的个数和类型服务要求
③服务器端返回的数据是否正确
④经常去看network(response\header)、console
条件：
①工程在c:\xampp\htdocs
②xampp的apache和mySql跑起来
③测试-》 localhost: / (不要直接在webStorm中打开)
要求：通过service创建一个自定义服务$kflHttp，
①在服务中封装一个方法sendRequest(url,func),在这个方法中有两个参数，第一个是要求的地址，第二个参数是请求成功之后要执行的处理函数；
②在sendRequest方法被调用时启动一个‘正在加载数据’的窗口，当成功的请求到服务器端的数据，关闭加载中的窗口。
①main.html
ng-model
-->
初始化模型数据：$scope.inputTxt={kw:''};
$watch : $scope.$watch('inputTxt.kw',function(){})
方向2的数据绑定： ng-model='inputTxt.kw'
尝试： ion-infinite-scroll 上拉加载更多
第一步：要将ionInfiniteScroll放到页面底部
第二步：on-infinite
第三步：$scope.$broadcast('scroll.infiniteScrollComplete');
②detail.html (2:15 - 2:30)
发送： main->a
接受： detail
1、配置detail状态中的url /detail/:id
2、$stateParams
③order.html（14:50 - 15:20）
接收detail传递来的参数:菜品的id
点击下单，将数据一起发给服务器端，根据服务器返回的结果，将表单隐藏显示下单结果
序列化：
$HttpParamSerializerJQLike
④myOrder.html
根据手机号 去查找所有的订单
⑤设置页面
在点击设置的时候，有一个设置页面（显示一个列表：关于--点击显示自定义弹窗，退出登录--点击回到起始页）
自定义弹窗：
①创建一个自定义弹窗
②显示
注册邀请：http://t.cn/RqG1Nja
混合编程：
打开eclipse，将模拟器，新建一个Android应用，通过webView的loadUrl
wv.loadUrl('http://172.163.0.1/ionic_kaifanla/kaifanla.html');
方式1：
将前端工程的全部代码 拷贝到 assets目录
方式2：
将前端代码放在服务器，拿到服务器的url地址（不需要拷贝assets）
①确保前端代码没问题
②将代码部署在服务器
③编写java代码
//创建WebView类型的一个变量
WebView wv=newWebView(getApplicationCotnext());
//允许执行js
wv.getSettings().setJavaScriptEnabled(true);
//载入指定的页面
wv.loadUrl("http://172.173.0.100/chaptor4/webApp/kfl_ionic/kaifanla.html#/settings");
//设置内容视图
setContentView(wv);
添加网络权限：
上午：
迭代
在之前的基础上：start main detail order myOrder
加入购物车。
详情页：立即下单--》添加到购物车
中间多了购物车的标签： 跳转到购物车页面，购物车支持产品数量的编辑。
一、ZeptoJS概述
http://zeptojs.com/
what？是一个接口和JQuery比较类似的js的库，它的目标是实现一个10k以内的通用的模块化的js的库
注意事项：ZeptoJS只是实现了JQuery一部分的功能，也有自己的和移动端相关的处理。
where？
针对现代高级浏览器，在手机端用的比较多
why？
①非常轻量
②有着熟悉的api接口（开发者不需要太高的学习成本）
③非常方便的搭配其他库去使用
④核心库的性能比较好，舍弃了低版本的兼容的支持
how？
引入对应的zepto.js文件到工程
在zepto.js中内置：
zepto核心模块；包含许多方法
event通过on()& off()处理事件
ajaxXMLHttpRequest 和 JSONP 实用功能
form序列化 & 提交web表单
ie增加支持桌面的Internet Explorer 10+和Windows Phone 8。
二、ZeptoJS Core Module
2.1 操作数据的基本方法：
each/map/grep/parseJson/isFunction/isPlainObject.....
2.2 常见的选择器
id、标签、父子、后代、
class、属性($('[name=test]'))
2.3 简化DOM操作的方法
增删改查
2.3.1 增
insertAfter insertBefore append appendTo prepend prependTo
2.3.2 改
html()
css()
addClass()
width()
height()
2.3.3 删
remove
removeClass()
2.3.4 查
三、ZeptoJS Detect Module
$.os
{android: true,phone: true ,tablet: false}
$.browser
{chrome:true,version:"56.0.2924.87",webkit:true}
四、ZeptoJS Event Module
on 绑定一个事件处理程序
off 解除绑定的事件处理程序
one 第一次事件触发之后，将自动解除绑定
trigger 通过js的方式触发指定的事件（多数都是自定义事件）
练习：实现一个页面，在该页面中有2个按钮，两个按钮的id分别btn1，btn2；
要求：
①点击btn1，超过5次自动解除绑定
②点击btn2，在第3次，触发自定义的事件，弹窗显示‘自定义事件被触发了’
Zepto.js默认包含5个模块
①zepto核心模块；包含许多方法
②event通过on()& off()处理事件
③ajaxXMLHttpRequest 和 JSONP 实用功能
④form序列化 & 提交web表单
⑤ie增加支持桌面的Internet Explorer 10+和Windows Phone 8。
一、Zepto的常见模块
1、core
$(''),支持常见的选择器
$.each/map/grep/parseJson/camelCames/trim... 和数据操作相关的方法
insertAfter insertBefore append appendTo prepend prenpendTO
html/css/addClass/removeClass/width/height
remove
next/prev/parent/parents/children..
detect
$.os
$.browser
event
on
off
one
trigger
2、ajax模块
$.ajax()
$.get()
$.param() 将一个对象进行表单序列化 （在angularJS时
提供了$httpParamSerializerJQLike(object)）
$.post()
练习：使用post请求，将{name:'zhangsan'}发给服务器端，服务器端接收到数据，返回一个{tip:"Hello zhangSan"}.
通过Zepto中的$.post()来实现要求。
打开apache，请求注意端口号。
3、form模块
serialize
serializeArray
submit
使用基本步骤：需要给表单元素指定name属性。
注意事项：
如果表单元素中有复选、单选框，如果没有选中的，默认在进行表单序列化时，是不会把它添加到字符串或者数组中的。
4、Touch模块
//设置阻止掉默认的滑动效果
document.addEventListener(
'touchmove',
function (event) {
event.preventDefault();
},
{passive:false}
)
Touch模块 给我们提供了两大类事件的支持
①点按类
tap/longtap/doubletap
②滑动类
swipe/swipeLeft/swipeRight/swipeUp/swipeDown
如何使用事件呢？
①绑定对应的事件
element.on('swipe',function(){})
②触发事件
5、动画模块 (fx+fxmethods)
fxmethods:
fadeIn fadeOut fadeTo fadeToggle
show hide toggle
...
fx:
animate()
二、练习Zepto的使用。
1、实现一个网页版的简历
1.1 向服务器端获取数据，将数据显示在列表中。
①获取数据
②找到列表，创建元素，插入到列表
1.2 向服务器端获取数据，将数据显示在列表中。
①获取数据
②找到id为skills的div，创建元素，插入到div
2、将pc端的项目移植到Mobile端。
2048实现混合编程的方式有很多种，phoneGap也是一种的常见的方式，它最大的特点是借助各种各样的插件来实现对于设备底层的调用。
phoneGap与cordova的关系：
最早的时候，phoneGap是一个非常流行的框架，后来被Adobe收购了，PhoneGap依然了自己的商标所有权，将核心的跨平台代码共享给了Adobe，Adobe将核心代码全部开源，形成的新的项目叫做cordova。
cordova是phoneGap的核心代码
混合编程：
①将前端代码拷贝到Android工程的assets
②将前端代码部署在服务器，通过loadUrl载入服务器的url
一、PhoneGap的概述
https://phonegap.com/ phoneGap官网
http://cordova.apache.org/ cordova官网
https://build.phonegap.com/ phoneGap提供的云端打包网址
http://phonegap-plugins.com/ 第三方的基于phoneGap的插件的列表站点
what？是一个针对移动端的，旨在通过编写前端代码来实现开发跨平台应用程序的开发框架
之前通过eclipse创建Android项目，通过混合编程的方式来打包生成安装文件(没有办法通过java来实现很多原生组件的调用，包括设备底层的调用)
*phoneGap提供了各种各样的插件，这些插件给我们提供了js的接口来实现设备低层的调用。
理念：
实现write once,run everywhere.
where？ 低成本的开发跨平台应用程序（Android/iOS/WP）
why?
①免费开源
②标准化 完全遵循w3c标准
③提供了非常方便的云端打包工具，可以直接将前端代码打包生成可以安装在移动端OS的app
④低成本 即使没有学过专业的原生开发技能，也能够基于前端技术以及phoneGap所提供的核心API来实现一个能够调用底层硬件的app
ADB: Android Debug Bridge 安卓调试桥，之前在Android项目点击run as去作为Android应用去运行，背后就是靠ADB将生成的apk结尾的文件传递到模拟器中。
how？
方式1:
借助于phoneGap所建议的方式，通过两个软件，一个安装在pc，一个安装在mobile
①安装pc端的软件 phonegap-desktop
②安装移动端的软件
https://github.com/phonegap/phonegap-app-developer/tree/master/resources/release
adb install **.apk
2.1 windows+R->cmd
2.2
③
方式2：
通过命令行 ：
//全局安装cordova
npm install -g cordova
//创建一个基于cordova 的myApp项目
cordova create MyApp
//进入到MyApp的目录
cd MyApp
//让cordova支持Android开发平台
cordova platform add android
//打包APK的安装包，运行在对应的Android设备
cordova run android
二、PhoneGap支持的事件
deviceready
pause/resume
online/offline
battery***
***button
绑定事件的方式：
document.addEventListener(
'deviceready',
function(){},
false
)
、实现功能
使用谷歌浏览器将网页打包为可以在桌面直接打开的app，可以实现直接打开浏览器指定网页，也可以隐藏菜单栏全屏打开网页应用。
二、适用范围
需要直接在桌面打开的网页应用，但不需要客户端或者硬件交互的场景。
三、操作步骤
1、安装谷歌浏览器
2、打开指定的HTML网页应用
3、浏览器右上角的菜单，依次点击“右上角菜单-更多工具-创建快捷方式-填写应用名称”，此时会在桌面生成应用图标。
4、打开桌面的应用图标，会直接使用谷歌浏览器打开网页。
5、如果需要全屏展示，可在应用图标“右键-属性-目标-增加 ‘-kiosk’ 参数”，打开即可全屏。
6、备注：如果直接创建谷歌浏览器的快捷方式，在“右键-属性-目标-增加 -kiosk和网站url”，也可实现相同效果。
从移动平台崛起以来，HTML5移动应用开发迅速变成了热门话题，开发者们被各种开发HTML5移动应用的方法搞得晕头转向，今天请到了金山云基础架构部研发负责人柴春燕给大家分享如何避免HTML5移动应用最容易踩的那些坑。
柴春燕－－
微软社区精英计划博客组负责人，HTML5研究小组成员，擅长HTML5及移动应用开发；
具有多年Web开发经验，曾参与开发微软Visual Studio 2010中文学习平台，基于SaaS模式的E-Learning系统；
曾负责当当网Web前端开发及移动应用开发，担任百度音乐高级研发工程师；
目前就职于金山云，初期负责金山云前端架构，现任基础架构部研发经理。
01/移动应用中HTML5的新特性
工欲善其事，必先利其器。我比较推崇的学习技术的方式，是先整体了解，然后结合实际需求，再做针对性的学习。整体了解的方式，比较建议是直接看官网的API文档，这里可以推荐几个网站： http://www.w3school.com.cn/html5/index.asp, https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5, http://www.html5rocks.com， http://caniuse.com/
其中，特别说明下http://caniuse.com/，通过这个网站，我们可以非常快速的查询到你所想使用的html5的特性在各个浏览器，包括不同终端的浏览器的兼容性情况。
HTML5 在移动应用开发上面能够利用的特性主要有：
1. form input type
表单是我们在开发中经常会遇到的，如果按照传统的方式，要介入jquery validate或者自己写正则进行判断，但是其实html5的form表单新增的input type属性，能够快速帮我们实现所需要的功能。
2. video & audio
移动浏览器是不支持flash的，在一些微信专题活动中，经常会看到嵌入音频，那么audio标签就是比较适合的应用场景，html5中audio提供的api attr还是比较全面的。
视频格式一般有mp4和webm两种格式，在使用的时候，一般建议同时生成两种，根据浏览器兼容性，进行相应的选择。音频audio，一般会同时制作mp3 ogg格式。
3. storage
关于web storage，大家可以参考我之前分享的一篇内容：
http://www.chaichunyan.com/topics/html5-training/5.html5_storage/#/
重点是localstorage，尤其是我们在做移动应用的性能优化时，localstorage能够发挥很大的作用。
学习的时候，建议大家带着问题去学习，比方说“localstorage最大的存储容量是多少？”“有没有有效期？”“cookie是有域的概念的，那么localstorage呢？”
4. css3
html5其实更多的是一个web标准，这个标准里边，包含了html、JavaScript api、css。css3是我们在移动应用中要重点学习和掌握的。
1.选择器
2.自定义字体
3.多栏布局
4.文字,容器阴影
5.圆角
6.渐变效果
7.动画 ...
大家可以通过下面一个例子有一个直观的印象：
http://www.chaichunyan.com/topics/html5-training/7.css3_summary/demos/index.html
之前很多我们需要通过js或者切图实现的效果，在移动端，就可以直接通过css3实现。
这里特别强调下关于布局，css3弹性布局，希望大家能够仔细去了解，我在面试时候，必问的一道题，当然，面试只是手段，更重要的是希望能够学以致用，真正在实际工作中发挥作用。
flexbox布局的兼容性，弹性盒模型实现的原理，这些我们在做移动终端调试时候，如果只是靠反复试错，那么效率是非常低的。
了解了html5的特性，开发者就会在移动应用上一展身手了。
02/HTML5移动应用中踩过的那些坑
1.布局
移动浏览器访问的web站点，后面称为mobile webapp哈（泛指移动终端浏览器访问的web站点），能不能使用传统的流式布局？答案是可以，但是要慎用。
mobile webapp对css3的弹性布局支持还是比较给力的，iOS Safari还好，但是Android的碎片化非常严重，尤其是Android上面各种第三方浏览器会做各种各样的定制化，使用flexbox比float能够减少你在布局调试上的时间，而且兼容性有保证。
2.图片适配
这里边要提供一个概念，是屏幕分辨率和物理分辨率，为什么我们使用ios看到的图片清晰度那么高，原因是普通的手机屏幕，一点显示一个像素，但是iphone4s 以后是一个点四个像素。
那按照320的设计稿切出来的图片，在iphone上面显示肯定是有锯齿的。
处理方法可以参见我之前分享的一篇文章：图片的适配与清晰度
http://blog.csdn.net/spring21st/article/details/7513906
3.字体
我把字体的处理分为两类，一种是艺术字体、icon，另一种是我们在页面中的字体。
移动终端对网络的要求是比较高的，我们要尽可能减少网络请求，图片是非常大的网络开销，当然，我们可以用合并图片的方式减少请求数，但是请求量变大了。
css3支持web fonts，所以，我们可以引入字体文件，而不是所有的字体都是通过切图的方式来实现。对于icon，一种方式是base64处理，但是现在更常见的做法，是转换成矢量字体。
这里推荐一个网站：font awesome http://fortawesome.github.io/Font-Awesome/icon/css3/
这里边涵盖了大部分我们会用到的图标，当然，公司有精力和人力的情况下，建议可以维护自己的矢量字体库。
4.横竖屏
我们可以通过css 的media query 判断横竖屏。
但是这种只能控制样式展现，当我们需要监听横竖屏变化的时候，就只能通过js监听window.onorientationchange事件的方式实现。
但是，下面这种情况会让你很无语：
那我们推荐下面这种实现方案：
相比较pc web，mobile webapp的调试更复杂，而且未知的问题更多，遇到问题，我们要有耐心去跟踪定位，就像之前我们遇到iscroll性能问题、fast-click穿透的问题，都是一点一点排查处理的。
03/混合应用（Hybrid）的注意事项
现在“快速迭代，敏捷开发，低成本上线“基本上是每家公司都追求的目标，混合应用就是在这种场景下应运而生。
Hybrid App优点众多，Web前端工程师0成本介入，不依赖版本的实时更新，快速实现跨平台需求，等等。但是，我对混合的看法是，根据实际情况合理使用，因地制宜。
那么什么样的场景适合混合应用开发？
1. 快速原型，验证产品功能。我们之前开发过一个app，Android和iOS提供宿主环境，webview展现内容都是通过html5实现的，半个月就开发上线了，较之传统应用开发人员成本和时间成本都缩短很多。
2. 内容类的应用，比如csdn的app，就是采用hbuilder混合方案实现的，对性能要求没有那么高。
在考虑hybird的时候，要避免以下几个误区：
（1）为了HTML 5而Hybrid App
html5只是技术实现手段而已，要根据公司的实际业务场景，以及人员配比，综合考虑，不能因为react native比较火，就必须要在公司推行这种实现方案，我觉得为技术而技术是不可取的。
（2）忽略移动应用中的关键因素
mobile webapp本质上还是基于PC的一种开发模式，开发者使用PC浏览器模拟App中的webview进行调试。PC浏览器与手机webview的区别是巨大的，包括能支配的CPU资源，最大占有的内存，运行的网络环境，click和touch事件的区别，浏览器对CSS/JS的解析和对事件处理等等。
app工程师考虑比较多的内存的问题，这些在web开发时候是很少考虑的。另外，就是网络环境方面，虽然现在3g、4g覆盖率越来越高，但是移动终端的访问和pc还是有很大差距，wifi和蜂窝网络的切换，基站变化等诸多因素都会导致网络间歇性断开，web开发对于这种不稳定网络环境问题的处理上都有所欠缺。
（3）交互体验一致性
ios和Android的交互设计是两套规范，虽然有相似的地方，但是从操作习惯上，就已经决定了，我们想用一套交互设计，适配两个平台是很难的，包括包括视觉风格，界面切换，操作习惯等。
Hybrid App方案是一把双刃剑，一方面它平衡了Native App和Web页面的优缺点，一定程度上解决了Native App开发过程中迭代慢，版本依赖，Native开发资源不足的问题，但另一个方面过度依赖Hybrid方案会造成Web前端开发成本快速上升，甚至造成App整体体验下降，甚至造成功能缺失。
回到最开始那句话”不要为了Hybrid而Hybrid“，根据实际场景，控制好方案中native和web的边界。
04/Q&A
Q1：关于响应式开发中对于手机屏幕高度的解决有没有什么好的解决方案？
响应式开发本质上是移动设计优先的一种开发方式，我没太明白对于手机屏幕高度的解决，具体的问题是什么样的，原则上高度是不需要做处理的，除非是你对首屏有要求。关于响应式开发，可以看看我这篇文章http://www.chaichunyan.com/index.php/2016/03/03/html5-wrd/
Q2:对首屏有要求的情况, 除了判断高度还有没有其他好的解决方案?如果是flex布局可以解决这个问题吗？
问题的根本是获取首屏的高度，（1）如果你是后端渲染的话，可以获取机型和浏览器版本，拿到屏幕分辨率做适配 （2）根据屏幕宽度做适配，但是做不到完全绝对的首屏自适应，如果有更好的方案，我再跟大家分享。
Q3:hybrid开发中，h5页面太多的话，会不会影响ios发布？
之前有ios对phonegap这种跨平台的应用审核是不通过，不过现在放开这个限制了。h5页面过多，会影响应用的性能和体验，建议可以把h5打包放到ipk里边，但是要做好静态资源的版本管理。
Q4：css3 弹性布局中， 由于android碎片化严重的问题， 能不能有好的案例指导？ 我们要求支持到android4以上版本。
真的要善用文档和工具, http://caniuse.com/#search=flex, 我分享时候提到的这个网站，明确说明了flex兼容性。
如果是Android4.4以上机型，基本上可以放心使用，注意的地方有两个：1. 要记得写各个浏览器的css前缀 2. flex里边可以嵌套flex.
Q5：hybird开发过程中， 原生代码登录权限问题，h5部分的页面，如何共享登录相关信息？
这要看你实现的方案，（1）嵌套静态的h5页面，那么需要native打开webview的时候，使用js briage调用页面js的方法，写入用户信息，实现登录共享 （2）如果打开的是动态渲染的页面（如php输出的页面），那么可以在请求的url中携带用户token，php通过query string判断验证，这个是native和webview数据交互的问题。
Q6：h5动画在部分安卓webview中有时候会出现卡顿,这种情况改怎么优化呢?
1. 可以做简单的测试，看看浏览器支持的情况，如果浏览器支持不够好，那么可能要做降级处理。
2. 减少动画效果，因为动画是要使用gpu渲染的，原生app能够流畅，很大程度上是直接调用硬件处理的。
优化的方案我这边基本上是降级处理，Android低版本不支持的话，就使用基本动画，比方不会使用3D翻转。因为h5毕竟受限于webview环境，像jquery 和 zepto都提供对机型和浏览器的判断。
Q7：在移动端浏览器上能支持h5离线存储的性能吗？
No problem.我们在实际项目中，优化前端性能，曾经用localstorage做静态资源的版本管理和存储。
更多技术干货关注公众号“极牛”。
*请认真填写需求信息，我们会在24小时内与您取得联系。
