iT邦幫忙

2021 iThome 鐵人賽

DAY 23
0
AI & Data

觀賞魚辨識的YOLO全餐系列 第 23

Day 23 - 前端開發工具 - HBuilder X

  • 分享至 

  • xImage
  •  

Day 23 - 前端開發工具 - HBuilder X

完成了後端開發,接下來就要將透過前端跨平台開發框架來存取後端的資源,底下介紹幾種常見的跨平台應用開發框架。

  • Flutter
  • Ionic
  • React native
  • Apache Cordova
  • Xamarin

所謂的跨平台應用開發框架就是,開發人員可以使用一套相同的代碼,一次性地編碼即可在多個平台上面運行起來,如 iOS, Android,Windows, macOS 以及 Linux。它減少了開發人員開發應用的時間,並且能夠快速地交付。作為用戶來說,當然希望使用 App 的時候能夠順暢流利,不可否認的是,使用 swift 或 android studio 開發出來的 iOS 和 Android 應用非常流暢而且高效,但是缺點就是需要耗費較長的時間來開發,比如同一個 App,需要在 swift 或 android studio 兩端各自開發一遍,比較耗費人力和財力。

跨平台應用程序開發框架的好處:

  • 一個代碼適用於多個設備;
  • 一個代碼適用於多個平台;
  • 一個代碼可以在多個應用商店中發佈成多個 app;
  • 只需編寫一次代碼;
  • 代碼可以跨平台復用;
  • 市場分析與測試;
  • 快速成型;
  • 快速開發;

然而在挑選跨平台應用程序開發框架時,需要注意的是:

  • 是否開源。
  • 框架的三方套件是否足夠。
  • 框架的執行性能。
  • 是否有大廠維護,因為這關係到後期是否可以持續維護。
  • 使用者的人數。

Flutter

Flutter 由 Google 開發的開源平台,可用於跨平台應用程序開發。它具有吸引力的原因是:快速的開發,富有表現力的精美使用者介面 (UI) 和類似本機的性能。使用Flutter的一些公司是 Google, eBay,BMW 等。

https://ithelp.ithome.com.tw/upload/images/20210923/20129510M8UkpyarIk.jpg
圖 1、Flutter 官方網頁

選擇 Flutter 框架進行跨平台應用程序開發的主要原因:

  • 高度穩定
  • DART,AOT 編譯語言
  • 平穩的開發週期
  • 強大的熱加載功能
  • 滿足各種需求的UI套件
  • 完美匹配的 Flutter 現在擁有 200 萬用戶(統計至 2021 年),並且還在不斷增加。

Ionic

Ionic 是用於跨平台應用程序開發的增長最快且領先的開源框架。針對移動設備進行了優化的UI組件庫和工具有助於快速構建交互式應用程序。使用 Ionic 的企業包括 GE,空中客車,Panera 等。

https://ithelp.ithome.com.tw/upload/images/20210923/20129510ITm2GIPQlC.png
圖 2、Ionic 官方網頁

選擇 Ionic 進行跨平台應用程序開發的主要原因:

  • 開發人員友好
  • 龐大的社區
  • 角度優勢
  • 一個代碼即可
  • Cordova edge
  • 高標準的UI
  • 簡化測試

React native

由 Facebook 在 2015 年開發的 React Native 可幫助企業使用 Swift,Objective C 和 Java 等語言構建類似於本機的應用程序。使用 React Native 框架的一些企業是 Facebook, Skype, Tesla 等。

https://ithelp.ithome.com.tw/upload/images/20210923/20129510TW5a3FMUu6.png
圖 3、React 官方網頁

選擇 React 本機框架進行跨平台應用程序開發的主要原因:

  • 現成的組件
  • 社區驅動
  • 熱加載
  • 開源
  • React Native for Web 功能
  • 高度可靠
  • 本地功能易於訪問
  • 本機UI組件的實現

Apache Cordova

Apache Cordova 是一個著名的跨平台應用程序開發框架,該框架使用 Web 技術,包括 HTML,CSS 和 JavaScript。使用 Apache Cordova 的一些企業是 Walmart,Adobe,QrStore 等。

https://ithelp.ithome.com.tw/upload/images/20210923/20129510V88vZpJvYk.png
圖 4、Cordova 官方網頁

選擇Cordova框架進行跨平台應用程序開發的主要原因:

  • 可重用代碼
  • 熟悉的技術
  • 強大的社區支持
  • 廣泛的插件
  • 免費和開源
  • 離線開發
  • 調試
  • 實時重載

Xamarin

Xamarin是微軟的 .NET 平台的擴展,是開發人員和企業最受信任和喜愛的框架之一。Xamarin 使用 C# 開發所有內容。使用Xamarin跨平台框架的一些企業是阿拉斯加航空,美國癌症協會,JustGiving等。

https://ithelp.ithome.com.tw/upload/images/20210923/20129510s8eoo7cnXc.png
圖 5、Xamarin 官方網頁

