快應(yīng)用 項(xiàng)目結(jié)構(gòu)詳解

本文對項(xiàng)目的結(jié)構(gòu)及相關(guān)進(jìn)行了講解，包括快應(yīng)用文件結(jié)構(gòu)講解，配置增加頁面，引入依賴等

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

• 項(xiàng)目介紹
• 配置信息
• 新增頁面
• 引入依賴

項(xiàng)目介紹

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

hap init <ProjectName>

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

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

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

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

目錄的簡要說明如下：

• src：項(xiàng)目源文件夾
• sign：簽名模塊，當(dāng)前僅有debug簽名，如果內(nèi)測上線，請?zhí)砑觬elease文件夾，增加線上簽名；簽名生成方法詳見文檔使用命令行，發(fā)布前打包

配置信息

每個(gè)應(yīng)用都要有專屬的名稱，圖標(biāo)等，這些信息都需要在manifest.json文件中配置。詳見文檔manifest 文件

應(yīng)用包名（package）

應(yīng)用包名，是區(qū)別于其他應(yīng)用的唯一標(biāo)識

推薦采用 com.company.module 的格式，示例如下：

{
  "package": "com.example.demo"
}

應(yīng)用名稱（name）

應(yīng)用名稱，6 個(gè)漢字以內(nèi)，與應(yīng)用商店保存的名稱一致；框架提供保存到桌面的功能，桌面上顯示的應(yīng)用名即為此屬性

示例如下：

{
  "name": "發(fā)票小助手"
}

應(yīng)用圖標(biāo)（icon）

規(guī)則為正方形（不能是圓角），且務(wù)必?zé)o白邊

{
  "icon": "/Common/logo.png"
}

應(yīng)用版本名稱、版本號（versionName、versionCode）

應(yīng)用版本名稱、版本號為開發(fā)者的應(yīng)用包維護(hù)的版本信息

應(yīng)用版本名稱為主版本.次版本格式

應(yīng)用版本號為整數(shù)，從1開始，每次更新上架請自增 1

示例如下：

{
  "versionName": "1.0",
  "versionCode": 1
}

支持的最小平臺版本號（minPlatformVersion）

支持的最小平臺版本號為非必填項(xiàng)，標(biāo)識開發(fā)者的 rpk 包兼容支持的最小運(yùn)行平臺版本

當(dāng)使用了 1000 及以上的平臺版本新增特性時(shí)，就必須確保 minPlatformVersion 最低為該平臺版本號，避免上線后在更低版本平臺上運(yùn)行出錯(cuò)

示例如下：

{
  "minPlatformVersion": 1000
}

注意：

• 若項(xiàng)目配置文件中的 minPlatformVersion 低于 1000，請?jiān)谔釡y前下載安裝快應(yīng)用平臺內(nèi)測版，自測通過后提測
• 以快應(yīng)用 minPlatformVersion:1040，用戶版本 1020 為例:該應(yīng)用線上存在 minPlatformVersion <= 1020 版本，該用戶只可以搜索和使用 minPlatformVersion <= 1020 版本中的最新版本;該應(yīng)用線上只存在 minPlatformVersion:1040 版本，該用戶可以搜索到minPlatformVersion ：1040版本，點(diǎn)擊打開會提醒用戶升級版本，用戶在升級之后可打開 1040 版本。

配置接口列表（features）

在使用接口時(shí)，需要先在 manifest 中聲明接口。在每個(gè)接口文檔的頂部，都附有聲明接口的配置代碼

以 fetch 網(wǎng)絡(luò)請求為例，示例如下：

{
  "features": [{ "name": "system.fetch" }]
}

新增頁面

新增及配置頁面，需要依賴 manifest.json 中 router 及 display 配置

router

router，路由，用于定義頁面的實(shí)際地址、跳轉(zhuǎn)地址。如果 ux 頁面沒有配置路由，則不參與項(xiàng)目編譯。一個(gè)目錄下最多只能存在一個(gè)主頁面文件（不包括組件文件）

首頁 (router.entry)

首頁，即應(yīng)用平臺啟動(dòng)時(shí)默認(rèn)打開的頁面。首頁需配置為應(yīng)用中某頁面的名稱，即在 <ProjectName>/src 目錄下，頁面目錄的相對路徑

