html5案例分析:开发设计web app的全过程

2021-02-14 02:26| 发布者: | 查看: |

html5带来大家的不但仅是大量词义丰富多彩的标识,也有大量更厉害的特点,例如 线下储存 。 针对台式一体机电脑上来讲,或是它并沒有产生甚么欣喜,可是针对移动终端来讲线下储存真是便是一个神迹。针对一切有着适用线下储存访问器的移动终端,例如iphone,ipod touch,线下储存促使web前端开发工程项目师能够非常容易的对于他们开发设计运用程序。

前边吹捧了一段,但是说确实的,html5当地储存就现阶段来讲還是很受到限制的。其一,访问器限定,现阶段仅有 Safari 3.1 and later, and in iPhone OS 2.0 and later. 出示了javascript database 原生态适用,但是也是有 Taffy DB 能够曲线图救国。(还没有有效过,害怕妄下结果。)。 其二,网络服务器端必须改动配备,旦假如是自身的网络服务器就非常简单了。

下边就以一个简易的offline web app-note book 为例子,纪录一下为iphone/ipod touch开发设计web app的全过程。并不是工作经验,仅仅初探。

创建合适 iphone/ipod touch 的UI 数据信息的当地储存 文档的当地储存 健全这一app (不准备健全它了,有时候间做一个好用的app专业详细介绍 iphone web app 的开发设计吧)

最先,合适iphone/ipod touch 的UI 它其实不是文中的关键,有兴趣爱好的同学们能够移步这儿 。这儿只注重一点:你默认设置做的网页页面,放进iphone看能变的窄小,字不大。它是由于iphone用它320px宽的显示屏显示信息了一个默认设置980px宽的网页页面,你的內容被按占比变小了。要处理这一难题非常简单,要是在html的head地区加一个meta标识,实际英语的语法可以看这儿 。 也便是那样:

viewport

这一难题处理以后大家便可以肆无忌惮的应用html5和css3来打造出页面了,(对于机器设备开发设计能够不考虑到适配性,简直尽情淋沥呀。)

我大约干了个丑恶的页面:

app UI

html编码, CSS编码 (实际上你可以以无需看,最终有装包的编码)

进行了UI,大家就必须多数据开展解决了。

在刚开始 数据信息 的当地储存以前,大家先来啦解一下client-side database storage API:

the client-side database storage API allows web applications to store structured data locally using a medium many web developers are already familiar with SQL.--webkit blog

现阶段仅有webkit关键的访问器适用这一特点。你乃至也不能在w3c的html5工作中议案中寻找 (cs-db)client-side database 的详尽叙述。

最先大家要试着创建一数量据库连接:

try { if(!window.openDatabase){ //检验访问器是不是适用cs-db alert('not supported cs-db!'); } else { var shortName = 'noteDB'; var version = '1.0'; var displayName = 'Note book database'; var maxSize = 65536; //建立一数量据库 var db = openDatabase(shortName,version,displayName,maxSize); }} catch(e){ //试着捕捉不正确 if (e == 2){ alert('Invalid database version.'); } else { alert( Unknown error +e+ . }}

假如之上编码无误,你也就会在safair或是chrome的开发设计者专用工具看出到这一数据信息库:

创建的数据库

在右边地区能够立即实行一些sql查寻,可是我一直获得 产生出现意外不正确 0 。 那样的結果,不知道道不是是RP的难题。

接下去便是建立表,及其实行一些sql句子开展删改改查。

js实行sql的基本英语的语法大概是那样的:

db.transaction( function (transaction){ transaction.executeSql(sqlquery,[],dataHandler, errorHandler); });

在其中transaction.executeSql中主要参数先后为:sql查寻标识符串,传送给sql查寻的主要参数,数据信息解决句柄,不正确解决句柄。在其中仅有第一项为首选,其他都为可选择项。

第二个主要参数的使用方法大概是那样的:

transaction.executeSql( UPDATE people set age=? where name=?; ,[ age, name ]);

查寻标识符串中的 ? 会被后边数字能量数组中的自变量先后更换。

留意:之上我用了 大概 这一词,由于沒有官方网的文本文档 (W3C-web database),仅仅从一些其他参考文献及其自身分辨获得,若有不正确还请纠正。

下边大家建立一张用于储存note的表:

db.transaction( function (transaction){ transaction.executeSql( 'CREATE TABLE IF NOT EXISTS notes (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,titel TEXT, note TEXT NOT NULL, date DATE);',errorHandler); });

errorHandler是那样的:

function errorHandler(transaction, error){ alert('Error was: '+ error.message +'(Code:'+ error.code +')'); var fatal_error = true; if(fatal_error){ return true; } return false;}

error.message 是一段不正确叙述,error.code 是不正确编码 (

<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部