Ngui簡介

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

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

開源跨平臺移動項目Ngui【簡介】

開源跨平臺移動項目Ngui【入門】

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

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

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

Ngui API 文檔

同宗不同派

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

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

開始使用Ngui

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

先讓給你們看一個簡單的Hello World程序

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

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

安裝 Ngui 工具包

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

還有一個地方需要注意，這個工具暫時只能在mac系統(tǒng)下運行，因為我只在mac下做過測試，理論上也應(yīng)該可以在linux下運行，大家可以可自行試試，但是我并不敢保證它運行不會出錯，但有一點可以確定現(xiàn)在一定是不能在windows下運行的。最好是在mac下運行因為如果你要開發(fā)ios一定是需要mac的。

獲得到這個工具包

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

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

## shell
$ sudo npm install -g ngui-tools

創(chuàng)建新Ngui項目

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

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

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

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

myproject
- examples
- node_modules
- app.keys

examples是一個實例程序也就是在goole play與app store上發(fā)布的那個實例程序，你可對照這個目錄結(jié)構(gòu)創(chuàng)建自己的應(yīng)用程序目錄，當前也可以刪除它但需時同時刪除app.keys下對應(yīng)的鍵值。
node_modules目錄是運行ngui程序所必要的庫文件，庫所提供的API可以查閱這里http://nodegui.org/doc/會有比較詳細的說明
app.keys中描述的每一個key對應(yīng)的目錄都是一個app應(yīng)用程序。
.keys是ngui提供的一種數(shù)據(jù)格式文件，類似json格式可定義數(shù)組與對像，我會在以后的文章中對這種數(shù)據(jù)格式做詳細說明，這里先略過現(xiàn)在只要知道它是一種類json格式就行了。

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

構(gòu)建Ngui項目

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

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

## shell
$ ngui build

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

導(dǎo)出項目

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

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

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

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

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

Xcode
Android Stodio

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

這是我mac機上項目目錄的樣子：

這是我`mac`機上項目目錄的樣子

這是打開Xcode的樣子：

這是打開`Xcode`的樣子

這是打開Android Studio的樣子：

這是打開`Android Studio`的樣子

Ngui調(diào)式服務(wù)器

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

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

## shell
$ ngui

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

下載

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

這是在Github源碼地址Examples Demo

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

開源跨平臺移動項目Ngui【入門】