Ngui簡(jiǎn)介

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

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

• 開(kāi)源跨平臺(tái)移動(dòng)項(xiàng)目Ngui【簡(jiǎn)介】

• 開(kāi)源跨平臺(tái)移動(dòng)項(xiàng)目Ngui【入門(mén)】

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

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

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

• Ngui API 文檔

同宗不同派

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

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

開(kāi)始使用Ngui

如果你從來(lái)沒(méi)有使用過(guò)ngui你可以從這里開(kāi)始，一步步創(chuàng)建你的第一個(gè)ngui程序。

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

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

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

安裝 Ngui 工具包

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

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

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

• 你可以使用nodejs自帶的軟件包管理器npm來(lái)安裝它，

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

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

創(chuàng)建新Ngui項(xiàng)目

上一步你應(yīng)該已經(jīng)安裝了工具包現(xiàn)在用它來(lái)創(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í)例程序，你可對(duì)照這個(gè)目錄結(jié)構(gòu)創(chuàng)建自己的應(yīng)用程序目錄，當(dāng)前也可以刪除它但需時(shí)同時(shí)刪除app.keys下對(duì)應(yīng)的鍵值。
• node_modules目錄是運(yùn)行ngui程序所必要的庫(kù)文件，庫(kù)所提供的API可以查閱這里http://nodegui.org/doc/會(huì)有比較詳細(xì)的說(shuō)明
• app.keys中描述的每一個(gè)key對(duì)應(yīng)的目錄都是一個(gè)app應(yīng)用程序 。
• .keys是ngui提供的一種數(shù)據(jù)格式文件，類(lèi)似json格式可定義數(shù)組與對(duì)像，我會(huì)在以后的文章中對(duì)這種數(shù)據(jù)格式做詳細(xì)說(shuō)明，這里先略過(guò)現(xiàn)在只要知道它是一種類(lèi)json格式就行了。

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

構(gòu)建Ngui項(xiàng)目

構(gòu)建項(xiàng)目是專(zhuān)業(yè)術(shù)語(yǔ)，其實(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目錄，對(duì)這就是你剛剛執(zhí)行命令自動(dòng)生成的文件，這個(gè)目錄的詳細(xì)說(shuō)明留到以后的章節(jié)中，今天在這里這不是重點(diǎn)。

導(dǎo)出項(xiàng)目

導(dǎo)出XcodeorAndroid Studio工程，有人會(huì)問(wèn)為什么還要導(dǎo)出第三方工程不是跨平臺(tái)嗎？我指的跨平臺(tái)是在運(yùn)行與編碼上是跨平臺(tái)并，并且你最終輸出的是一個(gè).apk包或蘋(píng)果公司的.dmg或.ipa所以這種基本的導(dǎo)出工作還是要做的，抱歉現(xiàn)階段我還無(wú)法為大家提供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分別對(duì)應(yīng)Xcode工程與Android Stodio工程。

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

• Xcode
• Android Stodio

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

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

這是打開(kāi)Xcode的樣子：

這是打開(kāi)Android Studio的樣子：

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

Ngui Tools提供了一個(gè)遠(yuǎn)程測(cè)試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)在還不是很完善只能做簡(jiǎn)單的日志顯示，并不能從終端主動(dòng)干預(yù)你應(yīng)用的運(yùn)行狀態(tài)，這是我在未來(lái)的版本中需要解決的問(wèn)題。

下載

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

• 這是在Github源碼地址Examples Demo

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