快應用學習教程-入門

Yale發表於2018-03-23

官方文件地址：https://doc.quickapp.cn/

環境搭建

安裝nodejs

官方建議不使用8.0.*版本．這個版本內部ZipStream實現與node-archive包不相容，會引起報；

Windows使用者我推薦下載node v7.10.1-x86.msi 一路點next就ok；

對於Android開發者來說對node不是很熟悉，沒有關係，推薦看看知乎這篇文章Node.js是用來做什麼的？先了解一下。這裡用node是把它作為搭建開發工具環境用的，主要用於開發、debug、編譯和打包。

開發快應用真正用到的還是html(ux)、css和js的語法

安裝完node環境後建議安裝cnpm，這樣下載庫時會走淘寶的node倉庫，會更快：

npm install -g cnpm --registry=https://registry.npm.taobao.org
複製程式碼

安裝完cnpm後，所有使用npm的地方都可以換做cnpm

安裝hap-toolkit

cnpm install -g hap-toolkit
複製程式碼

-g 引數是全域性安裝在環境變數能訪問的地方，這樣直接在命令列中可以執行hap命令，檢視版本

hap -V
複製程式碼

hap 是官方給的輔助開發工具，主要功能是初始化工程模板，這樣就省去了初始化繁瑣的工作；

開發工具

開發工具有很多種選擇，我個人很喜歡VsCode VsCode 下載地址,推薦用VsCode

溫馨提示：VsCode 快捷鍵 Ctrl+Shift+y可以調出除錯控制檯、終端

建立專案

建立

hap init <ProjectName>
複製程式碼
├── node_modules
├── sign                      rpk包簽名模組
│   └── debug                 除錯環境
│       ├── certificate.pem   證書檔案
│       └── private.pem       私鑰檔案
├── src
│   ├── Common                公用的資原始檔和元件檔案
│   │   └── logo.png          manifest.json中配置的icon
│   ├── Demo                  頁面目錄
│   |   └── index.ux          頁面檔案，檔名不必與父資料夾相同
│   ├── app.ux                APP檔案（用於包括公用資源）
│   └── manifest.json         專案配置檔案（如：應用描述、介面申明、頁面路由等）
└── package.json              定義專案需要的各種模組及配置資訊，npm install根據這個配置檔案，自動下載所需的執行和開發環境

複製程式碼

目錄的簡要說明如下：

  • src：專案原始檔夾
  • node_modules：專案的依賴類庫
  • sign：簽名模組，當前僅有debug簽名，如果內測上線，請新增release資料夾，增加線上簽名；簽名生成方法請參考文件：編譯工具的openssl

Web前端同學可能不太瞭解sign，可以看看這篇文章Android 你瞭解Android簽名檔案嗎?

編譯

請先將命令列執行目錄切換至你剛建立的目錄下，後面所有命令都在這個目錄下執行。

根據package.json nodejs package.json詳解安裝庫：

cnpm install
複製程式碼

編譯

npm run build
複製程式碼

實際上是呼叫package.json中的scripts-->build命令,npm scripts 使用指南

{
"scripts": {
    "build":   "cross-env NODE_PLATFORM=na NODE_PHASE=dv webpack --config ./node_modules/hap-tools/webpack.config.js"
}
}
複製程式碼

編譯打包成功後，專案根目錄下會生成資料夾：build、dist

  • build：臨時產出，包含編譯後的頁面js，圖片等
  • dist：最終產出，包含rpk檔案。其實是將build目錄下的資源打包壓縮為一個檔案，字尾名為rpk，這個rpk檔案就是專案編譯後的最終產出

快應用學習教程-入門

我們大概看看其主要檔案是.ux，裡面的結構分為template，style，script三大塊，這個結構是典型的Web前端MVVM結構，用到了CSS Flex看來一個.ux就是一個模組，類似一個Android中的Activity。manifest.json就類似Android中的AndroidManifest.xml

rpk檔案就是快應用安裝包類似Android的APK包，它只能在支援快應用的Android作業系統或Android App裡執行

自動重新編譯

如果希望每次修改原始碼檔案後，都自動重新編譯專案，請使用如下命令：

npm run watch
複製程式碼

注意：

如果報錯遇到Cannot find module '.../webpack.config.js'，請重新執行一次hap update --force。這是由於高版本的npm在npm install時，會校驗並刪除了node_modules下部分資料夾，導致報錯。而hap update --force會重新複製hap-tools資料夾到node_modules中

安裝debug工具

安裝debug APP

Debug APP 下載

安裝後截圖如下：

快應用學習教程-入門

說明如下：

  • 掃碼安裝：配置HTTP伺服器地址，下載rpk包，並喚起平臺執行rpk包
  • 本地安裝：選擇手機檔案系統中的rpk包，並喚起平臺執行rpk包
  • 線上更新：重新傳送HTTP請求，更新rpk包，並喚起平臺執行rpk包
  • 開始除錯：喚起平臺執行rpk包，並啟動遠端除錯工具

