【聲明：】本文是作者（蘑菇v5）原創(chuàng)，版權(quán)歸作者 蘑菇v5所有掉分，侵權(quán)必究俭缓。本文首發(fā)在簡(jiǎn)書(shū)。如若轉(zhuǎn)發(fā)酥郭，請(qǐng)注明作者和來(lái)源地址华坦！未經(jīng)授權(quán)，嚴(yán)禁私自轉(zhuǎn)載不从！

作者原文地址

一.環(huán)境搭建：

官網(wǎng)地址開(kāi)發(fā)文檔

step1：首先安裝nodejs：

安裝6.0以上版本的nodejs惜姐，官網(wǎng)推薦v6.11.3 LTS，我推薦這個(gè)版本Node v6.13.1 (LTS)椿息，下載鏈接地址歹袁，notejs的“配置”參考我上一篇文章（注意：上一篇的版本是官網(wǎng)推薦的6.11.3，這里要6.13.1寝优，文章鏈接地址

step2：安裝hap-toolkit

通過(guò)npm倉(cāng)庫(kù)安裝条舔，在命令行中執(zhí)行以下命令：
npm install -g hap-toolkit
之后，在命令行中執(zhí)行hap -V會(huì)輸出版本信息乏矾，如0.0.26,表示hap-toolkit安裝成功（注意：是大寫(xiě)的V）

完成以上步驟孟抗，就完成了環(huán)境搭建迁杨。

二：創(chuàng)建HelloWorld項(xiàng)目

step1.創(chuàng)建一個(gè)新的項(xiàng)目

搭建好環(huán)境后，根據(jù)自己的情況夸浅，任意選擇一個(gè)目錄的文件夾仑最，執(zhí)行以下命令：

hap init <ProjectName>

其中<ProjectName>為自定義的項(xiàng)目名稱(chēng)喧务，命令執(zhí)行后卤橄，如果中間有停頓的現(xiàn)象，直接點(diǎn)擊enter鍵就行典徘，之后會(huì)在當(dāng)前目錄下創(chuàng)建<ProjectName>文件夾坯钦，并作為項(xiàng)目根目錄预皇，如下圖所示：

執(zhí)行過(guò)程

目錄地址

step2.安裝npm依賴(lài)

在項(xiàng)目根目錄下，運(yùn)行命令npm install 婉刀，安裝依賴(lài)包（webpack吟温，babel等），效果如下圖：

效果1

效果2

效果3

step3.編譯項(xiàng)目

在項(xiàng)目的根目錄下突颊，運(yùn)行如下命令進(jìn)行編譯打包鲁豪，生成rpk包，效果如下圖：
npm run build

運(yùn)行效果

編譯打包成功后律秃，項(xiàng)目根目錄下會(huì)生成文件夾：build爬橡、dist

• build：臨時(shí)產(chǎn)出，包含編譯后的頁(yè)面js棒动，圖片等
• dist：最終產(chǎn)出糙申，包含rpk文件。其實(shí)是將build目錄下的資源打包壓縮為一個(gè)文件船惨，后綴名為rpk柜裸，這個(gè)rpk文件就是項(xiàng)目編譯后的最終產(chǎn)出

tip：自動(dòng)重新編譯

如果希望每次修改源代碼文件后，都自動(dòng)重新編譯項(xiàng)目粱锐，請(qǐng)使用如下命令：
npm run watch
官網(wǎng)的注意提示：

如果報(bào)錯(cuò)遇到Cannot find module '.../webpack.config.js'疙挺，請(qǐng)重新執(zhí)行一次hap update --force。這是由于高版本的npm在npm install時(shí)怜浅，會(huì)校驗(yàn)并刪除了node_modules下部分文件夾衔统，導(dǎo)致報(bào)錯(cuò)。而hap update --force會(huì)重新復(fù)制hap-toolkit文件夾到node_modules中海雪，作者并沒(méi)遇到過(guò)上述錯(cuò)誤

step4.手機(jī)安裝調(diào)試器

