是前端仍是Android？快應用 快速入門與初步分析

前陣子微信小程序的推出快速佔據了Android桌面，手機廠商們坐不住了，爲了搶回移動端應用分發入口，前幾天中國通訊院等協會聯合小米、華爲、OPPO等一衆手機廠商共同發佈了「快應用」。

廢話不說，先甩兩個網址：

• 快應用官網
• 開發文檔

文檔是最權威的，建議你們在看完此文章後也去看看文檔，在這裏我給你們演示一個。

此文章適合不熟悉Android開發的前端工程師和不熟悉前端開發的Android工程師閱讀。

0.環境搭建

1. 準備一個Android手機，否則等下無法測試，用Android模擬器或許也能夠，沒測試過。
2. 安裝nodejs。這是如今基本必備的前端開發環境，去nodejs官網下載安裝就好，快應用官方推薦版本是v6.11.3 LTS，另外，快應用官方提醒：不要使用8.0.*版本．這個版本內部ZipStream實現與node-archive包不兼容，會引發報錯，我電腦裏原本就有8.9的版本，懶得安裝低版本了，跑流程應該是沒問題的。
3. 安裝hap-toolkit。這是快應用的命令環境，執行命令行npm install -g hap-toolkit(PS：我用windows，用cmd執行，Mac用本身的命令行執行工具就能夠啦)
4. 測試命令環境是否成功，輸入命令hap -V，能看到版本號就說明hap-toolkit安裝成功了。

1.建立文件夾

例如testhap，我用的是windows平臺，因此就用cmd打開啦，Mac不用cmd差異應該也不大。

2.建立模板工程項目

輸入命令hap init <ProjectName>
必須輸入項目名(差評:人家npm init 能夠使用當前目錄的)，而後會提示Init your Project，直接回車就能夠啦。

完成後長這樣：

目錄結構說明(截圖內容來自官方文檔)：

3.安裝依賴包

切換到項目根目錄，我是testPro，執行命令npm install，等待安裝完便可，若是實在太慢能夠使用國內鏡像cnpm試試，具體本身去網上找找教程吧。

安裝好的依賴都在node_modules目錄下，通常不須要咱們去管。

4.編譯打包

根目錄執行命令npm run build生成rpk包，這裏可能會報錯，例如 Cannot find module '.../webpack.config.js'，遇到了執行命令hap update --force便可，而後從新執行npm run build。

完成後會生產兩個目錄build、dist。

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

5.安裝調試器和預覽平臺

這是用來作調試的，是apk文件，即Android安裝文件。

• 下載調試器 (連接失效就去官網下載)
• 下載預覽平臺 (連接失效就去官網下載)

必須兩個都安裝了，否則一個是按鈕不能點擊，一個是白板一片。

6.運行第4步生成的rpk包

有兩種方式：

• HTTP請求：開發者啓動HTTP服務器，打開調試器，點擊掃碼安裝配置HTTP服務器地址，下載rpk包，並喚起平臺運行rpk包
• 本地安裝：開發者將rpk包拷貝到手機文件系統，打開調試器，點擊本地安裝選擇rpk包，並喚起平臺運行rpk包

這裏採用「HTTP請求」：

1. 執行命令npm run server -- --port 502
   端口能夠自定義，執行npm run server會使用默認端口12306(好眼熟的樣子)，至於我爲何用502，不告訴你哈哈哈~
   完成後會生成一個HTTP地址和二維碼，來看看cmd不忍直視的二維碼，鄙視臉~
   (盜張圖，侵刪~)
   
   
   建議用vsCode打開項目，用終端執行生成，二維碼會好看不少，vsCode也很好用。

2. 配置HTTP服務器地址
   打開調試器(剛纔安裝在手機的那個軟件) ，而後：(二選一)

   • 點擊"掃碼安裝"，掃描終端窗口中的二維碼便可完成配置（若掃描不成功，可在瀏覽器中打開頁面：http://localhost:<your port>，掃描頁面中的二維碼）
   • 點擊右上角menu --> 設置，輸入終端窗口中提示的HTTP服務器地址
3. 配置完成後，若沒有自動喚起平臺運行rpk包，點擊在線更新按鈕便可，若提示安裝失敗，請檢查執行npm run server的終端窗口是否正常運行。(在線更新按鈕多點幾回吧，可能會延遲)
4. 而點擊開始調試按鈕，則可打開chrome devtools調試界面，詳見文檔調試工具介紹，前端er應該不陌生。

到這裏基本就算完了，詳細的開發指南看這裏。

---

如今咱們來看看這個「快應用」是什麼鬼，這裏只是簡單瀏覽一下，未做深刻分析，可能有誤。

• 先看看根目錄結構：
  

  disk、node_modules、以及package等等，不就是常見的前端項目文件夾和文件嗎，至於build和src，前端和Android都很熟悉。

• build目錄裏面看看：
  

  這裏是打包時生成的一些臨時文件，js和map(源碼映射文件)。manifest是什麼呢，作Android開發的小夥伴都認識，清單文件啊這是，只是Android的是XML文件，這裏的是JSON文件。

  • 看看這個JSON文件裏面：
    

    包名、應用名、版本號、版本名、最低支持平臺、應用圖標都齊了。

  • 繼續看：
    

    頁面路由配置，有點像Vue，又不像，裏面指定組件。

  • 看看還有什麼：
    

    一些基本的頁面配置，看起來像微信小程序的json配置文件，又不太像。

總的來講，這個manifest.json文件就是Vue、微信小程序、Android清單文件的混合體，用來描述應用和作一些基本配置。

• dist目錄：
  

  打包後的輸出目錄，裏面有一個rpk文件，嗯，Android打包後是apk文件，好曖昧的擴展名╮(╯▽╰)╭

• node_modules目錄：
  

  這裏都是npm安裝後的依賴，相似於Android開發的jar包，裏面的東西出了名的多，光剛纔建立個基本項目就有700+的文件夾。

• sign目錄：
  
  這是rpk包的簽名模塊，相似於Android裏的簽名文件，這裏是調試時候用的，發佈正式版估計也要使用另外的文件。

• src目錄：
  

  跟build目錄差很少，基本就是按src結構複製一份過去build。固然，這裏的是ux文件，編譯打包時會把src裏面的ux文件抽取出來生成js文件，不知道可不能夠分別抽取爲js、css、html呢，沒試過哈

  • ux文件裏的內容：
    這結構template、style、script目測跟vue一個樣啊
    
• 剩下這堆就不說了：
  

總的來講，我的目測，這個「快應用」就是借鑑了Android、Vue、微信小程序的綜合體，至於有沒有借鑑其餘的框架什麼的，做者見識有限，不清楚哈。

若是你還想了解更多，去看官方文檔哈，裏面纔是最權威的。