快應用快速入門教程

  3月20日在北京朝陽區的中國大飯店，小米、中興、華爲、金立、聯想、魅族、努比亞、OPPO、vivo、一加，共十家手機廠商聯合召開快應用標準啓動發佈會，標誌着又一個移動應用的新生態的到來。

  這個快應用是啥，我就不贅述了，請自行參看官網的帖子，下面我來把快應用的開發入門相關內容整理一下給你們。

• 花了一夜搞了一個快應用版本的Gank客戶端，當作Demo開源給你們，新手能夠參考一下基礎頁面結構，大佬可無視 ~

---

準備工做

• 快應用的官方開發文檔 : doc.quickapp.cn/ (其實有這個文檔就能夠入門了)
• 一臺利索一點的安卓手機 （是否是前面十大廠商的手機無所謂，只要能連接電腦傳輸文件，裝APK就好了）
• 一臺電腦，你懂得。

---

Step 1.搭建環境

• 安裝Nodejs
  • 須要6.0以上版本，經過node -v能夠查看當前版本，不會安裝的參看安裝教程 (注：不要用8.0版本！)
• 安裝hap-toolkit

  • 執行以下命令

    npm install -g hap-toolkit
    複製代碼

  • 安裝完畢後執行hap -V（V 要大寫）查看是否安裝成功

---

Step 2.新建工程

• 建立工程項目

  • 先cd到你的項目存放目錄

  • 執行項目初始化命令 ( yourProjectName 要替換成你的項目名 )

    hap init yourProjectName
    複製代碼

• 安裝npm依賴

  • cd 到你新建的項目文件夾下，執行以下命令

    npm install
    複製代碼

---

Step 3. 編譯項目

• 查看項目代碼

  • 找一個你本身趁手的IDE打開新建的項目便可（快應用暫時沒有出官方的開發IDE）

  • 工程目錄以下圖

  • 簡單介紹一下（可跳過）

    • src：項目源文件夾
    • src/manifest.json：項目配置文件
    • node_modules：項目的依賴類庫
    • package.json：npm的項目配置文件

• 編譯項目

  • 在你的項目文件夾下，執行以下命令

    npm run build	
    複製代碼

  • 【注意！】大部分第一次執行會遇到以下報錯

  • Error: Cannot find module '/Users/***/***/node_modules/hap-tools/webpack.config.js'

  • 莫慌，執行一次 hap update --force 便可解決, 再執行npm run build進行編譯。

  • 編譯成功之後，工程項目會多處兩個文件夾：

  • build：存放編譯後的頁面js文件和素材

  • dist：存放編譯打包生成的rpk壓縮文件，這個rpk就是快應用的最終執行文件了，提交市場就能夠用它了(提交市場要release版本，後續再說)。

---

Step 4. 真機預覽

• 你的手機須要安裝 快應用調試器 和 平臺預覽版 （下載後用ADB或者直接USB傳輸安裝到手機。注意，兩個apk都要安裝哦！平臺預覽版是模擬快應用的運行時環境的。）

• 安裝前面編譯出來的rpk文件

• 方法一： 本地安裝預覽

  • 將你的工程中/dist目錄下編譯產出的rpk文件經過USB數據線或其餘方式，複製到手機文件系統中。
  • 打開手機上的「快應用調試器」 點擊「本地安裝」 選擇手機文件系統前面複製進來的rpk文件，便可預覽到你的快應用的界面。

• 方法二： 掃碼預覽

  • 在工程目錄下執行以下命令啓動本地服務(默認端口12306)

    npm run server
    複製代碼

  • 若是遇到端口衝突，能夠執行npm run server -- --port 8080自定義端口號（8080可自定義）

  • 服務啓動後，會在終端顯示本地服務地址和對應二維碼

  • 打開手機上的「快應用調試器」，點擊「掃碼安裝」，掃這個二維碼便可安裝快應用進行預覽。

  • 若是遇到二維碼掃碼不成功，也能夠點擊右上角三個豎點的菜單按鈕，選擇「設置」，進入設置界面之後，將服務地址手動輸入，而後返回主界面，點擊在線更新便可進行安裝預覽。

  • 若是提示安裝失敗，建議從新起一遍npm run server 從新來過。

  • 看到以下界面，恭喜你，快應用世界的打門你已經打開了 ~

  結尾：第一篇入門貼就到這裏，十分看好快應用的模式，在碎片化日益嚴重的安卓生態環境下，可以造成這樣一個戰略聯盟，着實不易，不過目前快應用的技術架構基礎和生態鏈還不夠完善，期待它在將來可以大放異彩！

（PS：對快應用感興趣的小夥伴能夠加入咱們的「快應用開發交流羣」的微信羣哦~ ） 額，羣滿了，請各位添加 devislee_lb 微信拉進羣嘍