html5手机框架-使用 HTML5/CSS3/JS 开发 Android/IOS 应用程序框架

2023-08-21 0 4,780 百度已收录

现在每个人都想成为一名ANDROID / IOS应用程序开发工程师。事实上,Android/IOS应用程序可以用多种语言实现。感谢我们的前端开发工程师,我们已经熟悉HTML5 / CSS / JavaScript Web编程。因此,今天您将认识到一些在后端语言的帮助下开发Android / IOS应用程序的工具。

在文章的最后,还介绍了使用 JAVA、C#、Lua 和 AS3 开发 Android 应用程序的工具。

希望大家找到适合自己的开发工具!祝您在开发Android / IOS应用程序方面一切顺利!

电话差距

PhoneGap是一个开源项目,是跨平台的。有了它,JavaScript工程师可以轻松地使用Web技术(HTML/CSS/JavaScript)来开发移动应用程序(包括Android和Apple)。PhoneGap是“唯一的开源移动框架,支持7个平台”!它支持Android,iOS,Windows Phone 7,WebOS,Symbian和BADA支持Android,iOS,Windows Phone 7。甚至Adobe Dreamweaver 5.5也支持PhoneGap!

煎茶触摸

SenchaTouch是一个免费的JavaScript移动框架,是世界上第一个基于HTML5的移动应用程序框架。它适用于Android,IOS和BlackBerry。

官宣的优势在于:

1. 基于最新的网页标签,如 HTML5/CSS3。整个库只有 80KB 的压缩和 gzip,可以禁用某些组件以使其更小。

2.支持触摸屏风暴。在 TouchStart 和 TouchEnd 等标准风暴的基础上,增加了一组自定义事件数据集成,如点击、滑动、捏合、旋转等。

3. 数据集成。它提供了强大的数据包,通过 Ajax、JSONp、YQL 等方式绑定到组件模板,并写入本地离线存储。

那么SenchaTouch和PhoneGap有什么区别呢?如何选择它们?

您可以选择 SenchaTouch 为智能手机创建用户界面,并选择 PhoneGap 访问 GPS、相机、加速器等平台的应用程序。

jQueryMobile

开发语言:HTML5,CSS3,JavaScript,jQuery

(中文网站).

JQueryMobile是一个Web用户界面移动开发工具。您可以使用它进行基本布局,导航灯。它非常依赖于JQuery。所以熟悉JQuery的同志们可以轻松学会~也是多平台支持:安卓、iOS、黑莓、巴达、Windows Phone7、WebOS、塞班、MeeGo

菱形

菱形支持所有智能手机!!因为它引用了Rails框架,所以它最适合Ruby开发人员。RHOMobile基于MVC架构(ModelViewController)。它目前支持iPhone,BlackBerryhtml5手机框架,Windows,Symbian和Android平台的应用程序创建html5手机框架,并支持最新的Android 4.0和IOS5。Rhomobile基本上将Web和桌面开发中“一次编译,随处运行”的目标带到了联通开发领域。

此外,RhoHub工具可用于在线开发和编译移动应用程序。地址:

钛移动

Titanium Mobile是Appcelerator支持的另一个开发平台项目。它也是“一次编译,到处运行”。有 300 多个 API。支持 HTML5 和 CSS3。据说开发人员可以使用JavaScript来开发Android/IOS应用程序,就像他们可以在Objective-C中开发iPhone和iPad应用程序或在Java中开发Android应用程序一样容易。

其他语言及其工具:

AdobeAIR

AIR是为Web和桌面应用程序的组合而开发的技术,无需浏览器即可控制网络上的云程序。支持的平台:Android Android,BlackBerry BlackBerry,Apple iOS,个人笔记本电脑和电视。

AdobeFlex

有了Flex开发应用程序,程序员就不必担心动漫开发,他们可以完全脱离艺术,纯粹借助技术来改进软件系统。开发人员不需要学习FLASH,他们可以直接编写FLASHRIA程序。支持的平台:IOS,安卓,黑莓,平板电脑系统,传统浏览器应用程序。它使服务器能够集成PHP,JAVA,Ruby,。.NET 和 SAP 终端。