有了rpk包之后，怎么安裝呢舱殿？調(diào)試器APK是一個(gè)app奥裸，下載鏈接地址，在手機(jī)上下載安裝后沪袭，打開(kāi)調(diào)試器APK湾宙，這時(shí)候樟氢，你會(huì)發(fā)現(xiàn)按鈕顏色都是灰的，點(diǎn)擊不了侠鳄。這是正常情況埠啃，還需要安裝一個(gè)平臺(tái)（較新的系統(tǒng)版本中內(nèi)置平臺(tái)正式版，即真實(shí)的運(yùn)行環(huán)境）如下圖所示：

調(diào)試器

step5.手機(jī)安裝平臺(tái)預(yù)覽版

較新的系統(tǒng)版本中內(nèi)置平臺(tái)正式版伟恶，即真實(shí)的運(yùn)行環(huán)境碴开。然而，更新平臺(tái)正式版的時(shí)間周期較長(zhǎng)博秫，開(kāi)發(fā)調(diào)試平臺(tái)新功能可使用平臺(tái)預(yù)覽版潦牛，平臺(tái)預(yù)覽版APK是一個(gè)app應(yīng)用程序，下載鏈接地址 挡育，下載安裝成功后巴碗，你發(fā)現(xiàn)打開(kāi)app，啥也沒(méi)有即寒，一個(gè)白色的背景橡淆，這是正常的現(xiàn)象，切換到后臺(tái)母赵，點(diǎn)擊之前的快應(yīng)用調(diào)試器逸爵，發(fā)現(xiàn)按鈕能夠點(diǎn)擊了。

step6.在平臺(tái)上運(yùn)行rpk包

兩種途徑：HTTP請(qǐng)求和本地安裝市咽，官網(wǎng)推薦第一種痊银。

HTTP請(qǐng)求：

在終端中新建一個(gè)窗口，進(jìn)入項(xiàng)目的根目錄運(yùn)行如下命令施绎，啟動(dòng)本地服務(wù)器（默認(rèn)端口為12306）
npm run server
自定義端口（如：8080）
npm run server -- --port 8080
但是運(yùn)行的時(shí)候遇到了下面的問(wèn)題溯革，問(wèn)題如下圖所示：

遇到的問(wèn)題

因?yàn)檫@個(gè)nodejs的版本是官網(wǎng)提示的6.11.3，版本問(wèn)題啊谷醉，版本需要6.0以上版本致稀，但是不讓使用比較新的8.0.*版本，所以作者折中使用的是6.13.1俱尼，下載完成之后抖单，覆蓋安裝就好了。之后再執(zhí)行npm run server遇八，效果如下圖矛绘，生成了一個(gè)二維碼：

生成的二維碼

之后需要配置HTTP服務(wù)器地址：有兩種方式，以下兩者選其一即可刃永，注意手機(jī)和電腦要在同一網(wǎng)絡(luò)下：

• 打開(kāi)調(diào)試器 --> 點(diǎn)擊"掃碼安裝"货矮，掃描終端窗口中的二維碼即可完成配置（若掃描不成功，可在瀏覽器中打開(kāi)頁(yè)面：http://localhost:<your port>斯够，掃描頁(yè)面中的二維碼）囚玫，作者就是掃碼終端二維碼不成功喧锦，掃碼的網(wǎng)頁(yè)版的是ok的
• 打開(kāi)調(diào)試器 --> 點(diǎn)擊右上角menu --> 設(shè)置，輸入終端窗口中提示的HTTP服務(wù)器地址

配置完成后抓督，若沒(méi)有自動(dòng)喚起平臺(tái)運(yùn)行rpk包燃少，點(diǎn)擊在線(xiàn)更新喚起平臺(tái)運(yùn)行rpk包,若提示安裝失敗，請(qǐng)檢查執(zhí)行npm run server的終端窗口是否正常運(yùn)行
運(yùn)行效果如下圖所示：

點(diǎn)擊app

點(diǎn)擊開(kāi)始調(diào)試

網(wǎng)頁(yè)運(yùn)行情況

至此铃在，快應(yīng)用的helloworld項(xiàng)目就成功運(yùn)行在手機(jī)上了阵具。