摘要：簡介這是一個(gè)的排版顯示引擎和跨平臺的應(yīng)用程序開發(fā)框架，基于，這也是第一個(gè)在移動(dòng)端融合的前端項(xiàng)目，至此成為了真正意義上前后端通吃的語言。

這是一個(gè)GUI的排版顯示引擎和跨平臺的GUI應(yīng)用程序開發(fā)框架，基于NodeJS/OpenGL，這也是第一個(gè)在移動(dòng)端Android/iOS融合NodeJS的前端GUI項(xiàng)目，至此JavaScript成為了真正意義上前后端通吃的語言。

Ngui的目標(biāo)：在此基礎(chǔ)上開發(fā)GUI應(yīng)用程序可擁有開發(fā)WEB應(yīng)用般簡單與速度同時(shí)兼顧Native應(yīng)用程序的性能與體驗(yàn)。

開源跨平臺移動(dòng)項(xiàng)目Ngui【簡介】

開源跨平臺移動(dòng)項(xiàng)目Ngui【入門】

開源跨平臺移動(dòng)項(xiàng)目Ngui【視圖與布局系統(tǒng)】

開源跨平臺移動(dòng)項(xiàng)目Ngui【Action動(dòng)作系統(tǒng)】

開源跨平臺移動(dòng)項(xiàng)目Ngui【CSS樣式表規(guī)則及用法】

Ngui API 文檔

這有點(diǎn)類似Reac-Native可能你們會(huì)問為什么你要寫一個(gè)與React-Native一樣的東西，雖然表面上看見確實(shí)有相似之處，都使用jsx語法，都是跨平臺的，都能實(shí)現(xiàn)熱更新，也都不是基于瀏覽器webview。
但不同之處是Ngui不依賴操作系統(tǒng)的GUI組件，完全調(diào)用標(biāo)準(zhǔn)OpenGLAPI進(jìn)行繪圖渲染，并且給它編寫了一套布局引擎，這有點(diǎn)類似瀏覽器的div+css。幾年前在開始構(gòu)思這個(gè)框架時(shí)效率就一直做重中之重來考慮，雖然現(xiàn)在有很多地方不足，還達(dá)不到理想目標(biāo)，但我相信在不久的將來一定可以。基于這幾個(gè)特點(diǎn)做為一個(gè)GUI系統(tǒng)Ngui能快速的移植到任何操作系統(tǒng)，對操作系統(tǒng)做特例化處理的地方會(huì)很少，更重要的一點(diǎn)是基于此開發(fā)的應(yīng)用代碼能夠做到真正意義上的跨平臺。

當(dāng)然在這里并不是抨擊RN的不足，相反RN第一次用一種語言統(tǒng)一各端平臺，這是非常了不起的，這也是我靈感的源泉。

如果你從來沒有使用過ngui你可以從這里開始，一步步創(chuàng)建你的第一個(gè)ngui程序。

先讓給你們看一個(gè)簡單的Hello World程序

import { GUIApplication, Text } from "ngui"
new GUIApplication().start(
    hello world!
)

做過react開發(fā)的朋友一定會(huì)非常熟悉這種代碼，對就是facebook發(fā)明的那個(gè)JavascriptXML簡稱jsx，這段代碼能在你的設(shè)備屏幕上顯示hello world!

首先你需要安裝ngui提供的工具包，工具包是使用nodejs編寫并且運(yùn)行時(shí)依賴python2.7，所以必需先安裝nodejs與python，如果已經(jīng)安裝過那就可以跳過了

還有一個(gè)地方需要注意，這個(gè)工具暫時(shí)只能在mac系統(tǒng)下運(yùn)行，因?yàn)槲抑辉?b>mac下做過測試，理論上也應(yīng)該可以在linux下運(yùn)行，大家可以可自行試試，但是我并不敢保證它運(yùn)行不會(huì)出錯(cuò)，但有一點(diǎn)可以確定現(xiàn)在一定是不能在windows下運(yùn)行的。最好是在mac下運(yùn)行因?yàn)槿绻阋_發(fā)ios一定是需要mac的。

獲得到這個(gè)工具包

你可以使用nodejs自帶的軟件包管理器npm來安裝它，

打開Terminal并執(zhí)行以下命令:

# shell
$ sudo npm install -g ngui-tools

上一步你應(yīng)該已經(jīng)安裝了工具包現(xiàn)在用它來創(chuàng)建你的第一個(gè)項(xiàng)目吧！

使用下面的shell命令創(chuàng)建一個(gè)新的ngui工程：

# shell
# 創(chuàng)建一個(gè)工程根目錄
$ mkdir myproject
# 進(jìn)入到工程根目錄
$ cd myproject
# 使用ngui命令初始化工程目錄
$ ngui init

現(xiàn)在myproject工程根目錄結(jié)構(gòu)應(yīng)該如下：

myproject

examples

