快應用學習教程-入門

快應用學習教程-入門

官方文檔地址：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的終端窗口是否正常運行

運行效果如下圖：

2. 本地安裝

複製rpk包到手機中

將<ProjectName>/dist目錄下編譯產出的rpk包通過USB數據線或其他方式，複製到手機文件系統中

本地安裝rpk包

打開調試器 --> 點擊"本地安裝"，選擇手機文件系統中的rpk包，並自動喚起平臺運行rpk包，查看效果

調試

日誌輸出

1. 修改日誌等級

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

修改後<ProjectName>/src/manifest.json中config配置代碼如下：

{
　"config": {
  　　"logLevel": "debug"
  }
}

2. 在js中輸出日誌

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

console.debug('debug')
console.log('log')
console.info('info')
console.warn('warn')
console.error('error')

3. 查看日誌

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

先添加一段console.debug("hello quickapp")

然後

npm run build

npm run server

終端出現如下：

然後打開Android Monitor

用Debug App 掃描二維碼安裝；

<img src="https://gitee.com/lefutong/assets/raw/master/quickcn/log1.png" style="zoom:30%"/>

遠程調試

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

• 開發者可以通過命令行終端或者調試服務器主頁看到提供掃描的二維碼
• 開發者通過快應用調試器掃碼安裝按鈕，掃碼安裝待調試的rpk文件
• 開發者點擊快應用調試器中的開始調試按鈕，開始調試

用Debug App 掃描二維碼安裝後點擊開始調試按鈕：

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

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

與小程序對比

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

<img src="https://gitee.com/lefutong/assets/raw/master/quickcn/quckapp.png" style="zoom:30%"/>

<img src="https://gitee.com/lefutong/assets/raw/master/quickcn/wechat.png" style="zoom:30%"/>

<img src="https://gitee.com/lefutong/assets/raw/master/quickcn/zhifubao.png" style="zoom:30%"/>

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

總結

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

• 搭建環境，安裝Node，hap，VsCode，Debug App，運行環境APP
• 創建第一個項目，初識開發框架，開發語言
• 編譯安裝debug rpk包
• 和小程序對比，快應用編譯程序爲Android原始控件，這樣體驗最好