跨平臺開源項目Langou【入門】

Langou簡介

Langou是一個跨平臺(Android/iOS)前端開發框架,核心代碼使用C++編寫,底層基於OpenGL繪圖,上層實現了一個精簡的排版引擎以及一個JS/JSX運行環境。目標是想實現在此基礎上開發GUI應用程序可兼顧開發速度與運行效率。

同宗不同派

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

開始使用Langou

如果你從來沒有使用過langou你可以從這裏開始,一步步創建你的第一個langou程序。

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

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

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

安裝Langou工具包

首先你需要安裝langou提供的工具包,工具包是使用nodejs編寫並且運行時依賴python2.7,所以必需先安裝nodejspython,如果已經安裝過那就可以跳過了

還有一個地方需要注意,這個工具暫時只能在mac系統下運行,因爲我只在mac下做過測試,理論上也應該可以在linux下運行,大家可以可自行試試,但是我並不敢保證它運行不會出錯,但有一點可以確定現在一定是不能在windows下運行的。最好是在mac下運行因爲如果你要開發ios一定是需要mac的。

獲得到這個工具包

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

    打開Terminal並執行以下命令:

# shell
$ sudo npm install -g lmake

創建新Langou項目

上一步你應該已經安裝了工具包現在用它來創建你的第一個項目吧!

使用下面的shell命令創建一個新的langou工程:

# shell
# 創建一個工程根目錄
$ mkdir myproject
# 進入到工程根目錄
$ cd myproject
# 使用langou命令初始化工程目錄
$ lmake init

現在myproject工程根目錄結構應該如下:

  • myproject

    • examples
    • libs
    • app.keys
  • examples是一個實例程序也就是在goole playapp store上發佈的那個實例程序,你可對照這個目錄結構創建自己的應用程序目錄,當前也可以刪除它但需時同時刪除app.keys下對應的鍵值。

  • libs目錄是運行langou程序所必要的庫文件,庫所提供的API可以查閱這裏http://langou.org/doc/會有比較詳細的說明

  • app.keys中描述的每一個key對應的目錄都是一個app應用程序 。

  • .keyslangou提供的一種數據格式文件,類似json格式可定義數組與對像,我會在以後的文章中對這種數據格式做詳細說明,這裏先略過現在只要知道它是一種類json格式就行了。

你現在所看到的目錄結構就是langou的標準項目結構,不管langou以後支持多少種操作系統與平臺,這個項目結構不會變。

構建Langou項目

構建項目是專業術語,其實就是把你的應用程序進行編譯打包,在這裏會把你剛剛創建的langou項目根目錄下的jsjsx文件以及資源文件進行壓縮打包。

在項目根目錄下執行下面的shell命令進行構建:

# shell
$ lmake build

執行完命令後你應該可以在項目根目錄下看到多出了一個out目錄,對這就是你剛剛執行命令自動生成的文件,這個目錄的詳細說明留到以後的章節中,今天在這裏這不是重點。

導出項目

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

在項目根目錄下執行下面的命令:

# shell
# 導出 ios Xcode 項目
$ lmake export ios
# 導出 android stodio 項目
$ lmake export android

執行完命令後會在項目根目錄下生成project/iosproject/android分別對應Xcode工程與Android Stodio工程。

有人想了解XcodeAndroid Stodio是怎麼創建項目的請看這裏:

導出工程後那麼你就可以打開它們進行編譯與調試了,如果你安裝過Xcode導出命令執行後會自動打開Xcode

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

Screenshot

這是打開Xcode的樣子:

Screenshot

這是打開Android Studio的樣子:

Screenshot

Langou調式服務器

lmake提供了一個遠程測試http服務器,你不需要每次修改完jsjsx代碼都進行重新安裝。把你的應用啓動地址設置成調試服務器地址,在導出項目時工具會自動把啓動地址設置這個調式地址,所大部分情況下你不需要修改,除非你想連接到其它地方。

執行下面的代碼可以啓動它:

# shell
$ lmake

這個工具現在還不是很完善只能做簡單的日誌顯示,並不能從終端主動干預你應用的運行狀態,這是我在未來的版本中需要解決的問題。

下載

  • 這是我編譯的Android實例程序apk包下載地址examples-release.apk
    也可以去Google PlayApp Store中搜索AvocadoJSAvocadoJS是項目之前的名稱,由於後來項目改名還沒來得急上傳商店中。

  • 這是在Github源碼地址Examples Demo

謝謝大家,未完待續~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章