日冕

html5手机框架-使用 HTML5/CSS3/JS 开发 Android/IOS 应用程序框架

科罗纳SDK是创建复杂游戏的强大工具!在官方网站上查看这些引人入胜的游戏!无论如何,我喜欢它!使用 Corona,您只需几行代码即可以低成本创建令人耳目一新的游戏!它有Libaray,它提供了游戏的数学引擎代码。支持的平台是IOS,Android,Kindlefire和Nook。并且有 500 多个 API 套接字可用。但是,每年199把刀,这是负担不起的。

统一3d

Unity3d是一个游戏引擎,允许您创建3D游戏。它是目前智能手机和游戏驱动程序的最佳游戏开发工具。支持的平台:Android,iOS,WebOS,PS3,Xbox360,Wiidevices。

弗利克塞尔

(Github上的代码)。

(使用Flixel创建的游戏,由KX在线使用)。

Flixel是一个用于游戏制作的开源库(事实上,翻译者更喜欢使用术语libaray而不是库)。它完全是用ActionScript 3.0编写的。并免费创建个人或商业应用程序。AdamAtomic,其游戏引擎,结合ActionScript 3.0,可以创建Flash游戏。代码可以从Github下载。

Java编程

最官方和常规的Android编程语言/工具。JAVA是开发ANDROID应用程序最常用和首选的语言之一。Android SDK 包含用于运行应用程序的模拟器。EclipseIDE和ADT(Android Develelopment Tools)可以更轻松地设计用户界面和应用程序的图形草图。它还减少了开发和测试的风暴。如果你是一个Java新手,我建议你看看入门级参考书HeadFirstJava,第2版。

百度地图 API for Android 就是在这种语言/工具的帮助下开发的。%E5%

B9%B3%E5%8F%B0

单声道(这是添加的翻译器)。

Mono是一个开源软件。它包含一个用于 C# 语言的编译器、一个用于 CLR 的运行时和一组泛型,并实现 ADONET 和 ASPNET。使开发人员能够在 Linux 上使用 C# 开发程序。支持的平台:Windows,Linux,FreeBSD,Unix,MacOSX和Solaris。

(2)速度提升:缓存资源加载速度更快

(3)减少对服务器的请求:浏览器只会从服务器下载更新或变化的资源

支持状态:不仅支持IE浏览器,还支持ApplicationCache

开始使用应用程序缓存

涉及角色:服务器和html文件

服务器端要做的事情

管理和维护manifest.appcache文件,检测manifest列表中是否存在无法访问的文件,并及时更新,避免丢失。

清单文件(W3C 建议文件扩展名为 .appcache)

清单文件是一个简单的文本文件,告诉浏览器缓存什么(以及不缓存什么)。

清单文件可以分为三部分:

我们来一一梳理和介绍

1. CACHEMANIFEST(必填)

CACHE MANIFEST
/reset.css
/logo.gif
/hx.js

清单文件列出了三个资源:CSS 文件、GIF 图像和 JavaScript 文件。 当manifest文件加载时,浏览器会从网站根目录下载这三个文件。 此后,每当用户断开与 Internet 的连接时,该资源仍然可用。

注意:文件位置以文件在服务器上的实际目录为准,请确保路径正确。

总结:CACHEMANIFEST列出的资源是需要本地缓存的文件(files to be cached)

2. 网络

NETWORK:
nav.html

NETWORK 小节指出文件“nav.html”永远不会被缓存并且无法离线使用。

NETWORK:
*

星号“*”也可用于指示所有其他资源/文件需要 Internet 连接。

注意:不要将主页的索引加载到NETWORK中,并且严禁缓存,否则会很难使用插件。

总结:NETWORD列出的资源都是每次都需要请求的动态资源文件(没有缓存的文件)

3. 后备

FALLBACK:
/index/ /404.html

