快應用 快速入門

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

通過本節(jié)，你將學會：

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

創(chuàng)建項目

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

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

hap init <ProjectName>

其中<ProjectName>為自定義的項目名稱，如hap init demo

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

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

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

目錄的簡要說明如下：

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

安裝依賴

在項目根目錄下，運行如下命令安裝模塊到node_modules目錄

npm install

編譯項目

手動編譯項目

在項目的根目錄下，運行如下命令進行編譯打包，生成rpk包

npm run build

編譯打包成功后，項目根目錄下會生成文件夾：build、dist

• build：臨時產(chǎn)出，包含編譯后的頁面js，圖片等
• dist：最終產(chǎn)出，包含rpk文件。其實是將build目錄下的資源打包壓縮為一個文件，后綴名為rpk，這個rpk文件就是項目編譯后的最終產(chǎn)出

自動編譯項目

如果希望每次修改源代碼文件后，都自動編譯項目，請使用如下命令：

npm run watch

安裝rpk包

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

若打開調(diào)試器無法點擊按鈕，請升級手機系統(tǒng)到最新版本或安裝平臺預覽版。安裝平臺預覽版詳見文檔環(huán)境搭建

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

掃碼安裝

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

1 啟動HTTP服務器

在終端中新建一個窗口，進入項目的根目錄運行如下命令，啟動本地服務器（默認端口為12306）

npm run server

自定義端口（如：8080）

npm run server -- --port 8080

2 在手機上預覽運行效果

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

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

配置完成后，可點擊在線更新喚起平臺運行rpk包

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

本地安裝

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

1 復制rpk包到手機中

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

2 本地安裝rpk包

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

預覽效果

安裝成功后，效果如下：

總結(jié)

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