入門快應用的另一種姿勢

CHB發表於2018-03-28

3月20日,北京朝陽區中國大飯店,小米、中興、華為、金立、聯想、魅族、努比亞、OPPO、vivo、一加,共十家手機廠商聯合宣佈成立快應用聯盟,推出快應用。

接下來,引發無數開發者關注,入門教程網上也出了不少,但大多都是將快應用官網的文件簡單複製一遍,流程基本都是:install hap-toolkit ==> hap init project ==>run build ==> 真機預覽。

也許,換個姿勢更省力。

原因有二:

  • 明明有視覺化IDE,何必要執行一系列命令?
  • 有更完善的元件及介面能力演示Demo,何必建立空專案?

搭建環境

安裝Nodejs:這個是必需的,建議8.0以上版本

安裝HBuilderX:官網quickapp.dcloud.io,HBuilderX內建快應用的語法提示及程式碼塊,可顯著提升開發效率

下載程式碼

官網及第三方入門教程,大多是建立一個空的快應用專案模板,無法直接體驗快應用的元件及介面能力。

本文推薦從github下載hello-quickapp專案,該專案類似微信小程式示例,對快應用目前已支援的各種元件及介面能力進行展示。

匯入工程

啟動HBuilderX,將下載後的hello-quickapp專案拖拽到HBuilerX中,會自動生成一個快應用工程,如下圖所示:

入門快應用的另一種姿勢

注意:僅拖拽hello-quickapp資料夾即可,無需拖拽quickapp-master資料夾。

真機執行

不需要執行各種npm命令,只需要找一部安卓手機,通過USB資料線連上電腦,手機上開啟兩個開關:

  • USB連線方式切換為“媒體裝置(MTP)”
  • 開發者選項,開啟USB除錯

然後在HBuilderX頂部選單中點選:執行—>真機執行—>選擇已連線的Android手機,如下圖所示:

入門快應用的另一種姿勢

手機上執行成功後,介面如下:

入門快應用的另一種姿勢

切換元件及介面選項卡,可以檢視快應用的各種介面能力,如下為介面互動的選單:

入門快應用的另一種姿勢

模板選項卡是常用模板集合,正在完善。

發行rpk

如果希望檢視在官方偵錯程式上的執行效果,按照如下步驟操作:

  • 生成rpk:在HBuilderX頂部選單中依次點選:發行—>快應用發行—>生成rpk檔案
  • 將HBuilderX生成的rpk,複製到手機的檔案系統中
  • 安裝快應用偵錯程式平臺預覽版,注意兩個apk都需要安裝,平臺預覽版是為了模擬快應用的執行時環境
  • 開啟手機上的“快應用偵錯程式”,點選“本地安裝” ,選擇步驟2複製進來的rpk檔案,即可預覽hello-quickapp

好了,相比執行各種命令,是不是更簡潔?

相關文章