FALLBACK部分规定,如果互联网连接无法完善,/index/目录中的所有文件将被替换为“404.html”。

注意:第一个 URI 是资源,第二个是后备。

摘要:如果某个文件难以连接互联网或无法访问,则显示 FALLBACK 列出的资源作为替代。 (友好的备用页面)

html5手机框架-使用 HTML5/CSS3/JS 开发 Android/IOS 应用程序框架

完整的清单文件

CACHE MANIFEST
# Files that need to be cached2014.6.5
/reset.css
/logo.gif
/hx.js
NETWORK:
#Files that do not need caching2014.6.5
nav.html
FALLBACK:
#Files to be replaced2014.6.5
/index/ /404.html

注意:#代表注释行,看似简单的注释行却有很大的好处,为什么这么说呢,因为应用程序的缓存会在其manifest文件被修改时更新。 如果您编辑图像或更改 JavaScript 函数,则不会重新缓存所做的更改。 更新注释行中的日期和版本号、时间戳或 md5 代码是使浏览器重新缓存文件的一种方法。

html需要做的事情

只需导入manifest.appcache文件


ApplicationCache生命周期销毁规则

(1)用户清除浏览器的缓存,此时ApplicationCache的本地缓存就会被破坏。

(2) 当manifest文件改变时,应用程序的缓存会在其manifest文件被修改时更新。 如果你编辑了一张图片,或者改变了一个JavaScript函数,这个改变不会被重新缓存,此时ApplicationCache本地缓存就会被破坏。

(3)由程序更新应用程序缓存

深入研究manifest.appcache文件

首先要提醒的是,千万不要禁止索引主页的缓存,即使加载到NETWORK中也不起作用。 这是规范,是规则,请遵守。

HTTP相关的缓存头和https缓存页面限制会被manifest忽略,因此直到用户代理更新页面后才会过期,也就是说,即使是HTTPS,也可以离线工作。

每个主流浏览器对应用程序缓存都有不同的大小限制,大约为 5MB。

当资源被缓存后,浏览器直接请求绝对路径也会访问缓存中的资源。

缓存包含manifest列表的页面,所以实际上,虽然我们没有显式地将包含manifest的页面列在manifest缓存列表中,但是这个页面也会被缓存。

每次网站更新时,服务器端都必须检测并更新manifest.appcache文件,以防止损失。

虽然站点中的其他页面没有设置manifest属性,但是所请求的资源如果在缓存中的话,也会从缓存中访问。

如果清单文件或里面列出的文件之一无法正常下载,则整个更新过程将失败,浏览器将继续使用旧的缓存。

不过,无需显式列出 ApplicationCache 链接到的页面。 默认情况下,任何包含html元素的manifest属性的页面都会被缓存。 这个手动缓存的页面称为主项目,列表中列出的文件称为详细项目。 如果需要在线访问单个文件,可以创建“白名单”。 与NETWORK下的条目一样,这种文件一般称为网络条目。 每次连接互联网时,每次都必须向服务器请求。

CACHEMANIFEST的第一行是固定格式的,必须写在第一行,而且也必须存在。 NETWORK 和 FALLBACK 是可选的。

FALLBACK 中的资源必须与清单文件具有相同的来源。

引用清单的 html 必须与清单文件同源且位于同一域下。

当manifest文件发生变化时,资源请求本身也会触发更新

注释不仅仅起到不执行的作用,上面已经详细解释过了,它可以是版本号、时间戳或者md5码等。

Manifest文件中的缓存部分是无法转义的,必须自动指定,没有手动工具。

在开发过程中,通过ajax与WCF进行数据交互时,经常会出现第一次或者前几次加载成功,之后加载失败的情况。

由于启用了web离线缓存机制,ajax每次加载数据时,都会从本地缓存文件中读取,采用的是ajax的get方式。 由于get方式缓存,不会重新向服务器请求数据,导致数据加载失败。

html5手机框架-使用 HTML5/CSS3/JS 开发 Android/IOS 应用程序框架

