快應用 項目結構詳解

本文對項目的結構及相關進行了講解，包括快應用文件結構講解，配置增加頁面，引入依賴等

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

• 項目介紹
• 配置信息
• 新增頁面
• 引入依賴

項目介紹

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

hap init <ProjectName>

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

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

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

├── sign                      rpk包簽名模塊
│   └── debug                 調試環(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簽名，如果內測上線，請?zhí)砑觬elease文件夾，增加線上簽名；簽名生成方法詳見文檔使用命令行，發(fā)布前打包

配置信息

每個應用都要有專屬的名稱，圖標等，這些信息都需要在manifest.json文件中配置。詳見文檔manifest 文件

應用包名（package）

應用包名，是區(qū)別于其他應用的唯一標識

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

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

應用名稱（name）

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

示例如下：

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

應用圖標（icon）

規(guī)則為正方形（不能是圓角），且務必無白邊

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

應用版本名稱、版本號（versionName、versionCode）

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

應用版本名稱為主版本.次版本格式

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

示例如下：

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

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

支持的最小平臺版本號為非必填項，標識開發(fā)者的 rpk 包兼容支持的最小運行平臺版本

當使用了 1000 及以上的平臺版本新增特性時，就必須確保 minPlatformVersion 最低為該平臺版本號，避免上線后在更低版本平臺上運行出錯

示例如下：

{
  "minPlatformVersion": 1000
}

注意：

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

配置接口列表（features）

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

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

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

新增頁面

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

router

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

首頁 (router.entry)

首頁，即應用平臺啟動時默認打開的頁面。首頁需配置為應用中某頁面的名稱，即在 <ProjectName>/src 目錄下，頁面目錄的相對路徑

假設工程根目錄如下所示

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

假設首頁為 Demo 目錄下的 index.ux 文件，則首頁對應的頁面名稱為Demo

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

頁面路由對象（router.pages）

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

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

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

示例如下：

假設工程根目錄如下所示

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

當頁面名稱（router.pages 的 key）為Demo時，對應的頁面配置（router.pages 的 value）包括：

• component：頁面對應的 ux 文件名index
• path：頁面路徑，默認為頁面名稱Demo

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

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

display

display，UI 顯示，用于定義與 UI 顯示相關的配置。支持定義：頁面公用的默認 UI 顯示、頁面私有的 UI 顯示

頁面公用的默認 UI 顯示

頁面公用的默認 UI 顯示，即被所有頁面共享

以標題欄文字的配置為例：

{
  "display": {
    "titleBarText": "頁面公用的默認標題"
  }
}

未配置私有標題的頁面，標題欄文字均將顯示為頁面公用的默認標題

頁面私有的 UI 顯示

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

以標題欄文字的配置為例：

{
  "display": {
    "pages": {
      "Demo": {
        "titleBarText": "Demo頁面的標題"
      }
    }
  }
}

引入依賴

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

引入 js

快應用中支持 ES6 的 module 標準，使用 import 引入 js 依賴，同時支持 CommonJs 規(guī)范，使用 require 引入 js 依賴

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

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

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

引入 css

快應用支持 css 通過 @import 方式引入

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

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

引入自定義組件

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

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

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

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

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

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