node_modules

app.keys

examples是一個(gè)實(shí)例程序也就是在goole play與app store上發(fā)布的那個(gè)實(shí)例程序，你可對照這個(gè)目錄結(jié)構(gòu)創(chuàng)建自己的應(yīng)用程序目錄，當(dāng)前也可以刪除它但需時(shí)同時(shí)刪除app.keys下對應(yīng)的鍵值。

node_modules目錄是運(yùn)行ngui程序所必要的庫文件，庫所提供的API可以查閱這里http://nodegui.org/doc/會(huì)有比較詳細(xì)的說明

app.keys中描述的每一個(gè)key對應(yīng)的目錄都是一個(gè)app應(yīng)用程序 。

.keys是ngui提供的一種數(shù)據(jù)格式文件，類似json格式可定義數(shù)組與對像，我會(huì)在以后的文章中對這種數(shù)據(jù)格式做詳細(xì)說明，這里先略過現(xiàn)在只要知道它是一種類json格式就行了。

你現(xiàn)在所看到的目錄結(jié)構(gòu)就是ngui的標(biāo)準(zhǔn)項(xiàng)目結(jié)構(gòu)，不管ngui以后支持多少種操作系統(tǒng)與平臺，這個(gè)項(xiàng)目結(jié)構(gòu)不會(huì)變。

構(gòu)建項(xiàng)目是專業(yè)術(shù)語，其實(shí)就是把你的應(yīng)用程序進(jìn)行編譯打包，在這里會(huì)把你剛剛創(chuàng)建的ngui項(xiàng)目根目錄下的js與jsx文件以及資源文件進(jìn)行壓縮打包。

在項(xiàng)目根目錄下執(zhí)行下面的shell命令進(jìn)行構(gòu)建：

# shell
$ ngui build

執(zhí)行完命令后你應(yīng)該可以在項(xiàng)目根目錄下看到多出了一個(gè)out目錄，對這就是你剛剛執(zhí)行命令自動(dòng)生成的文件，這個(gè)目錄的詳細(xì)說明留到以后的章節(jié)中，今天在這里這不是重點(diǎn)。

導(dǎo)出XcodeorAndroid Studio工程，有人會(huì)問為什么還要導(dǎo)出第三方工程不是跨平臺嗎？我指的跨平臺是在運(yùn)行與編碼上是跨平臺并，并且你最終輸出的是一個(gè).apk包或蘋果公司的.dmg或.ipa所以這種基本的導(dǎo)出工作還是要做的，抱歉現(xiàn)階段我還無法為大家提供IDE，只能是穩(wěn)妥的把核心做好。那么既然要導(dǎo)出三方工程，那么你就去百度下安裝它們吧，這并不困難并且這些都是免費(fèi)的。

在項(xiàng)目根目錄下執(zhí)行下面的命令：

# shell
# 導(dǎo)出 ios Xcode 項(xiàng)目
$ ngui export ios
# 導(dǎo)出 android stodio 項(xiàng)目
$ ngui export android

執(zhí)行完命令后會(huì)在項(xiàng)目根目錄下生成project/ios與project/android分別對應(yīng)Xcode工程與Android Stodio工程。

有人想了解Xcode與Android Stodio是怎么創(chuàng)建項(xiàng)目的請看這里:

Xcode

Android Stodio

導(dǎo)出工程后那么你就可以打開它們進(jìn)行編譯與調(diào)試了，如果你安裝過Xcode導(dǎo)出命令執(zhí)行后會(huì)自動(dòng)打開Xcode

這是我mac機(jī)上項(xiàng)目目錄的樣子：

這是打開Xcode的樣子：

這是打開Android Studio的樣子：

Ngui Tools提供了一個(gè)遠(yuǎn)程測試http服務(wù)器，你不需要每次修改完js或jsx代碼都進(jìn)行重新安裝。把你的應(yīng)用啟動(dòng)地址設(shè)置成調(diào)試服務(wù)器地址，在導(dǎo)出項(xiàng)目時(shí)工具會(huì)自動(dòng)把啟動(dòng)地址設(shè)置這個(gè)調(diào)式地址，所大部分情況下你不需要修改，除非你想連接到其它地方。

執(zhí)行下面的代碼可以啟動(dòng)它：

# shell
$ ngui

這個(gè)工具現(xiàn)在還不是很完善只能做簡單的日志顯示，并不能從終端主動(dòng)干預(yù)你應(yīng)用的運(yùn)行狀態(tài)，這是我在未來的版本中需要解決的問題。

這是我編譯的Android實(shí)例程序apk包下載地址examples-release.apk
也可以去Google Play或App Store中搜索AvocadoJS，AvocadoJS是項(xiàng)目之前的名稱，由于后來項(xiàng)目改名還沒來得急上傳商店中。

這是在Github源碼地址Examples Demo

謝謝大家，未完待續(xù)~