快應用學習教程-入門

官方文檔地址：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包到手機中

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

本地安裝rpk包

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

調試

日誌輸出

1. 修改日誌等級

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

修改後/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 掃描二維碼安裝；

遠程調試

若是你沒有安裝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原始控件，這樣體驗最好