iOS混合開發庫(GICXMLLayout)四、腳手架、IDE
在前一篇文章中介紹瞭如何一步一步建立GIC
應用,並且給出了一個大概的工程結構的參考,而這一篇文章將會介紹如何使用腳手架
直接建立GIC
工程以及如何使用使用VSCode
來開發專案。
GICXMLLayout
現在已經有了配套的腳手架工具,以及IDE的支援。這將進一步的提升你的開發效率。
腳手架
腳手架是基於Node.js開發的,首先需要確保您的電腦上安裝了node.js
以及npm
。
然後執行如下指令安裝腳手架。
sudo npm install gicxmllayout-cli -g
複製程式碼
然後執行如下指令建立一個GIC工程。
gic init YourProject
複製程式碼
這時候腳手架會提供5種不同的工程模板供你選擇。
- 基礎工程模板。
這個模板是一個最基礎的模板,僅僅提供了最基礎的專案結構。沒有
hotreload
、hotupdate
等功能。不建議使用 - HotReload。
這個模板在基本的專案結構以外增加了
HotReload
功能,建立完專案後按照腳手架的提示就能使用。 - HotReload & VSCode。
這個模板在模板2的基礎上,增加對VSCode的支援。這個模板需要你使用VSCode來開發,搭配
gic
提供的VSCode
外掛GICVSCodeExtension
進行開發。 - HotReload & VSCode & HotUpdate (推薦
這個模板在模板3的基礎上進一步的增加了
HotUpdate
功能,這個模板也是GIC
推薦的模板,根據腳手架的提示,你可以很容易的獲得HotReload
和HotUpdate
功能。 - Tabs
這個模板在模板4的基礎上提供了Tabs功能。可以直接使用XML來建立一個具備Tabs功能的應用。而且你也會發現,tabs功能是通過自定義元素的方式來實現的。
IDE支援
我個人推薦使用VSCode
作為XML
、JavaScript
等檔案的開發工具,並且針對VSCode
已經配套開發了一個外掛GICVSCodeExtension
,利用這個外掛你可以獲得如下幾個功能。
- 針對XML檔案,
元素
、屬性
的智慧提示。 - 針對
JavaScript
程式碼具備將ES6
編譯成ES5
的功能,也就是意味著你可以直接寫ES6規範的程式碼,而無需擔心相容性問題(事實上不同的iOS版本對於ES6的支援是不一樣的)。最新版本已經加入了對ES8
中的async
、await
的編譯支援。 - 提供了HotReload功能所需的http伺服器。你也可以通過配置檔案來修改http埠。
- 提供了
HotUpdate測試
功能。
安裝外掛。
首先使用VSCode
開啟GIC
工程的目錄。
然後在VSCode
的外掛市場中搜索安裝GICVSCodeExtension
外掛。如下圖:
最後,enjoy your project
HotReload 功能
使用HotReload功能的話建議使用腳手架通過模板3
或者模板3以上
的模板來建立專案。 GICVSCodeExtension
外掛在啟動http server
的同時會建立一個websocket server
,以便在project中通過websockt
獲取HotReload命令
。
當你在VSCode中使用cmd+r
快捷鍵後,外掛
就會發出一個HotReload
指令,所有連線到websockt server
的裝置都能收到該指令,進而重新載入整個應用。你無需使用XCode
重新編譯應用就能獲得實時檢視修改的能力。
HotUpdate
如果你使用腳手架通過模板4
或以上的模板來建立專案,那麼配合VSCode
的外掛就能獲得HotUpdate
的功能。
執行應用後,修改你project
中的package.json
檔案中的version
欄位,並且修改專案中的任意樣式,然後點選應用中的檢查更新
按鈕,你會發現剛剛的修改生效了,並且顯示的版本號也修改了。
HotUpdate
功能不同於HotReload
。HotReload
僅僅適用於開發,方便你在開發的時候無需重新編譯整個iOS工程就能實時檢視修改的UI、邏輯。而HotUpdate
適用於app已經發布後的熱更新
、熱修復
。
外掛配置
首先按照下圖所示開啟VSCode的配置頁面。
然後進入GICXMLLayout
的配置選項。如下圖。
GICXMLLayout
目前提供了4個配置項。
-
Behaviors
。這個配置項用於你提供自定義的behavior配置,通過這個配置,可以使得
VSCode
可以識別你定義的behavior元素以及屬性。主要是提供智慧提示功能。 -
Elements
這個配置項用於你提供自定義元素的配置,通過這個配置,可以使得
VSCode
可以識別你定義的元素以及屬性。主要是提供智慧提示功能。 -
Http Server Port
這個配置用來提供在使用
HotReloading
功能的時候Http
伺服器的埠。 -
Project Folder Name。(不建議配置)
這個配置用於,如果你的專案不是從腳手架建立的,而是自己建立的,並且專案結構也不是按照範例建立的,這個配置就允許你自定義工程資料夾,以便外掛能夠提供完整的功能。
以上配置預設都是全域性配置,如果你需要對某個工程單獨進行設定,那麼就需要在workspace setting
一欄設定,如下圖。
修改完配置以後右鍵選擇初始化
,使得配置生效
建立頁面/JS檔案
你可以使用ctr+cmd+n
的快捷鍵來建立新的頁面,或者通過在explorer
中右鍵選擇來建立新的頁面或者JS檔案,如下圖。