快應(yīng)用快速入門教程
這節(jié)課程的大綱如下：
- 環(huán)境搭建
- 創(chuàng)建項目
- 安裝依賴
- 編譯項目
- 安裝rpk包
- 預(yù)覽效果
環(huán)境搭建
- NodeJS安裝
mac首先安裝NodeJS,并且版本是6.0以上的，可以從NodeJS官網(wǎng)下載，官網(wǎng)會根據(jù)你的電腦，自動跳轉(zhuǎn)到mac版，windows版本，以及Linux版本，我的電腦是mac系統(tǒng)，顯示頁面如下：
我選擇了推薦的版本，雙擊下載點擊剛才下載好的dmg文件，安裝成功后，在終端檢測你安裝好的node的版本。
node -v
安裝好nodeJS,順帶安裝好NodeJS包管理工具 npm,檢測npm的版本。npm 是hap，編譯打包比用到命令，所以一定確定安裝好。
npm -v
- 快應(yīng)用安裝環(huán)境
到此，接下來安裝快應(yīng)用的相應(yīng)包hap-toolKit,通過npm倉庫安裝，在終端執(zhí)行命令如下：
npm install -g hap-toolkit
安裝成功后。用命令 hap -V(必須是大寫)來檢測安裝是否成功。
hap -V
安裝成功提示如下：
- 手機安裝調(diào)試器
你的手機需要安裝 快應(yīng)用調(diào)試器 和 平臺預(yù)覽版 （下載后用ADB或者直接USB傳輸安裝到手機。注意，兩個apk都要安裝哦！平臺預(yù)覽版是模擬快應(yīng)用的運行時環(huán)境的。）
在手機上安裝并打開調(diào)試器，按鈕功能如下：
- 掃碼安裝：配置HTTP服務(wù)器地址，下載rpk包，并喚起平臺運行rpk包
- 本地安裝：選擇手機文件系統(tǒng)中的rpk包，并喚起平臺運行rpk包
- 在線更新：重新發(fā)送HTTP請求，更新rpk包，并喚起平臺運行rpk包
- 開始調(diào)試：喚起平臺運行rpk包，并啟動遠程調(diào)試
截圖如下：
創(chuàng)建項目
在終端cd到你的項目存放目錄
-
執(zhí)行項目初始化命令（yourProjectName 要替換成你的項目名）
hap init yourProjectName
安裝依賴
cd到你新建的項目文件夾下，執(zhí)行如下命令
npm install
編譯項目
-
查看項目代碼結(jié)構(gòu)如下：
-
簡單介紹一下代碼結(jié)構(gòu)
- src:項目源文件夾
- src/mainfest.json:項目配置文件
- node_modules:項目的依賴類庫
- package.json:npm的項目配置文件
在你的項目文件夾下，執(zhí)行如下命令
npm run build
注意
大部分第一執(zhí)行會遇到如下報錯
Error: Cannot find module '/Users/***/***/node_modules/hap-tools/webpack.config.js'
解決以上的問題。執(zhí)行一次 hap update --force即可解決，再執(zhí)行npm run build 進行編譯。
編譯成功后，工程項目會多出兩個文件夾：
- build: 存放編譯n后的頁面js文件和素材
- dist: 存放編譯打出包的rpk壓縮文件，這個rpk就是快應(yīng)用的最終執(zhí)行文件了，提交市場就可以用它了（提交市場要 release版本）
安裝rpk包
在手機上安裝的快應(yīng)用調(diào)試器，安裝前面編譯出來的rpk文件。
-
方法一：本地安裝預(yù)覽
- 將你的工程中/dist目錄下編譯產(chǎn)生的rpk文件通過USB數(shù)據(jù)線或其他方式，復(fù)制到手機文件系統(tǒng)中。
- 打開手機上的“快應(yīng)用調(diào)試器”點擊“本地安裝”選擇手機文件系統(tǒng)前面復(fù)制進來的rpk文件，即可預(yù)覽到你的快應(yīng)用的界面。
方法二：掃碼預(yù)覽
在工程目錄下執(zhí)行如下命令啟動本地服務(wù)（默認(rèn)端口12306）
npm run server
注意
如果遇到端口沖突，可以執(zhí)行npm run server --port 8080 自定義端口
服務(wù)啟動后，會在終端顯示本地服務(wù)地址和對應(yīng)二維碼
打開手機上的“快應(yīng)用調(diào)試器”，點擊“掃碼安裝”，掃這個二維碼即可安裝快應(yīng)用進行預(yù)覽。
預(yù)覽效果
安裝后效果如下：
