簡介

快應用是九大手機廠商基於硬體平臺共同推出的新型應用生態，依附在各大應用市場。使用者無需下載安裝，即點即用，享受原生應用的效能體驗。2018年3月20日在北京推出“快應用”標準。該應用模組以標準js語法+重組css標籤+Flexbox佈局+mvvm模式。

第一個快應用程式

環境搭建

1、安裝Node.js
需安裝6.0以上版本的NodeJS，請從NodeJS官網下載
2、安裝hap-toolkit
通過npm倉庫安裝，在命令列中執行以下命令：
npm install -g hap-toolkit
在命令列中執行hap -V會輸出版本資訊表示hap-toolkit安裝成功

專案初始化

安裝toolkit工具後，可通過全域性hap命令建立一個專案模板，如下所示:
hap init <專案名稱>
命令執行後，會在當前目錄下建立<專案名稱>資料夾，作為專案根目錄
這個專案已經包含了專案配置與示例頁面的初始程式碼，專案根目錄主要結構如下：

├── sign                      rpk包簽名模組
│   └── debug                 除錯環境
│       ├── certificate.pem   證書檔案
│       └── private.pem       私鑰檔案
├── src                        專案原始檔夾
│   ├── Common                公用的資源和元件檔案
│   │   └── logo.png          應用圖示
│   ├── Demo                  頁面目錄
│   |   └── index.ux          頁面檔案，可自定義頁面名稱
│   ├── app.ux                APP檔案，可引入公共指令碼，暴露公共資料和方法等
│   └── manifest.json         專案配置檔案，配置應用圖示、頁面路由等
└── package.json              定義專案需要的各種模組及配置資訊
 

安裝依賴

在專案根目錄下，執行如下命令安裝模組到node_modules目錄
npm install

注意：
如果開發者在後續操作中遇到報錯Cannot find module ‘…/node_modules/hap-tools/webpack.config.js’，請執行一次hap update --force（執行完畢後不需要按照提示再次執行npm install）。這是由於高版本的npm（如：NodeJS v8版本使用npm5）在npm install時，會校驗node_modules目錄，並刪除其中的hap-tools資料夾，從而導致報錯；開發者執行hap update --force

編譯專案

1、手動編譯專案
在專案的根目錄下，執行如下命令進行編譯打包，生成rpk包
npm run build
編譯打包成功後，專案根目錄下會生成資料夾：build、dist

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

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

除錯專案

步驟1：手機安裝偵錯程式
在手機上安裝並開啟偵錯程式，按鈕功能如下：

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

注意：若按鈕都不能點選，還需要再安裝平臺預覽版
安裝成功後如下圖所示：

步驟2：安裝rpk包
編譯專案產出了rpk包後，請開啟手機偵錯程式安裝rpk包。偵錯程式支援以下兩種安裝方式，開發者可根據場景選擇其一：
掃碼安裝
適用場景：高頻率更新rpk包
優點：自動更新rpk包，方便快捷
缺點：需要開發者啟動HTTP伺服器，並確保手機與PC在同一區域網
步驟：1 啟動HTTP伺服器
在終端中新建一個視窗，進入專案的根目錄執行如下命令，啟動本地伺服器（預設埠為12306）
npm run server
支援自定義埠
npm run server --port 自定義埠

2 在手機上預覽執行效果
配置HTTP伺服器地址有兩種方式，以下兩者選其一即可：

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

第二種：開啟偵錯程式 --> 點選右上角menu --> 設定，輸入終端視窗中提示的HTTP伺服器地址
配置完成後，可點選線上更新喚起平臺執行rpk包

若提示安裝失敗，請檢查執行npm run server的終端視窗是否正常執行

本地安裝
適用場景：僅預覽效果或低頻率更新rpk包
優點：只需將rpk包複製到手機中，本地安裝選擇rpk包即可
缺點：需手動更新rpk包

1 複製rpk包到手機中
將/dist目錄下編譯產出的rpk包通過USB資料線或其他方式，複製到手機檔案系統中
2 本地安裝rpk包
開啟偵錯程式 --> 點選"本地安裝"，選擇手機檔案系統中的rpk包，並自動喚起平臺執行rpk包，檢視效果