跨平台移动应用开发与测试实战-群分享版

跨平台移动应用开发与测试实战@施懿民([e-mail])WEAREHIRING!招聘前端开发工程师，请将简历发到邮箱：[e-mail]；推荐成功者可以发放2000元现金奖励！议程DAY1-HTML5开发DAY2-跨平台移动应用开发DAY3-自动化测试DAY4-完整项目手把手实战示例代码git地址:第一天－议程快速起步HTML5API实战HTML5开发框架-jQueryMobile开发HTML5开发框架-Angular.js开发快速起步准备开发环境与跨平台初步体验环境搭建安装nodejs安装npm安装PhoneGap安装Android开发环境安装iOS开发环境安装WindowsPhone开发环境安装学习环境：拷贝VirtualBoxLinux虚拟机创建PHONEGAP应用使用PhoneGap命令行创建phonegapcreateapp名称phonegapcreateapp名称—id“org.myapp.sample”—name“appSample”应用工程文件夹结构解释config.xmlhooksplatformsplugins应用在Android里运行在iOS里运行HTML5API实战HTML5基本语义指定DOCTYPE：!DOCTYPEhtml指定字符编码和语言：metacharset=“UTF-8”/metahttp-equiv=“Content-Type”content=“text/html;charset=UTF-8”/htmllang=“en”一些有用的改进联系人控件：inputtype=“email/url/tel”/时间日期控件：inputtype=“datetime/date/time”/数字控件：inputtype=“number/range”/颜色控件：inputtype=“color”/必填项：inputtype=“xxx”required/占位符：inputtype=“text”placeholder=“xxxx”/验证符：inputtype=“xxx”pattern=“yyyy”/本地存储－LOCALSTORAGE让web程序把信息存储在浏览者的本地计算机上，在需要时获取。key-value的读写方式，与cookie类似，但是可存储的信息比cookie大：cookie:每个域4kb本地存储：每个域5mb分为：localStorage和sessionStoragesessionStorage：在浏览器的多标签页里可以共享，但是关闭浏览器之后就删除了。localStorage：持久存在，浏览器关闭后还能使用，需要显式删除。判断浏览器是否支持localStorage：if(window.localStorage){alert(‘支持’);}可以使用下面的方法来读写本地存储：getItem/setItemwindow.localStorage[“key”]window.localStorage.key本地存储－LOCALSTORAGEAPIAPI说明length返回当前存储在Storage对象中的键值对数量。key(index)返回列表中第n个键的名字。Index从0开始。getItem(key)返回指定键对应的值。setItem(key)存入一个键值对。removeItem(key)删除指定的键值对。clear删除Storage对象中的所有键值对。本地存储使用注意事项当使用DOMStorage进行本地存储时，任何数据格式在Storage对象中都以字符串类型保存。如果保存的数据不是字符串，需要自己进行类型的转换，如将对象保存为json格式。JSON.parse()函数会把JSON对象转换为原来的数据类型。JSON.stringify()函数会把要保存的对象转换成JSON对象保存。可以通过浏览器（chrome/firefox）的Storage工具查看当前域里在本地存储的数据。如果存入的数据太大，有些浏览器如Chrome会抛出QUOTA_EXCEEDED_ERR异常。一般不要在客户端存储敏感的信息，使用localStorage、globalStorage等在客户端存储的信息都非常容易暴露。HTML5WEBSQL最新版本的Chrome、Safari和Opera浏览器都支持WebSQLDatabase。WebSQLDatabase引入了一套使用SQL来操纵客户端数据库的API，使用SQLite中的SQL语法。三个核心方法：openDatabase：使用现有或者新建数据库，并返回数据库对象；transaction：控制事务提交或回滚；executeSql：执行sql语句，包括增删改查操作。不过由于其过于依赖SQLite，因此在2010年底W3C放弃更新相应的规范，但是在大多数手机和浏览器上默认还是打开了对WEBSQL的支持。WEBSQL–打开数据库openDatabase函数用来打开或者新建一个数据库：vardb=openDatabase(‘dbname’,‘1.0’,‘demodatabase’,2*1024,oncreating);第一个参数是数据库名称第二个参数是数据库版本号第三个参数是数据库的显示名称第四个参数是数据库的大小，以字节为单位第五个参数是可选的回调函数，当正在创建数据库时调用此回调函数。WEBSQL–执行查询需要在database.transaction里执行查询操作，包括建表操作：db.transaction(function(transaction){…});transcation函数只接受一个回调函数作为参数，这个回调函数反过来接受db.transcation传过来的事务对象作为参数。在executeSql函数里执行建表、增删改查等SQL语句voidexecuteSql(sqlStatement,arguments,success,error);sqlStatement：要执行的SQL语句；arguments：可选参数，是一个数组类型，用来传入参数化SQL查询的参数；success：可选的执行成功时的回调函数；error：可选得执行失败时的回调函数。数据库查询结果对象，resultSet：insertId：如果插入一行数据，insertId代表这个行号；插入多行数据，insertId插入数据的最后一行行号。rowsAffected：SQL语句执行后改变的行数用这个值表示。rows：代表数据库按顺序返回的行。演示WEB-SQL增删改查示例MEDIA标签–播放音频使用audio标签在HTML页面里播放音频；支持播放：.mp3,.wav,.ogg,.aac,.webm等格式的音频。可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。属性描述autoplay如果出现该属性，则音频在就绪后马上播放。controls如果出现该属性，则向用户显示控件，比如播放按钮。loop如果出现该属性，则每当音频结束时重新开始播放。preload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性。src要播放的音频的URL。MEDIA标签–播放视频使用video标签在HTML页面里播放视频；支持播放：.mp4,.ogg,.webm等格式的视频，但不是所有浏览器都支持所有格式。video元素允许多个source元素。source元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：属性描述autoplay如果出现该属性，则音频在就绪后马上播放。controls如果出现该属性，则向用户显示控件，比如播放按钮。loop如果出现该属性，则每当音频结束时重新开始播放。preload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性。src要播放的视频的URL。width/height视频播放器的宽度和高度。地理位置APIHTML5GeolocationAPI用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。使用getCurrentPosition()方法来获得用户的位置：navigator.geolocation.getCurrentPosition(success,error)使用watchPosition返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的GPS）：varwatchId=navigator.geolocation.watchPosition(success);使用clearWatch来删除监视。WEBWORKERSwebworker是运行在后台的JavaScript，不会影响页面的性能。所有主流浏览器均支持webworker，除了InternetExplorer。由于webworker位于外部文件中，它们无法访问下例JavaScript对象：window对象、document对象和parent对象使用postMessage()方法-它用于向HTML页面传回一段消息。WEBSOCKETWebsocket通常用在实时性要求比较高的Web页面，比如在线游戏、在线证券、设备监控、新闻在线播报、RSS订阅推送等等。在WebSocket规范出来之前，开发人员想实现这些实时的Web应用，不得不采用一些折衷的方案，其中最常用的就是轮询(Polling)和Comet技术，而Comet技术实际上是轮询技术的改进，又可细分为两种实现方式，一种是长轮询机制，一种称为流技术。长轮询：当服务器端没有数据更新的时候，连接会保持一段时间周期直到数据或状态改变或者时间过期，通过这种机制来减少无效的客户端和服务器间的交互。流：流技术方案通常就是在客户端的页面使用一个隐藏的窗口向服务端发出一个长连接的请求。服务器端接到这个请求后作出回应并不断更新连接状态以保证客户端和服务器端的连接不过期。通过这种机制可以将服务器端的信息源源不断地推向客户端。这种机制在用户体验上有一点问题，需要针对不同的浏览器设计不同的方案来改进用户体验，同时这种机制在并发比较大的情况下，对服务器端的资源是一个极大的考验。WebSocket协议本质上是一个基于TCP的协议。和通常的HTTP请求不同，包含了一些附加头信息，其中附加头信息”Upgrade:WebSocket”表明这是一个申请协议升级的HTTP请求WEBSOCKET为了使用WebSocket接口构建Web应用，我们首先需要构建一个实现了WebSocket规范的服务器，服务器端的实现不受平台和开发语言的限制，只需要遵从WebSocket规范即可。KaazingWebSocketGateway—一个Java实现的WebSocketServermod_pywebsocket—一个Python实现的WebSocketServerNetty—一个Java实现的网络框架其中包括了对WebSocket的支持node.js—一个Server端的JavaScript框架提供了对WebSocket的支持varwsServer='ws://localhost:8888/Demo';varwebsocket=newWebSocket(wsServer);websocket.onopen=function(evt){onOpen(evt)};websocket.onclose=function(evt){onClose(evt)};websocket.onmessage=function(evt){onMess