开源跨平台移动项目 Ngui【入门】

Ngui 简介

这是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架，基于 NodeJS/OpenGL，这也是第一个在移动端 Android/iOS 融合 NodeJS 的前端 GUI 项目，至此 JavaScript 成为了真正意义上前后端通吃的语言。

Ngui 的目标：在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

• 开源跨平台移动项目Ngui【简介】

• 开源跨平台移动项目Ngui【入门】

• 开源跨平台移动项目Ngui【视图与布局系统】

• 开源跨平台移动项目Ngui【Action动作系统】

• 开源跨平台移动项目Ngui【CSS样式表规则及用法】

• Ngui API 文档

同宗不同派

这有点类似 Reac-Native 可能你们会问为什么你要写一个与 React-Native 一样的东西，虽然表面上看见确实有相似之处，都使用 jsx 语法，都是跨平台的，都能实现热更新，也都不是基于浏览器 webview。
但不同之处是 Ngui 不依赖操作系统的 GUI 组件，完全调用标准 OpenGLAPI 进行绘图渲染，并且给它编写了一套布局引擎，这有点类似浏览器的 div+css。几年前在开始构思这个框架时效率就一直做重中之重来考虑，虽然现在有很多地方不足，还达不到理想目标，但我相信在不久的将来一定可以。基于这几个特点做为一个 GUI 系统 Ngui 能快速的移植到任何操作系统，对操作系统做特例化处理的地方会很少，更重要的一点是基于此开发的应用代码能够做到真正意义上的跨平台。

当然在这里并不是抨击 RN 的不足，相反 RN 第一次用一种语言统一各端平台，这是非常了不起的，这也是我灵感的源泉。

开始使用 Ngui

如果你从来没有使用过 ngui 你可以从这里开始，一步步创建你的第一个 ngui 程序。

先让给你们看一个简单的 Hello World 程序

import { GUIApplication, Root } from 'ngui'
new GUIApplication().start(
	<Root>hello world!</Root>
)

做过 react 开发的朋友一定会非常熟悉这种代码，对就是 facebook 发明的那个 JavascriptXML 简称 jsx，这段代码能在你的设备屏幕上显示 hello world!

安装 Ngui 工具包

首先你需要安装 ngui 提供的工具包，工具包是使用 nodejs 编写并且运行时依赖 python2.7，所以必需先安装 nodejs 与 python，如果已经安装过那就可以跳过了

还有一个地方需要注意，这个工具暂时只能在 mac 系统下运行，因为我只在 mac 下做过测试，理论上也应该可以在 linux 下运行，大家可以可自行试试，但是我并不敢保证它运行不会出错，但有一点可以确定现在一定是不能在 windows 下运行的。最好是在 mac 下运行因为如果你要开发 ios 一定是需要 mac 的。

获得到这个工具包

• 你可以使用 nodejs 自带的软件包管理器 npm 来安装它，

  打开 Terminal 并执行以下命令:

# shell
$ sudo npm install -g ngui-tools

创建新 Ngui 项目

上一步你应该已经安装了工具包现在用它来创建你的第一个项目吧！

使用下面的 shell 命令创建一个新的 ngui 工程：

# shell
# 创建一个工程根目录
$ mkdir myproject
# 进入到工程根目录
$ cd myproject
# 使用ngui命令初始化工程目录
$ ngui init

现在 myproject 工程根目录结构应该如下：

• myproject

  • examples
  • node_modules
  • app.keys

• examples 是一个实例程序也就是在 goole play 与 app store 上发布的那个实例程序，你可对照这个目录结构创建自己的应用程序目录，当前也可以删除它但需时同时删除 app.keys 下对应的键值。

• node_modules 目录是运行 ngui 程序所必要的库文件，库所提供的 API 可以查阅这里http://nodegui.org/doc/会有比较详细的说明

• app.keys 中描述的每一个 key 对应的目录都是一个 app 应用程序 。

• .keys 是 ngui 提供的一种数据格式文件，类似 json 格式可定义数组与对像，我会在以后的文章中对这种数据格式做详细说明，这里先略过现在只要知道它是一种类 json 格式就行了。

你现在所看到的目录结构就是 ngui 的标准项目结构，不管 ngui 以后支持多少种操作系统与平台，这个项目结构不会变。

构建 Ngui 项目

构建项目是专业术语，其实就是把你的应用程序进行编译打包，在这里会把你刚刚创建的 ngui 项目根目录下的 js 与 jsx 文件以及资源文件进行压缩打包。

在项目根目录下执行下面的 shell 命令进行构建：

# shell
$ ngui build

执行完命令后你应该可以在项目根目录下看到多出了一个 out 目录，对这就是你刚刚执行命令自动生成的文件，这个目录的详细说明留到以后的章节中，今天在这里这不是重点。

导出项目

导出 Xcode or Android Studio 工程，有人会问为什么还要导出第三方工程不是跨平台吗？我指的跨平台是在运行与编码上是跨平台并，并且你最终输出的是一个 .apk 包或苹果公司的 .dmg 或 .ipa 所以这种基本的导出工作还是要做的，抱歉现阶段我还无法为大家提供 IDE，只能是稳妥的把核心做好。那么既然要导出三方工程，那么你就去百度下安装它们吧，这并不困难并且这些都是免费的。

在项目根目录下执行下面的命令：

# shell
# 导出 ios Xcode 项目
$ ngui export ios
# 导出 android stodio 项目
$ ngui export android

执行完命令后会在项目根目录下生成 project/ios 与 project/android 分别对应 Xcode 工程与 Android Stodio 工程。

有人想了解 Xcode 与 Android Stodio 是怎么创建项目的请看这里:

• Xcode
• Android Stodio

导出工程后那么你就可以打开它们进行编译与调试了，如果你安装过 Xcode 导出命令执行后会自动打开 Xcode

这是我 mac 机上项目目录的样子：

这是打开 Xcode 的样子：

这是打开 Android Studio 的样子：

Ngui 调式服务器

Ngui Tools 提供了一个远程测试 http 服务器，你不需要每次修改完 js 或 jsx 代码都进行重新安装。把你的应用启动地址设置成调试服务器地址，在导出项目时工具会自动把启动地址设置这个调式地址，所大部分情况下你不需要修改，除非你想连接到其它地方。

执行下面的代码可以启动它：

# shell
$ ngui

这个工具现在还不是很完善只能做简单的日志显示，并不能从终端主动干预你应用的运行状态，这是我在未来的版本中需要解决的问题。

下载

• 这是我编译的 Android 实例程序 apk 包下载地址examples-release.apk
  也可以去 Google Play 或 App Store 中搜索 AvocadoJS，AvocadoJS 是项目之前的名称，由于后来项目改名还没来得急上传商店中。

• 这是在 Github 源码地址Examples Demo

谢谢大家，未完待续~