開(kāi)發(fā)第一個(gè)快應(yīng)用

閑來(lái)無(wú)事,撩撩新技術(shù)!

參考:【快應(yīng)用開(kāi)發(fā)文檔】

環(huán)境搭建

一、安裝nodejs

需安裝6.0以上版本的nodejs,請(qǐng)從NodeJS官網(wǎng)下載,推薦v6.11.3 LTS

直接打開(kāi)6.11.3的鏈接地址:https://nodejs.org/dist/v6.11.3/

版本目錄.png

注意: 不要使用8.0.版本.這個(gè)版本內(nèi)部ZipStream實(shí)現(xiàn)與node-archive包不兼容,會(huì)引起報(bào)錯(cuò)*

二、安裝hap-toolkit

node.js下載安裝完成后,打開(kāi)命令行窗口

輸入命令npm install -g hap-toolkit

安裝hap-toolkit等待.png

安裝過(guò)程可能會(huì)需要一段時(shí)間,請(qǐng)耐心等待,安裝完成如下圖所示


安裝hap-toolkit完成.png

在命令行中執(zhí)行hap -V會(huì)輸出版本信息表示hap-toolkit安裝成功。

新建項(xiàng)目

一、創(chuàng)建第一個(gè)項(xiàng)目(FirstQuickApp)

找到合適的文件夾,打開(kāi)命令行輸入命令hap init 自定義項(xiàng)目名,出現(xiàn)prompt: Init your Project: (FirstQuickApp)后再次輸入項(xiàng)目名,我這里是由于配置問(wèn)題只能在node_global下執(zhí)行命令

創(chuàng)建第一個(gè)項(xiàng)目.png

創(chuàng)建完成后,在當(dāng)前目錄下可以查找到項(xiàng)目


FirstQuickApp創(chuàng)建完成.png
二、編譯項(xiàng)目

到項(xiàng)目根目錄FirstQuickApp下,打開(kāi)命令行輸入命令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)試器

安裝后,打開(kāi)調(diào)試器


快應(yīng)用調(diào)試器.png

說(shuō)明如下:

  • 掃碼安裝:配置HTTP服務(wù)器地址,下載rpk包,并喚起平臺(tái)運(yùn)行rpk包
  • 本地安裝:選擇手機(jī)文件系統(tǒng)中的rpk包,并喚起平臺(tái)運(yùn)行rpk包
  • 在線更新:重新發(fā)送HTTP請(qǐng)求,更新rpk包,并喚起平臺(tái)運(yùn)行rpk包
  • 開(kāi)始調(diào)試:?jiǎn)酒鹌脚_(tái)運(yùn)行rpk包,并啟動(dòng)遠(yuǎn)程調(diào)試工具

注意:若無(wú)法正常使用調(diào)試器,請(qǐng)升級(jí)手機(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ù)覽版

注意:如果你安裝后打開(kāi)看到的是一個(gè)空白頁(yè)面,屬于正常情況,退出打開(kāi)調(diào)試器,你會(huì)發(fā)現(xiàn)已經(jīng)可以點(diǎn)擊了

三、在平臺(tái)運(yùn)行rpk包

通過(guò)調(diào)試器,可以看出有兩種方式:掃碼安裝、本地安裝。

1.本地安裝

在FirstQuickApp/dist/下找到rpk包,復(fù)制到手機(jī)中,再點(diǎn)擊調(diào)試器本地安裝,選擇該rpk包即可。

2. 掃碼安裝(推薦)

進(jìn)入項(xiàng)目的根目錄打開(kāi)命令行,執(zhí)行命令npm run server,啟動(dòng)本地服務(wù)器(默認(rèn)端口為12306)。

如果想要修改端口號(hào)(如:8080),執(zhí)行命令npm run server -- --port 8080

上述操作會(huì)在終端展示一個(gè)生成http服務(wù)的二維碼和服務(wù)器地址,手機(jī)預(yù)覽效果也有兩種途徑:

  • 快應(yīng)用調(diào)試器 ==> 右上角設(shè)置 ==> 輸入服務(wù)器地址 (請(qǐng)確保手機(jī)與服務(wù)器在相同網(wǎng)段)
  • 快應(yīng)用調(diào)試器 ==> 掃碼安裝 ==> 掃描命令行窗口生成的二維碼(如果掃描失敗,瀏覽器輸入服務(wù)器地址打開(kāi)頁(yè)面,掃描頁(yè)面中的二維碼)

配置完成后,若沒(méi)有自動(dòng)喚起平臺(tái)運(yùn)行rpk包,點(diǎn)擊在線更新喚起平臺(tái)運(yùn)行rpk包。

建議:從項(xiàng)目根目錄打開(kāi)兩個(gè)命令行窗口,一個(gè)運(yùn)行npm run watch可以自動(dòng)編譯更新rpk,一個(gè)運(yùn)行npm run server可以在瀏覽器查看調(diào)試。

編輯開(kāi)發(fā)

只要能編輯,哪怕記事本也行。官方推薦兩款開(kāi)發(fā)工具:Visual Studio CodeWebStorm

為了方便開(kāi)發(fā),如果使用VSCode添加擴(kuò)展hap Extension;如果使用WebStorm,在設(shè)置中增加對(duì)ux格式文件的支持。

參考 【代碼編輯配置】

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,811評(píng)論 25 708
  • 【聲明:】本文是作者(蘑菇v5)原創(chuàng),版權(quán)歸作者 蘑菇v5所有,侵權(quán)必究。本文首發(fā)在簡(jiǎn)書(shū)。如若轉(zhuǎn)發(fā),請(qǐng)注明作者和來(lái)...
    蘑菇v5閱讀 2,249評(píng)論 0 0
  • 什么是 NPM npm之于Node,就像pip之于Python,gem之于Ruby,composer之于PHP。 ...
    ihoey閱讀 6,264評(píng)論 2 36
  • 春夏秋冬,寒暑交替,一年四季,亙古不變,無(wú)可逆轉(zhuǎn)。 期待中的三月,充滿糾結(jié)的三月,漸行漸遠(yuǎn)。漸行漸遠(yuǎn)的歲月一同帶走...
    藍(lán)色海洋123閱讀 293評(píng)論 0 2
  • 一覺(jué)睡到了8:00,感覺(jué)好舒服。昨晚和美玲、任利的聊天:看到利爺不斷前進(jìn)的步伐,只是覺(jué)得自己在未來(lái)的道路上應(yīng)...
    娜娜是最美的小仙女閱讀 179評(píng)論 0 0