假設(shè)工程根目錄如下所示

└── src
    └── Demo                  頁面目錄，存放各自頁面私有的資源文件和組件文件
        └── index.ux          頁面文件，文件名不必與父文件夾相同（推薦index.ux）

假設(shè)首頁為 Demo 目錄下的 index.ux 文件，則首頁對應(yīng)的頁面名稱為Demo

{
  "router": {
    "entry": "Demo"
  }
}
`

頁面路由對象（router.pages）

頁面路由對象，key 為頁面名稱（<ProjectName>/src 目錄下，頁面目錄的相對路徑），value 為頁面具體路由配置，key 不要重復(fù)

頁面具體路由配置（router.pages 的 value）包括以下屬性：

• component：頁面對應(yīng)的 ux 文件名
• path：頁面路徑，不填則默認(rèn)為頁面名稱（<ProjectName>/src 目錄下，頁面目錄的相對路徑）

示例如下：

假設(shè)工程根目錄如下所示

└── src
    |── Demo                  頁面目錄，存放各自頁面私有的資源文件和組件文件
    |   └── index.ux         頁面文件，文件名不必與父文件夾相同（推薦index.ux）
    └── Doc
        └── Layout            頁面目錄，存放各自頁面私有的資源文件和組件文件
            └── index.ux     頁面文件，文件名不必與父文件夾相同（推薦index.ux）

當(dāng)頁面名稱（router.pages 的 key）為Demo時(shí)，對應(yīng)的頁面配置（router.pages 的 value）包括：

• component：頁面對應(yīng)的 ux 文件名index
• path：頁面路徑，默認(rèn)為頁面名稱Demo

{
  "router": {
    "pages": {
      "Demo": {
        "component": "index"
      },
      "Doc/Layout": {
        "component": "index"
      }
    }
  }
}

現(xiàn)在，開發(fā)者就可以通過/Demo訪問到 Demo 目錄下的 index.ux 頁面了

display

display，UI 顯示，用于定義與 UI 顯示相關(guān)的配置。支持定義：頁面公用的默認(rèn) UI 顯示、頁面私有的 UI 顯示

頁面公用的默認(rèn) UI 顯示

頁面公用的默認(rèn) UI 顯示，即被所有頁面共享

以標(biāo)題欄文字的配置為例：

{
  "display": {
    "titleBarText": "頁面公用的默認(rèn)標(biāo)題"
  }
}

未配置私有標(biāo)題的頁面，標(biāo)題欄文字均將顯示為頁面公用的默認(rèn)標(biāo)題

頁面私有的 UI 顯示

頁面私有的 UI 顯示，在display.pages對象下配置：key 為頁面名稱（與路由中的頁面名稱保持一致），value 為頁面私有的 UI 顯示

以標(biāo)題欄文字的配置為例：

{
  "display": {
    "pages": {
      "Demo": {
        "titleBarText": "Demo頁面的標(biāo)題"
      }
    }
  }
}

引入依賴

在快應(yīng)用開發(fā)過程中，經(jīng)常需要引入依賴

引入 js

快應(yīng)用中支持 ES6 的 module 標(biāo)準(zhǔn)，使用 import 引入 js 依賴，同時(shí)支持 CommonJs 規(guī)范，使用 require 引入 js 依賴

// 首先在 `manifest.json` 中配置 `fetch` 接口

// require引入
const fetch = require('@system.fetch')

// import引入
import fetch from '@system.fetch'

引入 css

快應(yīng)用支持 css 通過 @import 方式引入

// 引入外部css文件
@import './style.css';

// 引入外部less文件
@import './style.less';

引入自定義組件

框架引入自定義組件的方式是通過 <import> 標(biāo)簽完成的，如下面代碼所示

<import name="comp-part1" src="./part1"></import>

<import> 標(biāo)簽中的的 src 屬性指定自定義組件的地址，name屬性指定在 <template> 組件中引用該組件時(shí)使用的標(biāo)簽名稱

最終頁面定義與引入方式如下：

<import name="my-component" src="./myComponent"></import>

<template>
  <div>
    <my-component></my-component>
  </div>
</template>
</script>