Total Pageviews

Sunday, 28 August 2016

Lark

Lark is an interactive mobile application framework which developers can use it to create rich and interactive mobile apps with HTML5.

注意：Lark项目现已合并到Egret项目中，游戏和应用开发采用统一的引擎核心，继续关注Lark项目，请移步：egret-core

Lark 是一套由 Egret 团队制作的基于HTML5技术构建跨平台移动Web应用，微站和富媒体广告营销的交互应用框架。
  • 极速渲染 Lark 使用 Canvas 来渲染 UI, 实现了比 DOM 更轻量的显式列表， 开发者不必关心绘制细节。Lark 实现了全自动的脏区域渲染达到比 DOM 更加优秀的性能表现。
  • 快速开发 Lark 可以使用 EXML 来开发应用界面，标签式的语法更加适合 UI 开发， EXML 开发可以做到 UI 与逻辑代码的分离，更利于团队协作和版本迭代。 Lark 内置常用的 UI 组件，简单组合就能实现复杂功能。
  • 硬件访问 Lark 提供丰富的硬件访问扩展，充分发挥 HTML5 能力。 借助 App 打包方案能够获得更加丰富的系统 API （即将到来）。
想要了解更多 Lark 产品细节，请访问 http://www.egret.com/products-lark

Hello Lark

下面是一个简单的 Hello World 示例
<!DOCTYPE HTML>
<html>
<head>
    <title>Hello World</title>
    <script src="libs/lark/lark.js"></script>
    <script src="libs/lark/lark.web.js"></script>
    <script src="libs/swan/swan.js"></script>
</head>
<body>
<div class="lark-player" data-entry-class="Main" style="height:400px"></div>

<script id="exml" type="text/xml">
    <s:Group class="Main" xmlns:s="http://ns.egret.com/swan">
        <s:Label text="Hello World" fontSize="64" fontFamily="Helvetica, Arial" left="150"/>
    </s:Group>
</script>

<script>
    var exml = document.getElementById('exml').textContent;
    EXML.parse(exml);
</script>

</body>
</html>
这个例子会在浏览器中显示一个 "Hello World"。
在这段 HTML 代码中我们引入了 lark 和 swan 的 script 文件。将 EXML 包装在一个 script Tag 中， 通过 JavaScript 取得 EXML 文本。 EXMLParser 根据 EXML 中的 class="Main" 将它解析成一个 JavaScript 类 Main。网页加载完成时，lark 会查找 class="lark-player" 的 HTML 元素， 根据它的属性来创建画布。data-entry-class="Main" 标记了程序执行的入口，Lark会自动实例化 Main 并在画布中显示出来。

安装 Lark

Lark 源代码由 TypeScript 编写，但你也可以使用 JavaScript 来开发 Lark 应用。

JavaScript

JavaScript 开发者可以直接下载 build 目录中预编译的 Lark script 文件，将需要的模块引入到您的 HTML 文件中，即可开发 Lark 应用。

TypeScript

Lark 提供了命令行工具来辅助开发。使用命令行工具可以方便的创建、编译和发布 Lark 项目。

安装前的准备

Lark 命令行工具依赖于 Node.js 和 NPM 环境，未安装 Node.js 的开发者可以到 Node.js 官网 下载安装。 NPM 是 Node.js 的包管理工具，默认配置下会随 Node.js 一起安装。

安装命令行工具

你可以从 github 克隆 Lark 的源代码，或者 下载打包后的源代码。 然后在命令行工具中进入到 Lark 的根目录执行 npm link安装 Lark 命令行工具（ 这里不使用 npm install 命令的原因是使用 install 安装后，每次从 github 更新后都需要重新安装， 而 link 命令会把生成的 lark 命令链接到当前文件夹，更新后不需要再次安装）。
安装完成后执行 lark 能看到 Lark 输出的版本和安装目录信息。

创建项目

进入您的工作目录，执行 lark create HelloWorld, Lark 会创建一个 HelloWorld 目录作为项目的根目录 ( 如果您想要在当前目录创建项目，可以直接执行 lark create )。命令行工具会自动打开一个浏览器窗口，请按照提示 选择项目模板、屏幕尺寸和要使用的扩展模块。
更多命令行使用说明请参考 Lark 命令行工具手册

升级 Lark

当 Lark 发布新版本或您自己修改了 Lark 源代码时，需要在您项目根目录中执行 lark clean， 命令行工具会更新项目中的 Lark 框架为最新版本。
需要注意的是，clean 命令只会用 Lark 根目录中 build 文件夹下的文件，覆盖 libs 目录中的同名文件， 其他第三方库不会被删除，当然也有可能 Lark 本身的扩展库在新版本中被删除，这种情况请手动删除旧版本的扩展库。

更多示例

在 examples 目录中有更多的示例项目。
  • LarkCore : Lark 核心 API 相关示例，包括位图、文本、矢量图绘制、音频视频和设备传感器访问等。
  • UIExamples : Lark GUI 类库示例，包括皮肤、EXML组件、主题等的使用。
每个目录都是标准的 Lark 项目，你可以进入相应的目录，执行 lark run 来查看该项目的运行效果。

路线图

Lark 1.0

Lark 核心显示列表 
Lark GUI类库

Lark 1.5

Lark 硬件访问能力 
Lark App 打包方案 
Wing 可视化编辑支持

Lark 2.0

Lark 动画库 
Lark GUI 矢量库
from https://github.com/egret-labs/Lark
Posted by at
Labels: