20131016 移动App开发

如何解决盒子边框溢出
指定块级元素时，并且定义边框，设置宽度为100 ％。 开发过程中通常会对文本框定义为宽度100％，定 义为块级元素以实现全屏自适应的样式，但此时 你会发现，该元素的边框(左右)各1个像素会溢了 文档，导致出现横向滚动条，为解决这一问题， 我们可以为其添加一个特殊的样式-webkit-boxsizing:border-box;用来指定该盒子的大小包括 边框的宽度。
使用cache manifest功能还能减少网络连接的请 求次数。对于动态数据的缓存处理则需要使用 JS刷回缓存的数据，而不是cache manifest。
meta标签
<meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;” name=”viewport” /> <meta content=”telephone=no” name=”format-detection” /> meta标签表示：告诉设备忽略将页面中的数字识别为电话号码 <meta content="email=no" name="format-detection"/> meta标签表示：去除Android平台中对邮箱地址的识别。
webkit为display属性提供了一个webkit-box的值，它 可以做到盒子模型灵活控制。 1.容器的排列 父容器的display属性设置为box或者inlinebox
2.水平、垂直分布 box-orient属性指定容器的分布轴
(vertical;horizontal)
ຫໍສະໝຸດ Baidu
3.反序排列box-direction改变容器的显示顺序 4.……
本地存储
c)executeSql执行SQL
transaction.executeSql(sql, [], dataHandler, errorHandler);
第二个参数：SQL语句中所有要使用到的参数的数组，SQL 语句中药使用到的参数先用“？”代替，然后依次将这些参
数组成数组放在第二个参数中
本地存储
Web App、Hybrid App、Native APP
Web App(网页应用) 开发成本 维护更新 低 简单 Hybrid App(混合应用) 中 简单 Native App(原生应用) 高 复杂
体验
store或marke 认可 安装
差
不认可 不需要
优
认可 需要
优
认可 需要
跨平台
优
优
差
HTML5、CSS、JS
viewport 属性
initial-scale 0 to 10.0 初始缩放比例 默认1.0
minimum-scale 缩放最小比例 0 to 10.0 默认0.25 maximum-scale 缩放最大比例 0 to 10.0 默认5.0 user-scalable no，yes 是否可手动缩放
HTML5标签的使用
HTML5可以实现一些HTML4中无法实现的丰富的 WEB应用程序的体验，可以减少开发者很多的工 作量。
eg:section标签(块内容或文章区域) nav标签(导航条或选项卡)
利用CSS3边框背景属性
按钮有圆角效果，有内发光效果还有高光效果， 这样的按钮使用CSS3写是无法写出来的，当然圆 角可以使用CSS3来写，但高光和内发光却无法使 用CSS3编写，这个时候你不妨使用-webkitborder-image来定义这个按钮的样式。-webkitborder-image就个很复杂的样式属性。
自适应布局模式
在编写CSS时，不建议宽度定死。 为达到适配各种设备，使用自适应布局模式（支付 宝采用了自适应布局模式）。 页面在ipad、itouch、ipod、iphone、android、 web safarik、chrome都能够正常的显示，无需再 次考虑设备的分辨率。
学会使用webkit-box
性能注意点介绍 1.将for循环条件语句中的.length属性存入一个局部变 量 2.用className属性取代其他style属性 3.避免使text-shadow和box-shadow(降低性能) 4.避免使用opacity（干扰硬件加速的渲染） 5.要用translate3d不用translate（后者没有硬件加速） 6.在HTML中，将inline的 JS代码转化为独立的JS文 件 7.由于脚本的阻塞特性，将JavaScript脚本放在文件 的最底端以及成组加载
本地存储
b)transaction方法 执行事务处理，可以防治在对数据库进行访问及执行 有关操作时受到外界的打扰，阻止别的用户访问数据库 的目的。 db.transaction(function(tx){ tx.executeSql(sql); }); //一个回调函数为参数，在这个函数中执行数据的语句
第三个参数：执行SQL语句成功时调用的回调函数
fucntion dataHandler(transcaction,result){
//执行SQL语句成功时处理. }
result执行语句后返回的结果数据集对象
第四个参数：执行SQL语句出错时调用的回调函数 fucntion errorHandler(transcaction,errmsg){ //执行SQL语句出错时处理. } errmsg执行发生错误时的错误信息文字
HTML5开发移动App
HTML5+CSS3+JS
流程安排
1 2 3 4
Web技术的发展 移动App分类 HTML5+CSS+JS开发
WebApp开发技巧
Web技术的发展
1993 1995 1996
1999 2005 2008
移动App分类
基于浏览器运行 操作系统运行 Web App
Native App
HTML5主要新功能
绘画Canvas、SVG 视频video、音频audio 地理信息 Web存储 应用缓存 ……
本地存储
1.Web Storage
对HTML4中cookies存储机制的一个改善
webstorage分两种sessionStorage和localStorage sessionStorage：将数据保存在session对象中（生 命周期浏览网站，浏览器关闭）。 localStorage：将数据保存在客户端本地的硬件设备 中，即使浏览器关闭，数据仍然存在。 sessionStorage临时保存，localStorage永久保存 localStorage.setItme(key,value);
var value=localStorage.getItem(key);
本地存储
2.本地数据库
HTML内置了一个可以通过SQL语言来访问的数据库。 SQLLite数据库 在客户端本地建立一个数据库，减轻服务器端的负担， 同时加快了访问数据的速度。
使用： a)创建数据库访问对象 var db=window.openDatabase('mydata', '1.0', 'Test DB', 102400); 数据库名，版本号，数据库描述，数据库大小
离线应用
本地缓存 与浏览器缓存的区别 本地缓存为整个Web应用程序服务，而浏览器的网页缓存 只服务于单个网页。任何网页都具有缓存，本地缓存只缓存 指定的网页。 网页缓存不安全、不可靠，本地缓存可靠的。
离线资源缓存 cache manifest
可以将它看作是app的一个缓存。 cache manifest实际上是一个文本文件，上面罗 列了需要在本地缓存的内容。使用该功能，可 以方便地将常用的JS、CSS和图片文件缓存在 设备的内存中。这样，即使设备处于脱机状态， 用户还是能够正常访问应用的界面。
HTML5可更多的认为是HTML5+CSS3+JS的组 合，可以作为一个完善的应用开发语言，完成 移动应用的开发。基于浏览器引擎的环境，实 现移动化（跨平台）。 CSS修饰界面，绚丽的界面不再是本地应用的 专利。 JS为用户提供数据、逻辑和交互的主要方法。 总结：HTML是骨 CSS是皮 JS是肌肉 HTML5 强悍坚固的骨架 CSS3 精致到每个毛孔的皮肤 JavaScript 久经考验的肌肉
Hybrid App
Hybrid App（混合模式移动应用）:同时使用网页 语言与程序语言开发，通过应用商店区分移动操 作系统分发，用户需要安装使用的移动应用。
总体特性更接近Native App，和Web App区别较 大。因为使用了网页语言编码，所以开发成本和 难度比Native App要小很多。 Hybrid App兼具了Native App的所有优势，也兼 具了Web App使用HTML5跨平台开发低成本的优 势
看上去是一个Native App， 但只有一个UI WebView， 里面访问的是一个Web App
Hybrid App
Web App
基于浏览器开发并运行应用程序，是Google在设 计Chrome时提出的概念，它只需要通过HTML、 CSS和JavaScript就可以在任意移动浏览器中执 行。
Web App的优势： 1.开发成本低 2.适配多种移动设备成本 低 3.跨平台和终端 4.迭代更新容易 5.无需安装成本 Web App的劣势： 1.浏览的体验短期内还无法超 越原生应用 2.不支持离线模式（html5将 会解决这个问题） 3.消息推送不够及时 4.调用本地文件系统的能力弱