HTML5 APP应用技术开发教程

HTML5 APP应用技术开发教程

// h5新特性:各种语义化标签、不需要插件的音视频支持、canvas、Geo Location、WebGL、Websocket、本地存储、离线应用、
            Web Worker、FIle API、Drag&Drop、Web Messaging、CSS3新功能
Geo location 接口让web用户可以直接获取到用户设备的经纬度
WebGL 为web浏览器提供了一套3D图像API
websocket实现浏览器与服务器之间的双向通信，当服务端有数据更新时，服务器就可以直接将数据推送到客户端。
web worker 一个JavaScript多线程结局方案，可以将一些大计算量的代码交由web worker运行而不阻塞用户界面
File API 允许浏览器访问本地文件系统
web messaging 是JavaScript开放给浏览器的API，能够让h5页面之间传递消息，甚至跨域。
*****接近原生app体验的MUI框架：mui 流应用 hbuilder打包
websocket介绍：
  传统的请求/相应的http协议模式的web开发通用两种方案：
    1轮询：通过一定的时间间隔以频繁请求的方式向服务器发送请求，来保持客户端和服务端的数据同步
    2.flase
  websocket出现是它俩处理高并发及实时性需求时有瓶颈。websocket是HTML5一种新的协议，它实现了浏览器和服务器的双向通信，更好的
  节省服务器资源和带宽并实现实时通信，建立在TCP之上，通http一样通过TCP来传输数据，但是它与http最大不同在于：
    a>一种双向通信协议，就像socket一样
    b>websocket需要类似TCP的客户端和服务器端通过握手连接，连接成功后才能相互通信
Node.js介绍：Node.js是一个JavaScript运行环境(Runtime)，它实际上是对Google V8引擎进行了封装。V8引擎执行JavaScript的速度
            非常快，性能非常好，而Node.js对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下进行的更好。
            Node.js可方便地搭建响应速度快、易于扩展的网络应用，它使用时间驱动，非阻塞I/O模型而得以轻量和高效，在分布式设备上
            运行数据密集型的实施应用。基于Node.js，也可以让JavaScript运行在服务器上，充当高效的服务器端。http://node.js.org/en/
//对于http协议，无论是通过get方式还是post方式，数据的传递都是明文传递，安全性极差，所以需要https（ssl:依靠证书来验证服务器
    的身份，并为浏览器和服务器之间的通信加密。）
    HTML5新标准中提供了一个FormData对象，可以轻松模拟表单对象中的数据。（避免了get和post方法中字符串拼接容易出现错误）
    栗子：表单提交(向服务器端提交FormData数据)
            var url=‘http://www.meishihui68.com.cn/FormAjax.ashx’;
            var xhr=new XMLHttpRequest();
            var oform=document.getElementById('myform');
            document.getElementById('btnPost').addEventListener('click',
                function(){
                    xhr.open('post',url,true);
                    xhr.onreadystatechange=function(){
                        if(xhr.readyState==4){
                            if(xhr.status==200){
                                alert(xhr.responseText);
                            }
                        }
                    }
                    var formdata = new FormData(oform);//使用form对象
                    xhr.send(formdata);
                }
            )
本地存储：1.localStorage和sessionStorage 
        setItem(key,value); getItem(key); clear(); removeItem(key); key(n)检索第n个键的值
        HTML5手机APP中主要使用localStorage，在web app或网页中视情况也可用sessionStorage
       2. web SQL数据库（并不是所有浏览器都支持它）：if(window.openDatabase){//支持，可以处理数据库代码} w3c2011年声明不在维护
        3.IndexedDB数据库：一种轻量级的NoSQL数据库。不需要固定的表结构，在大数据存取上具备关系数据库无法比拟的性能优势。
                if(window.IndexedDB){//支持，作数据操作}
5+runtime 事件监听false true？？？
         Native.js（NJS）是一种将手机操作系统的原生对象转义，映射为JS对象，在JS里编写原生代码的技术。http://ask.dcloud.net.cn/article/114
         它的运行环境集成在HTML5+ Runtime里，使用hbuilder打包的APP或流应用都可以直接使用Native.js 
MUI框架：
        1.固定栏（class属性带有‘mui-bar’属性的HTML元素节点）靠前，常见组件（顶部导航栏-mui-bar-nav,底部工具条-mui-bar-footer，
          底部选项卡-mui-bar-tab)一定要放在class属性包含mui-content的HTML元素之前。建议除固定栏之外的所有内容，全部放在class
          属性为‘mui-content’的容器中。
          mui.init()中会自动初始化基本各表单输入组件，但是动态添加的元素需要重新进行初始化，例如mui(‘.mui-input-row input’).input()
vw vh vm CSS长度单位：vw  相对于视口的宽度。视口被均分为100单位的vw(即浏览器可视区) 100vw = 可视区宽度
                     vh  相对于视口的高度。视口被均分为100单位的vh(即浏览器可视区) 100vh  = 可视区高度
                     vmin/vm 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin（即vm）