英特尔的 App Framework 是一个开源的、MIT 许可的跨平台 HTML5 框架,用于构建移动应用程序。它托管在 GitHub 上,您可以在其中为该项目做出贡献,尤其是 Firefox OS 主题。
App Framework 由三个主要区域组成。
- 查询选择器库
- UI/UX 库
- 插件
查询选择器库实现了一个 jQuery* API 的子集,并为移动开发添加了额外的 API。UI/UX 库在各种设备上提供了顶级的性能,包括针对手机和平板电脑的响应式设计。插件是 App Framework UI 的核心,允许开发人员为 App Framework 应用程序编写和共享代码。
Firefox OS 支持
随着 App Framework 2.1 的发布,Firefox OS 现在正式得到支持。这很容易实现,因为 Firefox 支持许多 CSS 功能(如 CSS 变换)的供应商中立前缀。我们将在不久的将来添加一个官方的 Firefox OS 主题。
获取代码
要查看框架中提供的所有内容,请查看 App Framework 网站。您可以在其中找到 快速入门指南、API 文档 和 UI 组件 预览。您可以在 GitHub 上克隆源代码。
从 GitHub 下载 zip 文件并解压缩。查看 index.html 文件,以查看厨房水槽和示例 API 的示例。您可以试用 App Framework UI 并查看提供的插件的演示。
构建您的第一个应用程序
在这里,我们将使用 App Framework UI 构建一个简单的“Hello World”应用程序。创建一个新文件夹,并将以下文件从厨房水槽复制到您的项目中
- build/ui/appframework.ui.min.js
- build/css/af.ui.base.css
- build/css/icons.css
接下来,创建一个 index.html 文件、manifest.webapp 和 app.js。您可以在 MDN 上找到 manifest.webapp 的文档。请参阅以下有关此项目的文件夹结构。
__folder__
index.html
manifest.webapp
js
appframework.ui.min.js
app.js
css
af.ui.base.css
icons.min.css
在您喜欢的编辑器中打开 index.html 文件,并将以下代码复制到基本“Hello World”应用程序中
FF OS sample
Hello World
测试
现在,您可以在 Firefox OS 模拟器或设备上测试您的示例应用程序。您应该看到标题为“Firefox OS”的标题,内容区域中的“Hello World”,以及底部带有单个图标的页脚。由于我们没有添加任何其他面板,因此您无法做太多操作。让我们更新我们的代码并添加更多内容。在编辑器中打开 index.html 并将其更改为以下内容。
FF OS sample
查看新代码
再次在模拟器或设备上运行更新后的代码。您将在底部选项卡栏中看到两个项目,以及指向“页面 2”的链接。导航到“页面 2”,您将看到向上滑动的过渡以及一个样式化的列表。您可以使用内置的 JavaScript 滚动器滚动列表。点击顶部的后退按钮以返回历史堆栈。
接下来做什么?
获取一个 入门模板 并开始构建您的应用程序!请查看 App Framework 网站以获取更多文档和提示。
我们正在开发 Firefox OS 主题,您可以 查看我们的工作成果。我们欢迎反馈,并很乐意修复发现的任何错误。只需前往 GitHub 并 报告问题。如果您想进一步扩展您的应用程序,请构建插件并与其他开发人员共享。
屏幕截图
以下是 Intel® XDK 应用程序预览应用程序(由 App Framework 提供支持)的一些屏幕截图。这是一个跨平台应用程序,可以在手机和平板电脑上运行。
*其他名称和品牌可能是其他人的财产。
关于 Ian Maffett
Ian Maffett 是英特尔的一名软件工程师,负责 Intel® XDK 产品。他是 App Framework 的创建者,App Framework 是一款高性能移动 HTML5 框架,用于构建跨平台应用程序。他的主要关注点是移动设备上的 HTML5 性能和 UX。
8 条评论