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

閑來無事,撩撩新技術(shù)!

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

環(huán)境搭建

一腮介、安裝nodejs

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

直接打開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下載安裝完成后呛凶,打開命令行窗口

輸入命令npm install -g hap-toolkit

安裝hap-toolkit等待.png

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


安裝hap-toolkit完成.png

在命令行中執(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)建第一個(gè)項(xiàng)目.png

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


FirstQuickApp創(chuàng)建完成.png
二殷蛇、編譯項(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)試器


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

說明如下:

  • 掃碼安裝:配置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 CodeWebStorm

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

參考 【代碼編輯配置】

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市淘菩,隨后出現(xiàn)的幾起案子遵班,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,602評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件狭郑,死亡現(xiàn)場離奇詭異腹暖,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)愿阐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,442評論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來趾疚,“玉大人缨历,你說我怎么就攤上這事〔诼螅” “怎么了辛孵?”我有些...
    開封第一講書人閱讀 152,878評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長赡磅。 經(jīng)常有香客問我魄缚,道長,這世上最難降的妖魔是什么焚廊? 我笑而不...
    開封第一講書人閱讀 55,306評論 1 279
  • 正文 為了忘掉前任冶匹,我火速辦了婚禮,結(jié)果婚禮上咆瘟,老公的妹妹穿的比我還像新娘嚼隘。我一直安慰自己,他們只是感情好袒餐,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,330評論 5 373
  • 文/花漫 我一把揭開白布飞蛹。 她就那樣靜靜地躺著,像睡著了一般灸眼。 火紅的嫁衣襯著肌膚如雪卧檐。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,071評論 1 285
  • 那天焰宣,我揣著相機(jī)與錄音霉囚,去河邊找鬼。 笑死匕积,一個(gè)胖子當(dāng)著我的面吹牛佛嬉,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播闸天,決...
    沈念sama閱讀 38,382評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼暖呕,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了苞氮?” 一聲冷哼從身側(cè)響起湾揽,我...
    開封第一講書人閱讀 37,006評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后库物,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體霸旗,經(jīng)...
    沈念sama閱讀 43,512評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,965評論 2 325
  • 正文 我和宋清朗相戀三年戚揭,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了诱告。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,094評論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡民晒,死狀恐怖精居,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情潜必,我是刑警寧澤靴姿,帶...
    沈念sama閱讀 33,732評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站磁滚,受9級特大地震影響佛吓,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜垂攘,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,283評論 3 307
  • 文/蒙蒙 一维雇、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧晒他,春花似錦谆沃、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,286評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至掂名,卻和暖如春据沈,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背饺蔑。 一陣腳步聲響...
    開封第一講書人閱讀 31,512評論 1 262
  • 我被黑心中介騙來泰國打工锌介, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人猾警。 一個(gè)月前我還...
    沈念sama閱讀 45,536評論 2 354
  • 正文 我出身青樓孔祸,卻偏偏與公主長得像,于是被迫代替她去往敵國和親发皿。 傳聞我的和親對象是個(gè)殘疾皇子崔慧,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,828評論 2 345

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

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,515評論 25 707
  • 【聲明:】本文是作者(蘑菇v5)原創(chuàng),版權(quán)歸作者 蘑菇v5所有穴墅,侵權(quán)必究惶室。本文首發(fā)在簡書温自。如若轉(zhuǎn)發(fā),請注明作者和來...
    蘑菇v5閱讀 2,186評論 0 0
  • 什么是 NPM npm之于Node皇钞,就像pip之于Python,gem之于Ruby,composer之于PHP悼泌。 ...
    ihoey閱讀 6,248評論 2 36
  • 春夏秋冬,寒暑交替夹界,一年四季馆里,亙古不變,無可逆轉(zhuǎn)可柿。 期待中的三月鸠踪,充滿糾結(jié)的三月,漸行漸遠(yuǎn)趾痘。漸行漸遠(yuǎn)的歲月一同帶走...
    藍(lán)色海洋123閱讀 284評論 0 2
  • 一覺睡到了8:00慢哈,感覺好舒服蔓钟。昨晚和美玲永票、任利的聊天:看到利爺不斷前進(jìn)的步伐,只是覺得自己在未來的道路上應(yīng)...
    娜娜是最美的小仙女閱讀 168評論 0 0