跳至主要內容

快速开始

快速开始

这篇教程介绍实际进行 Glyphix 应用开发的基础知识。注意，本教程注重介绍应用开发必要的基础知识，但是并不引导你开发一个简单的 APP。

准备工作

在开始应用开发之前，必须安装 Glyphix 开发工具链。只需下载具体平台的 glyphix.js 工具的压缩包并解压，然后将 bin 目录添加到 PATH 环境变量中。

提示

glyphix.js 是 Glyphix 命令行的开发工具，目前我们只编译 Windows 系统的可执行文件，你也可以使用源码自己编译 Linux 或者 MacOS 版本。

使用命令行工具

一切妥当之后，在终端中输入 gx list template 命令，若得到类似以下输出就表示安装成功：

> gx list template
The following templates have been found:
  simple

接下来创建一个应用项目并模拟运行！只需使用以下命令：

gx new myapp # 创建名为 myapp 的项目，这将创建一个名为 myapp 的目录
cd myapp     # 切换到 myapp 目录
gx build     # 构建项目
gx emu       # 运行模拟器

不出意外，你会看到一个显示 “Hello World!” 的窗口。后面的教程中会进一步讲解 glyphix.js 工具的命令使用方法。

项目结构

你可以使用文件浏览器查看 myapp 目录的结构。在现在的版本中它的结构如下：

<app-name>
├─ README.md         # 项目自述文件
└─ src               # 项目的源代码目录
    ├─ app.js        # app 入口脚本文件
    ├─ manifest.json # 配置应用基本信息
    ├─ assets        # 存放公共资源（字体、图片等）
    │  ├─ fonts      # 存放字体资源
    │  └─ images     # 存放图片资源
    └─ Main          # 存放主页面的目录
        └─ index.ux  # 主页面的界面描述文件

截止到 Glyphix v5.0.0 RC 3，我们还没有确定推荐的 APP 项目结构。你也可以使用符合自己习惯的项目结构，只需要把 app.js 和 manifest.json 放在同一个目录中，并且保证所有的项目源代码位于 manifest.json 所在的文件夹中。在默认的项目模板中，源代码位于 <app-name>/src 目录中，项目中的文档等不需要打包释放的资源可以放在其他目录。

我们推荐为每个页面准备一个目录（并使用页面的名字作为目录的名字），并将这个目录放在源码的根目录下。仅在页面中使用的组件源文件（*.ux 文件）应当放在页面的目录下，而公共文件可以按以下规则存放：

  • 公共的 UX 文件和脚本可以放在 common 目录下
  • 仅在页面中引用的脚本文件直接存放在页面目录下
  • 字体文件存放在 assets/fonts 目录下
  • 图片文件存放在 assets/images 目录下
  • 其他资源可以存放在 assets 目录下的合适位置

项目文件

现在，你已经看到了 myapp 里面有一些文件。请注意后缀为 *.ux 的文件和 manifest.json 文件，这些是开发时最常接触的文件。下面的教程将简单地介绍它们。

manifest.json 文件

manifest.json 文件是 APP 的配置文件，此文件会用于应用打包。这个文件中包含了 APP 的基本信息，包括应用名称、版本信息等，它还包含 APP 内所有页面的描述和路由信息。换言之，要把页面描述添加到 manifest.json 之后才能在代码中跳转到此页面。

这是 gx 命令所生成的模板 APP 的 manifest.json 文件内容：

{
  "package": "com.example.app",
  "name": "Example App",
  "versionName": "1.0.0",
  "versionCode": 1,
  "features": [],
  "router": { // 页面路由信息
    "entry": "main", // 应用的初始页面
    "pages": { // 页面描述信息
      "main": {
        "component": "index"
      }
    }
  }
}

注意

出于教学目的，此 manifest.json 代码片段中有一些注释，但是 JSON 是不支持注释的，请勿在项目的 manifest.json 文件中添加任何注释。

填写 APP 信息

你可以在 manifest.json 中填写你的 APP 信息。

添加页面描述信息

在 manifest.json 文件的根字段中，router 和 pages 字段和页面描述有关。router 字段是 APP 的页面路由表，它至少要有 entry 字段来指定 APP 的入口页面，通常使用 main 页面作为入口页面。

