開源跨平臺移動項目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, Text } from 'ngui'
new GUIApplication().start(
    <Text>hello world!</Text>
)

作過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目錄，對這就是你剛剛執行命令自動生成的文件，這個目錄的詳細說明留到之後的章節中，今天在這裏這不是重點。

導出項目

導出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
• 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

謝謝你們，未完待續~