閑來無事,撩撩新技術(shù)!
環(huán)境搭建
一腮介、安裝nodejs
需安裝6.0以上版本的nodejs置森,請從NodeJS官網(wǎng)下載斗埂,推薦v6.11.3 LTS
直接打開6.11.3的鏈接地址:https://nodejs.org/dist/v6.11.3/
注意: 不要使用8.0.版本.這個(gè)版本內(nèi)部ZipStream實(shí)現(xiàn)與node-archive包不兼容,會(huì)引起報(bào)錯(cuò)*
二凫海、安裝hap-toolkit
node.js下載安裝完成后呛凶,打開命令行窗口
輸入命令npm install -g hap-toolkit
安裝過程可能會(huì)需要一段時(shí)間,請耐心等待行贪,安裝完成如下圖所示
在命令行中執(zhí)行hap -V
會(huì)輸出版本信息表示hap-toolkit安裝成功漾稀。
新建項(xiàng)目
一、創(chuàng)建第一個(gè)項(xiàng)目(FirstQuickApp)
找到合適的文件夾建瘫,打開命令行輸入命令hap init 自定義項(xiàng)目名
崭捍,出現(xiàn)prompt: Init your Project: (FirstQuickApp)
后再次輸入項(xiàng)目名,我這里是由于配置問題只能在node_global下執(zhí)行命令
創(chuàng)建完成后啰脚,在當(dāng)前目錄下可以查找到項(xiàng)目
二殷蛇、編譯項(xiàng)目
到項(xiàng)目根目錄FirstQuickApp
下,打開命令行輸入命令npm install
安裝依賴包橄浓;
再輸入npm run build
編譯生成rpk包晾咪;
這樣就已經(jīng)完成了第一個(gè)快應(yīng)用的創(chuàng)建和打包
如果希望每次修改源代碼文件后,都自動(dòng)重新編譯項(xiàng)目贮配,可繼續(xù)輸入命令npm run watch
谍倦;
調(diào)試應(yīng)用
一、手機(jī)安裝調(diào)試器
調(diào)試器APK是一個(gè)Android應(yīng)用程序泪勒,下載地址 快應(yīng)用調(diào)試器
安裝后昼蛀,打開調(diào)試器
說明如下:
- 掃碼安裝:配置HTTP服務(wù)器地址,下載rpk包圆存,并喚起平臺(tái)運(yùn)行rpk包
- 本地安裝:選擇手機(jī)文件系統(tǒng)中的rpk包叼旋,并喚起平臺(tái)運(yùn)行rpk包
- 在線更新:重新發(fā)送HTTP請求,更新rpk包沦辙,并喚起平臺(tái)運(yùn)行rpk包
- 開始調(diào)試:喚起平臺(tái)運(yùn)行rpk包夫植,并啟動(dòng)遠(yuǎn)程調(diào)試工具
注意:若無法正常使用調(diào)試器,請升級手機(jī)系統(tǒng)到最新版本或安裝平臺(tái)預(yù)覽版
二、手機(jī)安裝平臺(tái)預(yù)覽版
較新的系統(tǒng)版本中內(nèi)置平臺(tái)正式版详民,即真實(shí)的運(yùn)行環(huán)境延欠。如果你的調(diào)試器可正常使用,這步可不必理會(huì)沈跨。
平臺(tái)預(yù)覽版同樣是一個(gè)apk由捎,下載地址 平臺(tái)預(yù)覽版
注意:如果你安裝后打開看到的是一個(gè)空白頁面,屬于正常情況饿凛,退出打開調(diào)試器狞玛,你會(huì)發(fā)現(xiàn)已經(jīng)可以點(diǎn)擊了
三、在平臺(tái)運(yùn)行rpk包
通過調(diào)試器涧窒,可以看出有兩種方式:掃碼安裝心肪、本地安裝。
1.本地安裝
在FirstQuickApp/dist/下找到rpk包纠吴,復(fù)制到手機(jī)中蒙畴,再點(diǎn)擊調(diào)試器本地安裝,選擇該rpk包即可呜象。
2. 掃碼安裝(推薦)
進(jìn)入項(xiàng)目的根目錄打開命令行膳凝,執(zhí)行命令npm run server
,啟動(dòng)本地服務(wù)器(默認(rèn)端口為12306)恭陡。
如果想要修改端口號(如:8080)蹬音,執(zhí)行命令npm run server -- --port 8080
上述操作會(huì)在終端展示一個(gè)生成http服務(wù)的二維碼和服務(wù)器地址,手機(jī)預(yù)覽效果也有兩種途徑:
- 快應(yīng)用調(diào)試器 ==> 右上角設(shè)置 ==> 輸入服務(wù)器地址 (請確保手機(jī)與服務(wù)器在相同網(wǎng)段)
- 快應(yīng)用調(diào)試器 ==> 掃碼安裝 ==> 掃描命令行窗口生成的二維碼(如果掃描失敗休玩,瀏覽器輸入服務(wù)器地址打開頁面著淆,掃描頁面中的二維碼)
配置完成后,若沒有自動(dòng)喚起平臺(tái)運(yùn)行rpk包拴疤,點(diǎn)擊在線更新喚起平臺(tái)運(yùn)行rpk包永部。
建議:從項(xiàng)目根目錄打開兩個(gè)命令行窗口,一個(gè)運(yùn)行npm run watch
可以自動(dòng)編譯更新rpk呐矾,一個(gè)運(yùn)行npm run server
可以在瀏覽器查看調(diào)試苔埋。
編輯開發(fā)
只要能編輯,哪怕記事本也行蜒犯。官方推薦兩款開發(fā)工具:Visual Studio Code 和 WebStorm
為了方便開發(fā)组橄,如果使用VSCode添加擴(kuò)展hap Extension
;如果使用WebStorm罚随,在設(shè)置中增加對ux格式文件的支持玉工。
參考 【代碼編輯配置】