快應(yīng)用 快速入門(mén)

了解項(xiàng)目的運(yùn)行流程：編譯時(shí)編譯項(xiàng)目、運(yùn)行時(shí)預(yù)覽效果，掌握基本概念：項(xiàng)目產(chǎn)出rpk文件

通過(guò)本節(jié)，你將學(xué)會(huì)：

• 創(chuàng)建項(xiàng)目
• 安裝依賴
• 編譯項(xiàng)目
• 安裝rpk包
• 預(yù)覽效果

創(chuàng)建項(xiàng)目

創(chuàng)建項(xiàng)目前，請(qǐng)先安裝toolkit工具和調(diào)試器。如未安裝，詳見(jiàn)文檔環(huán)境搭建

安裝toolkit工具后，可通過(guò)全局hap命令創(chuàng)建一個(gè)項(xiàng)目模板，如下所示:

hap init <ProjectName>

其中<ProjectName>為自定義的項(xiàng)目名稱，如hap init demo

命令執(zhí)行后，會(huì)在當(dāng)前目錄下創(chuàng)建<ProjectName>文件夾，作為項(xiàng)目根目錄

這個(gè)項(xiàng)目已經(jīng)包含了項(xiàng)目配置與示例頁(yè)面的初始代碼，項(xiàng)目根目錄主要結(jié)構(gòu)如下：

├── sign                      rpk包簽名模塊
│   └── debug                 調(diào)試環(huán)境
│       ├── certificate.pem   證書(shū)文件
│       └── private.pem       私鑰文件
├── src
│   ├── Common                公用的資源和組件文件
│   │   └── logo.png          應(yīng)用圖標(biāo)
│   ├── Demo                  頁(yè)面目錄
│   |   └── index.ux          頁(yè)面文件，可自定義頁(yè)面名稱
│   ├── app.ux                APP文件，可引入公共腳本，暴露公共數(shù)據(jù)和方法等
│   └── manifest.json         項(xiàng)目配置文件，配置應(yīng)用圖標(biāo)、頁(yè)面路由等
└── package.json              定義項(xiàng)目需要的各種模塊及配置信息

目錄的簡(jiǎn)要說(shuō)明如下：

• src：項(xiàng)目源文件夾
• sign：簽名模塊，當(dāng)前僅有debug簽名，如果內(nèi)測(cè)上線，請(qǐng)?zhí)砑?code>release文件夾，增加線上簽名；簽名生成方法詳見(jiàn)文檔編譯工具

安裝依賴

在項(xiàng)目根目錄下，運(yùn)行如下命令安裝模塊到node_modules目錄

npm install

編譯項(xiàng)目

手動(dòng)編譯項(xiàng)目

在項(xiàng)目的根目錄下，運(yùn)行如下命令進(jìn)行編譯打包，生成rpk包

npm run build

編譯打包成功后，項(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)出

自動(dòng)編譯項(xiàng)目

如果希望每次修改源代碼文件后，都自動(dòng)編譯項(xiàng)目，請(qǐng)使用如下命令：

npm run watch

安裝rpk包

編譯項(xiàng)目產(chǎn)出了rpk包后，請(qǐng)打開(kāi)手機(jī)調(diào)試器。安裝調(diào)試器詳見(jiàn)文檔環(huán)境搭建

若打開(kāi)調(diào)試器無(wú)法點(diǎn)擊按鈕，請(qǐng)升級(jí)手機(jī)系統(tǒng)到最新版本或安裝平臺(tái)預(yù)覽版。安裝平臺(tái)預(yù)覽版詳見(jiàn)文檔環(huán)境搭建

調(diào)試器可使用后，就可以在調(diào)試器上安裝rpk包了。支持以下兩種安裝方式，開(kāi)發(fā)者可根據(jù)場(chǎng)景選擇其一

掃碼安裝

• 適用場(chǎng)景：高頻率更新rpk包
• 優(yōu)點(diǎn)：自動(dòng)更新rpk包，方便快捷
• 缺點(diǎn)：需要開(kāi)發(fā)者啟動(dòng)HTTP服務(wù)器，并確保手機(jī)與PC在同一局域網(wǎng)

1 啟動(dòng)HTTP服務(wù)器

在終端中新建一個(gè)窗口，進(jìn)入項(xiàng)目的根目錄運(yùn)行如下命令，啟動(dòng)本地服務(wù)器（默認(rèn)端口為12306）

npm run server

自定義端口（如：8080）

npm run server -- --port 8080

2 在手機(jī)上預(yù)覽運(yùn)行效果

配置HTTP服務(wù)器地址有兩種方式，以下兩者選其一即可：

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

配置完成后，可點(diǎn)擊在線更新喚起平臺(tái)運(yùn)行rpk包

若提示安裝失敗，請(qǐng)檢查執(zhí)行npm run server的終端窗口是否正常運(yùn)行

本地安裝

• 適用場(chǎng)景：僅預(yù)覽效果或低頻率更新rpk包
• 優(yōu)點(diǎn)：只需將rpk包復(fù)制到手機(jī)中，本地安裝選擇rpk包即可
• 缺點(diǎn)：需手動(dòng)更新rpk包

1 復(fù)制rpk包到手機(jī)中

將<ProjectName>/dist目錄下編譯產(chǎn)出的rpk包通過(guò)USB數(shù)據(jù)線或其他方式，復(fù)制到手機(jī)文件系統(tǒng)中

2 本地安裝rpk包

打開(kāi)調(diào)試器 --> 點(diǎn)擊"本地安裝"，選擇手機(jī)文件系統(tǒng)中的rpk包，并自動(dòng)喚起平臺(tái)運(yùn)行rpk包，查看效果

預(yù)覽效果

安裝成功后，效果如下：

總結(jié)

了解項(xiàng)目的目錄結(jié)構(gòu)，編譯時(shí)通過(guò)編譯工具產(chǎn)出rpk文件，運(yùn)行時(shí)通過(guò)調(diào)試器安裝rpk文件；打通整個(gè)流程后，開(kāi)發(fā)者就可以邊開(kāi)發(fā)邊預(yù)覽效果了