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

时间 2019-11-07

标签开源跨平台移动项目 ngui 入门栏目无线繁體版

原文原文链接

Ngui简介

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

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

同宗不一样派

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

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

开始使用Ngui

若是你历来没有使用过ngui你能够从这里开始，一步步建立你的第一个ngui程序。python

先让给大家看一个简单的Hello World程序react

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

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

安装 Ngui 工具包

首先你须要安装ngui提供的工具包，工具包是使用nodejs编写而且运行时依赖python2.7，因此必需先安装nodejs与python，若是已经安装过那就能够跳过了android

还有一个地方须要注意，这个工具暂时只能在mac系统下运行，由于我只在mac下作过测试，理论上也应该能够在linux下运行，你们能够可自行试试，可是我并不敢保证它运行不会出错，但有一点能够肯定如今必定是不能在windows下运行的。最好是在mac下运行由于若是你要开发ios必定是须要mac的。ios

得到到这个工具包git

你可使用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目录，对这就是你刚刚执行命令自动生成的文件，这个目录的详细说明留到之后的章节中，今天在这里这不是重点。

导出项目

导出XcodeorAndroid 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导出命令执行后会自动打开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

谢谢你们，未完待续~