目前大部分手機系統還沒有整合快應用的執行環境,所以還要安裝執行環境APP，執行環境APP下載 安裝執行環境APP。然後再開啟debug APP。

執行 rpk包

在偵錯程式中喚起平臺開啟rpk包有多種途徑，以下兩者選其一即可，推薦第一種途徑：

  • HTTP請求：開發者啟動HTTP伺服器，開啟偵錯程式，點選掃碼安裝配置HTTP伺服器地址，下載rpk包，並喚起平臺執行rpk包
  • 本地安裝：開發者將rpk包拷貝到手機檔案系統，開啟偵錯程式，點選本地安裝選擇rpk包，並喚起平臺執行rpk包
  1. 掃碼安裝

啟動HTTP伺服器

在終端中新建一個視窗，進入專案的根目錄執行如下命令，啟動本地伺服器（預設埠為12306）

npm run server
複製程式碼

自定義埠（如：8080）

npm run server -- --port 8080
複製程式碼

在Debug APP上預覽執行效果

配置HTTP伺服器地址有兩種方式，以下兩者選其一即可：

  • 開啟偵錯程式 --> 點選"掃碼安裝"，掃描終端視窗中的二維碼即可完成配置（若掃描不成功，可在瀏覽器中開啟頁面：http://localhost:port，掃描頁面中的二維碼）

  • 開啟偵錯程式 --> 點選右上角menu --> 設定，輸入終端視窗中提示的HTTP伺服器地址

配置完成後，若沒有自動喚起平臺執行rpk包，點選線上更新喚起平臺執行rpk包，若提示安裝失敗，請檢查執行npm run server的終端視窗是否正常執行

執行效果如下圖：

效果圖

  1. 本地安裝

複製rpk包到手機中

將/dist目錄下編譯產出的rpk包通過USB資料線或其他方式，複製到手機檔案系統中

本地安裝rpk包

開啟偵錯程式 --> 點選"本地安裝"，選擇手機檔案系統中的rpk包，並自動喚起平臺執行rpk包，檢視效果

除錯

日誌輸出

  1. 修改日誌等級

開啟工程根目錄下的src資料夾的manifest.json，找到config配置，將logLevel修改為最低階別debug，即：允許所有級別的日誌輸出

修改後/src/manifest.json中config配置程式碼如下：

{
&emsp;"config": {
  &emsp;&emsp;"logLevel": "debug"
  }
}
複製程式碼
  1. 在js中輸出日誌

當js程式碼未按需求正確執行，輸出日誌能幫助開發者快速定位問題；與傳統前端開發一致，使用console物件輸出日誌，如下：

console.debug('debug')
console.log('log')
console.info('info')
console.warn('warn')
console.error('error')
複製程式碼
  1. 檢視日誌

開發者可以使用Android Studio的Android Monitor輸出來檢視日誌。

先新增一段console.debug("hello quickapp")

快應用學習教程-入門

然後

npm run build
複製程式碼
npm run server
複製程式碼

終端出現如下：

快應用學習教程-入門

然後開啟Android Monitor

快應用學習教程-入門

用Debug App 掃描二維碼安裝；

快應用學習教程-入門

遠端除錯

如果你沒有安裝Android-Monitor，就可以通過遠端除錯除錯快應用，用hap-toolkit的遠端除錯命令 、chrome devtools除錯介面，來除錯手機app端的頁面

  • 開發者可以通過命令列終端或者除錯伺服器主頁看到提供掃描的二維碼
  • 開發者通過快應用偵錯程式掃碼安裝按鈕，掃碼安裝待除錯的rpk檔案
  • 開發者點選快應用偵錯程式中的開始除錯按鈕，開始除錯

用Debug App 掃描二維碼安裝後點選開始除錯按鈕：

快應用學習教程-入門

如果安裝了Chrome瀏覽器，debug程式會自動調起PC Chrome devtools：

快應用學習教程-入門

大家可以改一些程式碼自己跑起來看看效果

與小程式對比

通過開啟Android開發者選項中的'顯示佈局介面邊界'功能可以看出介面是否是Android原始控制元件：

快應用學習教程-入門 快應用學習教程-入門 快應用學習教程-入門

對比發現，快應用將html,js,css最終編譯成Android原始控制元件了，這樣快應用的體驗最好

總結

總結一下前面都學到了什麼：

  • 搭建環境，安裝Node，hap，VsCode，Debug App，執行環境APP
  • 建立第一個專案，初識開發框架，開發語言
  • 編譯安裝debug rpk包
  • 和小程式對比，快應用編譯程式為Android原始控制元件，這樣體驗最好

快應用學習教程-入門

相關文章