選擇Xamarin框架進行跨平台應用程序開發的主要原因:

  • 開源和免費
  • 本機性能
  • 用於訪問本機功能
  • XAML的基本框架,用於使用C#構建動態移動應用程序
  • 用於通用模式的庫,例如Model * View ViewModel(MVVM)
  • 具有語法突出顯示,代碼完成,設計器以及其他專門用於開發移動頁面的功能

因為筆者現在在大陸高教任教,發現中國開發者習慣使用的跨平台框架並非上述的這些,而是由 DCloud 即数字天堂(北京)网络技术有限公司所開發的 HbuilderX 這個 IDE 介面,在這個介面下可以開發網頁前端程式,下圖是 DCloud 官網的首頁,標榜著 12 億用戶使用著由 DCloud 的開發工具所開發出來的 app,有 900 萬的開發者使用著他們所提供的開發工具。

https://ithelp.ithome.com.tw/upload/images/20210923/20129510QodLiAzSr6.png
圖 6、DCloud 官方網頁

在此說明一下主要會使用到的開發工具 HbuilderX 以及跨平台框架 5+App。

HBuilderX

HBuilder 中 H 指的是 HTML 的首字母,Builder 是建設者構造者,X 是 HBuilder 的下一代版本,也簡稱HX。它是為前端開發者服務的通用 IDE,或者稱為編輯器,與 VS Code, sublime, WebStorm 的功能類似。

可以用來開發普通 web 項目,也可以開發 DCloud 出品的 uni-app 項目、5+App 項目、wap2app 項目。目前有 900萬開發者在使用HBuilder。舊版的 HBuilder 是紅色 logo,已於 2018 年停止更新,綠色 logo 的 HBuilderX 是新版替代品。
HX 的特點如下:

  • 輕巧:僅 10M 左右的綠色發行包(不含插件)。
  • 極速:不管是啓動速度、大文檔打開速度、編碼提示,都極速響應 C++ 的架構。
  • Vue 開發強化:HX 對 vue 做了大量優化投入,開發體驗遠超其他開發工具。
  • 小程序支持:國外開發工具沒有對中國的小程序開發優化,HX 可新建 uni-app 小程序等項目。
  • Markdown 利器:HX 是默認新建文件類型為 markdown 的編輯器。
  • 強大的語法提示:HX 是中國唯一一家擁有自主 IDE 語法分析引擎的公司,對前端語言提供準確的代碼提示和轉到定義(Alt+鼠標左鍵)。
  • 更強的 JOSN 支持:現代 js 開發中大量 JOSN 結構的寫法,HX 提供高效的操作。

HX 的擴展性,支持 php、java、nodejs 等後端語言插件,並兼容了很多 vscode 的插件及代碼塊。還可以通過外部命令,方便的調用各種命令行功能,並設置快捷鍵。如果開發者習慣了其他工具(如vscode或sublime)的快捷鍵,在菜單工具-快捷鍵方案中可以切換。

5+App

5+ 是 html5plus 的縮寫,即基於 html5 的增強擴展,它是一個跨 iOS、Android 的混合開發 App 解決方案,與 Cordova 類似,它基於 webview 渲染,封裝了 Native.js 提供了大量原生能力給外部的 JS 呼叫。5+App 不要求使用 vue,使用普通HTML即可開發。

Native.js 技術,簡稱 NJS,是一種將手機作業系統的原生物件映射為 JS 物件,在 JS 里編寫原生代碼的技術。如果說 Node.js 把 JS 擴展到伺服器世界,那麼 NJS 則把 JS 擴展到手機 App 的原生世界。
NJS 大幅提升了 HTML5 的能力,NJS 突破了瀏覽器的功能限制,也不再需要像 Hybrid 那樣由原生語言開發插件才能補足瀏覽器欠缺的功能。
NJS 編寫的代碼,最終需要在 HBuilder 里打包發行為 App 安裝包,或者在支持 NJS 技術的瀏覽器里運行。NJS 不再需要配置原生開發和編譯環境,調試、打包均在 HBuilderX 里進行,沒有 mac 和 xcode/swift 一樣可以開發 iOS 應用。NJS 的運行環境是集成在 5+runtime 里的,使用 HBuilder 打包的 app 都可以直接使用 NJS。

參考資料

  • Flutter,https://flutter.dev/
  • Ionic,https://ionicframework.com/
  • React native,https://reactnative.dev/
  • Apache Cordova,https://cordova.apache.org/
  • Xamarin],https://dotnet.microsoft.com/apps/xamarin
  • 2021 最新 15 个App跨平台开发框架,https://zhuanlan.zhihu.com/p/334804313
  • DCloud产品综述, https://ask.dcloud.net.cn/docs/
  • HBuilderX 簡介,https://hx.dcloud.net.cn/README
  • 2020 年值得关注的十个跨平台开发框架,https://cloud.tencent.com/developer/news/578219
  • HBuilderX文檔系統,https://hx.dcloud.net.cn/

上一篇
Day 22 - Django + YOLO 後台整合應用
下一篇
Day 24 - 設定開發帳號 HBuilder X - DCloud 註冊
系列文
觀賞魚辨識的YOLO全餐38
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言