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

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

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

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

項(xiàng)目介紹

安裝 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í)砑觬elease文件夾，增加線上簽名；簽名生成方法詳見(jiàn)文檔使用命令行，發(fā)布前打包

配置信息

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

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

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

推薦采用 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)用版本名稱、版本號(hào)（versionName、versionCode）

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

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

應(yīng)用版本號(hào)為整數(shù)，從1開(kāi)始，每次更新上架請(qǐng)自增 1

示例如下：

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

支持的最小平臺(tái)版本號(hào)（minPlatformVersion）

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

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

示例如下：

{
  "minPlatformVersion": 1000
}

注意：

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

配置接口列表（features）

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

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

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

新增頁(yè)面

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

router

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

首頁(yè) (router.entry)

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

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

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

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

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

頁(yè)面路由對(duì)象（router.pages）

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

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

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

示例如下：

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

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

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

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

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

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

display

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

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

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

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

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

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

頁(yè)面私有的 UI 顯示

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

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

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

引入依賴

在快應(yīng)用開(kāi)發(fā)過(guò)程中，經(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 通過(guò) @import 方式引入

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

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

引入自定義組件

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

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

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

最終頁(yè)面定義與引入方式如下：

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

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