快應用入坑指南

# 快應用入坑指南

建立項目

1. PC安裝toolkit工具 ( 相似於vue-cli 和 create-react-app )

   須要電腦安裝node 版本推薦 推薦v6.11.3 及 以上
   注意: 不要使用8.0.*版本．這個版本內部ZipStream實現與node-archive包不兼容，會引發報錯

   安裝hap-toolkit：
   npm install -g hap-toolkit

   hap -V 檢查安裝是否成功

2. 建立第一個快應用項目

   hap init <ProjectName>

   目錄結構： 這個項目已經包含了項目配置與示例頁面的初始代碼，項目根目錄主要結構以下。

   ├── sign                      rpk 包簽名模塊
    │   └── debug                 調試環境
    │       ├── certificate.pem   證書文件
    │       └── private.pem       私鑰文件
    ├── src
    │   ├── Common                公用的資源和組件文件
    │   │   └── logo.png          應用圖標
    │   ├── Demo                  頁面目錄
    │   |   └── index.ux          頁面文件，可自定義頁面名稱
    │   ├── app.ux                APP 文件，可引入公共腳本，暴露公共數據和方法等
    │   └── manifest.json         項目配置文件，配置應用圖標、頁面路由等
    └── package.json              定義項目須要的各類模塊及配置信息

3. 安裝依賴
   npm install

4. 啓動項目 ( 這裏可能有坑 )

   編譯：
   npm run build

   編譯生成的 dist 目錄裏纔是最終產物：rpk 文件 手機會下載該文件進行安裝，才能夠啓動項目

   按照官方文檔一直走，到 npm run build 時，報錯： "Cannot find module '.../node_modules/hap-tools/webpack.config.js'"

   主要是由於建立項目後就有一個 node_module 文件夾了，裏面有一個 hap-tools 包。若是 npm install 安裝依賴，高版本的 npm 可能會把 node_module 原有的包清空再安裝依賴，這時只要再手動安裝下 hap-tools 就好了

   npm install hap-tools

   或者請運行一次 hap update --force（執行完畢後不須要按照提示再次運行npm install）就能夠了。

若是要監聽源碼變化，實現自動編譯，能夠運行 npm run watch 命令。

npm run watch

編譯打包成功後，項目根目錄下會生成文件夾：build、dist

• build：臨時產出，包含編譯後的頁面js，圖片等
• dist：最終產出，包含rpk文件。實際上是將build目錄下的資源打包壓縮爲一個文件，後綴名爲rpk，這個rpk文件就是項目編譯後的最終產出（至關於一個app的安裝包）

1. 預覽快應用：手機安裝調試器、 平臺預覽版調試器[（官方地址）][1]，或者點擊下面得連接直接下載：

   調試器：
   [調試器下載地址][2]
   [平臺預覽版調試器][3]

安裝完成後，打開快應用調試器，界面以下：

[此處輸入圖片的描述][4]

能夠看到有兩種安裝方式：掃碼安裝、本地安裝。

• 掃碼安裝：在項目的根目錄打開一個終端窗口，執行：

npm run server

執行結果以下：
[二維碼][5]

也能夠再瀏覽器打開 servers 地址查看剛纔生產的二維碼。點擊快應用調試器的 掃碼安裝 按鈕就能夠了（注意：部分機型可能會安裝失敗，這裏建議使用小米手機）。

• 本地安裝

• 複製rpk包到手機中

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

• 本地安裝rpk包

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

• 預覽：提示安裝成功後，就能夠點擊調試平臺的在線更新預覽效果了。

代碼編輯配置

Visual Studio Code ，配置語法支持只須要安裝 Hap Extension 插件便可。

開發與調試

• 遠程調試（電腦調試）：
  還記得前面讓你們執行 npm run server開啓node服務，這裏就是依賴這個服務器實現電腦調試的。
  快應用安裝成功後，點擊 開始調試 按鈕，電腦就會在默認瀏覽器 打開一個與手機同步的調試頁面，頁面默認打開 chrome devtools 調試界面，方便你們調試代碼。
  注意：使用遠程調試請確保手機與 PC 在同一局域網，手機不要開代理，不然沒法打開快應用。

• 日誌輸出
  有些同窗在第一次開發快應用時候會發現，在代碼裏面 執行日誌打印console.log（）沒有效果。這是由於快應用的日誌打印須要配置，默認是不容許日誌打印的。

打開工程根目錄下的src文件夾的manifest.json，找到config配置，修改代碼以下就能夠實現日誌打印了：

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

• 到這裏咱們的第一個快應用就開發完成啦，想要了解其餘高級功能，能夠查看快應用的開發文檔。