快應用quickapp快速入門教程 by五個半檸檬

快應用

快應用是九大手機廠商基於硬件平臺共同推出的新型應用生態。用戶無需下載安裝，即點即用，享受原生應用的性能體驗。
2018年3月20日在北京推出「快應用」標準。
如今咱們就來試試如何快速搭建一個快應用程序吧~

1、準備工具

1. 用系統自帶的命令處理工具（不建議用，有點醜）

   開始菜單，搜索輸入cmd

   

2. 下載git-bash,界面以下

   

3. 下載cmder,界面以下（當前比較好用的一個，推薦）

   

4. 準備一個安卓手機！！！！

2、環境搭建

1. 安裝NodeJS

   需安裝6.0以上版本的NodeJS，請從NodeJS官網下載，推薦v6.11.3
   注意: 不要使用8.0.*版本．這個版本內部ZipStream實現與node-archive包不兼容，會引發報錯。安裝過程就不細說了，不會的話請自行百度。

2. 安裝hap-toolkit

   經過npm倉庫安裝，在命令行中執行如下命令：

   npm install -g hap-toolkit

   在命令行中執行hap -V會輸出版本信息表示hap-toolkit安裝成功，以下命令所示：

   hap -V // 會顯示安裝版本信息

3. 安裝toolkit工具後，可經過全局hap命令建立一個項目模板，以下所示:

   hap init <ProjectName>
   其中<ProjectName>爲自定義的項目名稱
   命令執行後，會在當前目錄下建立<ProjectName>文件夾，做爲項目根目錄
   這個項目已經包含了項目配置與示例頁面的初始代碼，項目根目錄主要結構以下：

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

   目錄的簡要說明以下：
   src：項目源文件夾
   sign：簽名模塊，當前僅有debug簽名，若是內測上線，請添加release文件夾，增長線上簽名；簽名生成方法詳見文檔編譯工具

4. 安裝依賴
   在項目根目錄下，運行以下命令安裝模塊到node_modules目錄
   npm install

5. 編譯項目

   （1）手動編譯項目

   在項目的根目錄下，運行以下命令進行編譯打包，生成rpk包
   
   npm run build
   
   編譯打包成功後，項目根目錄下會生成文件夾：build、dist
   build：臨時產出，包含編譯後的頁面js，圖片等
   dist：最終產出，包含rpk文件。實際上是將build目錄下的資源打包壓縮爲一個文件，後綴名爲rpk，這個rpk文件就是項目編譯後的最終產出

   （2）自動編譯項目

   若是但願每次修改源代碼文件後，都自動編譯項目，請使用以下命令：
   
       npm run watch

6. 在安卓手機上安裝調試工具，點擊藍色字體進行下載
   兩款工具都必須下載到安卓手機中才能進行調試
   下載地址：https://www.quickapp.cn/docCe...

   

   

3、運行項目

1. 打開新建項目
   我首先使用hap init 新建了一個hapmemo的項目

   

   當使用sublime打開時發現不支持.ux的文件。

   

   官方推薦使用Visual Studio Code或者WebStorm進行開發（建議選擇前者）。

2. 安裝Hap Extension
   啓動Visual Studio Code，打開項目，點擊左上側擴展，搜索hap，點擊安裝Hap Extension，而後點擊從新加載便可預覽效果（若是VS code不是最新版，請先更新）

   

   

   到這一步，一個官方基礎的demo就構建成功了。

4、鏈接手機進行調試

注意：必定要注意手機鏈接的wifi與電腦所鏈接的網絡須要在同一局域網和網段，須要可以相互訪問。

1. 在項目根目錄下執行以下命令，啓動HTTP調試服務器：（server前須要先npm run build）

   npm run server

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

   

   若是是使用系統自帶的處理工具，沒法掃二維碼，請在瀏覽器中輸入二維碼訪問地址便可

2. 掃碼安裝

   

3. 當在同一網段時會提示你安裝成功，不然提示安裝失敗。
   下圖是快應用的初始頁面：

   

4. 如今你會發現一個問題，當修改文件內容後保存，頁面內容沒法自動更新，那如何作到熱更新呢？

   解決方法：在當前目錄下右擊，新打開一個cmder，如圖：
   

   輸入npm run watch自動編譯項目，請使用以下命令：
   npm run watch

   而後從新打開應用，就能夠自動更新了。

   小提示：點擊開始調試沒法沒法自動打開chrome的調試頁面的問題

   1>結束npm run server，從新npm run server，並掃碼
   2>先按返回鍵，點取消關閉調試界面
   

   而後再點擊開始調試，瀏覽器中就會自動彈出界面了（暫時未找到緣由爲何須要這麼操做）

   

   注意：手機必須保持常亮不鎖屏，不然chrome會出現白屏的狀況~

   後續操做稍後更新~ 有什麼問題或者建議能夠給我留言~~