如果你要增加新的页面，就需要在 pages 字段中增加内容。例如，我们要新建一个名为 NewPage 的页面，此页面的入口组件为 NewPage/index.ux，那么现在 pages 字段的内容如下：

"pages": {
  "main": {
    "component": "index"
  },
  "NewPage": { // 这是新添加的页面
    "component": "index"
  }
}

pages 字段是一个 JSON 对象，它的每一个键都是页面的名称，默认情况下也是页面目录的路径。页面名对应的值也是一个对象，它的 component 是页面的入口组件名，这个组件必须存放在页面目录下。component 字段就是页面入口组件的文件名（不包含后缀）。所有的名字都区分大小写。

当你新增或者删除了页面，记得更新 manifest.json 的有关字段。

manifest.json 文件的结构说明详见相关文档。

UX 文件介绍

UX（UI XML）是 Glyphix 的界面描述文件。以最初的模板工程为例，main/index.ux 文件的内容如下：

<template>
  <p>{{text}}</p>
</template>

<style>
  * {
    text-align: center;
  }
</style>

<script>
  export default {
    data: {
      text: "Hello, World!"
    }
  }
</script>

UX 文件实际上是一种 XML 文件，这个 UX 文件有两个根节点：<template>、<style> 和 <script>。其中 <template> 节点中的内容是界面的结构描述，<style> 节点中定义了样式表，而 <script> 节点中的内容是 JavaScript 脚本，它实现这个组件的交互逻辑。

提示

VS Code 不会对 UX 文件进行语法着色，你可以在右下角将语言切换到“HTML”，这样就会有较好的高亮效果。

组件简介

UX 文件在运行时所对应的对象称为组件。组件是 Glyphix JavaScript 应用框架中的重要概念，每一个组件都是一个界面元素，它具有这些特征：

  • 组件有自己的显示效果
  • 有些组件可以响应用户的输入
  • 有些组件可以根据数据和状态显示对应的效果
  • 组件可以嵌入到其他组件中使用

常用的界面元素在 Glyphix JavaScript 应用框架中都是组件，例如：

  • 文本：用于显示文字信息
  • 按钮：按钮也可以显示文字信息，最重要的是它可以响应点击事件（当然也会显示点击时的效果）
  • 列表：列表容纳其他组件并将它们垂直排列，另外可以通过滑动手势使列表中的元素组件移动

像列表这样能够容纳其他组件的组件也被称为容器组件。

可以想象，组件有两个要素：显示外观和行为逻辑。UX 文件中的 <template> 标签便声明了组件的外观，以 main/index.ux 为例：

<template>
  <p>{{text}}</p>
</template>

main/index.ux 组件由一个 <p> 组件实现内容的显示，这种组件用于显示文本，{{text}} 表达式的值就是要显示的文本。

<script> 标签中的 JavaScript 脚本实现了组件的行为逻辑，该标签内总是使用 export default 导出一个组件对象。首先要关注的是组件对象的 data 属性，它通常是一个对象：

export default {
  data: {
    text: 'Hello, World!'
  }
}

这里，data 对象有一个 text 属性，这个属性的值将作为前面 <text> 组件的显示内容。

组件模型和状态更新

假如我们需要设计这样一个组件：当组件被点击之后显示不同的文字，这时候就要监听组件上的输入事件并更新显示内容。下面的代码将监听 <p> 组件上的点击事件：

<template>
  <p on:click="text += '!'">{{text}}</p>
</template>

on:click 属性中的表达式会在按钮被按下的时候执行。也就是每当按钮被按下之后，组件的 text 文本尾部就会增加一个 '!' 字符。

在后面的教程中我们将详细介绍组件的更新机制。

开始开发应用

有了 glyphix.js 命令行工具，您可以使用任何代码编辑器开发 Glyphix JavaScript 应用程序。请记住：使用 gx build 命令来构建项目，并使用 gx emu 命令运行模拟器，后者在执行之前会自动构建项目。gx 命令支持增量构建，因此你会注意到每次执行构建操作时只会输出修改部分的日志。

提示

建议安装 PowerShell、zsh 等现代 shell 程序并安装一些 shell 实用插件，这会大大提高命令行的操作效率。

Glyphix framework