改成ajaxpost方法后,数据永远不会缓存,所以每次刷新网站都会向服务请求数据。

错误:ApplicationCacheError事件:Manifestfetchfailed (404)

解决方案:

清单文件需要配置正确的 MIME 类型,即“text/cache-manifest”。

manifest的contentType=text/cache-manifest,扩展名建议为.appcache

而且必须在Web服务器上配置,不同的服务器配置方式不同。

页面离线,ajax更新。

首先,你可以更改manifest文件来更新这个页面,离线后会作为文章的内容页面存储在本地。 如果您是章节,则会保存本文的内容页面。 如果你使用同一个url访问的话,无论你的文章上的数据是否更新html5缓存,离线页面都不会更新(除非你更新manifest文件)。 因此,你所有的动态数据都必须通过ajax方法来获取。 就像客户端一样,离线页面应该是一个没有数据的空壳,然后用ajax拉取数据来弥补这个空壳。 之后需要注意的是,ajax的请求地址要在manifest的network中提到。

离线页面更新(长尾问题)

网站更新了,如何更新用户本地离线页面?

正如很多文章中提到的,首先将你的文件上线,然后更改页面中引入的cache.manifest文件。 例如,更改评论。 更改后,如果再次访问页面,有更新时会先校准manifest,如果有更新,再次刷新页面时,页面会更新。

长尾问题(尤其重要):

上面提到,如果你的manifest文件更新了,访问页面就需要刷新,更新后的页面才能加载,这样就存在一个问题,如果你的前端数据是jsajax socket的数据发生了变化,你对应的js也变了。 这样,当你更改manifest并上线后,第一次打开页面时,页面就会出现bug。 只需再次滑动页面即可开始。 所以,第一次访问的bug是我们不希望看到的。

但是你无法知道用户什么时候会第二次访问你的页面html5缓存,所以一旦你的页面使用manifest离线了,就像客户端一样,就会出现长尾问题。 幸运的是,manifest有一些js套接字,可以用来判断、加载和更新文件。

cache.status 属性返回当前离线应用程序状态

如果文件超过缓存大小5M,会发生什么情况。

例如,通道A维护自己的ApplicationCache,通道B也维护自己的ApplicationCache。 此时,如果A通道的使用达到峰值,则B通道的所有缓存都会失效。

因此,建议ApplicationCache存储公共资源,而不是业务资源!

从更新机制来看,第一次更新manifest时,由于页面加载已经开始甚至完成,缓存更新尚未完成,浏览器仍然会使用过期资源; 当ApplicationCache更新时,浏览器这次不会使用新的。 该资源只能第二次使用。 此时,window.reload事件是在update事件期间执行的。

window.applicationCache.addEventListener("updateready", function(){
    window.location.reload()
});

从上面的例子我们可以知道,不仅缓存了显示定义文件,比如上面例子中的applicationcache/默认会保存index.html作为映射数据,它还包含了demo.appcache文件,该文件会被缓存。很多情况下都会遇到一次更新线总是不更新。 这个时候,你可以通过在manifest配置文件中做一点改动来更新它。

进行一些代码更改:

=>

如果此时不更新A.appcache,则缓存不会更新,因为index.html被缓存了,而measurement仍然是原来的manifest列表

每个页面统一管理自己的manifest列表,也就是说a页面配置common.js,b页面也配置common.js,也就是说a页面更新后,

如果b页面的manifest没有被修改,b页面仍然读取旧版本的文件。 这是有道理的,但也是一种浪费,需要公共页面进行处理。

以上内容具有一定的参考价值,感兴趣的同学可以参考一下。 希望对您有所帮助。 如果您想详细了解“HTML5应用程序缓存的实现步骤是什么以及它的用途是什么”,可以关注群英网上的其他相关文章。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 html5 html5手机框架-使用 HTML5/CSS3/JS 开发 Android/IOS 应用程序框架 http://www.wkzy.net/game/132261.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务