移动端JavaScript:检测浏览器、移动端试件:touch、gesture、移动端常用的框架和类库以及插件;

HTML5:标签、表单、音视频、新增的API:获取地理位置信息、本地存储、websocket、web、work、canvas;

CSS3:边框圆角、盒子阴影、文本阴影、引入字体、背景渐变、transition、transform、animation;

 

安卓系统(谷歌公司的开源系统)、IOS系统(苹果公司收费)、-webkit内核,不用考虑IE的兼容性了,但是虽然都是webkit内核;但是由于生产厂家等方面的原因;移动端的兼容性不比PC上,而且有很多的兼容性问题的无法解决的;

需要读的书:

  • 图解css3;
  • CSS禅意花园
  • JavaScript框架设计[司徒正美]
  • 了不起的node.js
  • angular.js

HTML5和CSS3需要注意的一些事:

1、用HTML5和CSS3的东西做PC端项目;例如;圆角、css3动画、html5中header等标签的应用;以及我们CSS3新增加的盒子模型;

问题:在IE下或者火狐下如果存在兼容的问题;如何处理?

方法:优雅降级方案-

  • 不管:不影响用户使用和内容观看的,例如圆角;我们通常就做处理 了
  • 管:对于不兼容的另外一种方式实现;例如用js代替我们的css3动画;引入html5,js来解决新增标签不兼容问题;

2、在手机浏览器中打开我们的页面-H5页面;

手机端访问PC端页面;要求在手机端也能正常观看;现在基本上正规的公司都是这样处理的;PC一套项目、移动端一套项目, 、打开页面的时候;首先判断当前是移动端浏览器还是PC浏览器;根据不同的浏览器打开不同的项目页面;

    <script type="text/javascript">
if (/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))) {
//条件成立代表当前是移动端
//window.location.href="xxx.html"
// if (/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
//
// } else if (/iPad/i.test(navigator.userAgent)) {
//
// }
} else {
//当前是pc端浏览器,我们就跳转到pc端页面
}
//var url = window.location.href;//获取当前页面地址栏中的URL地址
//window.location.href = "http://www.baidu.com/";//关闭当前页面,跳转到百度首页
//window.open("http://www.baidu.com/");//当前页面不关闭,在新的窗口打开我们的百度首页
</script>

3、HTML5页面=响应式布局开发,在不同屏幕大小下。展示最优的布局方案(传统CSS的改变,@media媒体适配;)H5的优化技巧,重点是图片资源的优化;

4、hBird模式开发;app中嵌入我们的html5页面;这种模式叫Bird模式;

APP开发(object-c、java)、web app(H5页面)

自己公司的app:公司内部产品

第三方app:微信(开发细节、sdk)、QQ、微博等第三方开放平台;

APP弊端:开发人员开发完成、首先上传到应用商店(IOS、APP、store、有7天的审核期)、用户之前没有安装、用户需要主动安装APP、用户安装了,更新的时候,需要用户自主性更新的;

H5的弊端:H5不能操作手机内部的硬件设备;虽然现在有一些解决的方案。native.js、React、native、phoneGap…..但是实现出来的效果不及APP的1%;H5实现的更能,比如动画,在运行的时候性能不好;h5存在很多兼容问题;比如position:fixed的各种问题

H5是运行在App的web view中的;H5需要和app进行交互的(jsBridge、伪URl协议)

移动端常用的框架

首先总结PC端的,:

  • pc:
    类库:jQuery、React.js、Ext.js、prototype.js
    UI:bootstrap、YahooUI、jQuery UI
  • 自动化合并、压缩、打包、上传、代码检测…平台工具
    基于node.js服务运行的
    grunt、gulp、fis(百度开发的)
  • 模块化开发的
    require.js(AMD)、sea.js(CMD)(阿里开发) ~~common.js
  • 绑定数据(模板引擎)
    kTemplete.js、jade
  • MVC(三层开发)-backbone.js
    MVVM – angular.js 包含模块化开发和绑定数据
  • 常用的工具js
    md5.js 实现加密的
    hightCharts[****提供柱状图,折线图等;]、ECHarts【***K线图,雷达图等】、svg.js、d3.js;实现统计图,报表图;

移动端:
类库:Zepto.js(和jQuery用法基本一样)、swiper.js、touch.js、hammer.js、fastClick.js、iscroll.js(5.0)
UI:animate.css、AmazeUI、jQuery mobile UI、bootstrap3.0

  • 实现一划(一滚)一屏幕的
    one-page scroll.js
    fullpage.js