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

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

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

項(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>


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號