前言
@dhis2/app-shell 是 DHIS 2 应用平台的官方界面集成方案，它提供了统一的界面和工具栏，帮助开发者快速构建应用程序。
本文将介绍如何使用 @dhis2/app-shell 进行应用程序开发。我们将涵盖以下内容：
- 安装和初始化 app-shell
- app-shell 组件介绍
- 创建你的第一个应用程序
安装和初始化 app-shell
在使用 app-shell 之前，首先需要安装和初始化它。在命令行中，输入以下命令：
npm install --save @dhis2/app-shell
成功安装后，继续输入以下命令来在应用程序中初始化 app-shell：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- -------------------
----- --- - -- -- -
--------- -------- -----
---------- -----------
-----------
--
-------------------- --- ---------------------------------在此示例中，我们 import 了 React 和 ReactDOM 渲染库，以及由 app-shell 提供的 AppShell 组件。我们将 AppShell 组件包裹在一个无状态组件中，将其名称设置为 "My App"。 AppShell 只允许一个孩子 component，我们在这个孩子 component 里添加了一个简单的 div 元素。
运行项目，你现在应该可以看到一个空的应用程序场景，以及应用程序名称标头。
app-shell 组件介绍
AppShell 提供了一些核心的 API 和组件，它们允许开发者在应用程序中使用 app-shell 的所有功能。
AppShell：顶层应用程序组件，允许定义应用程序名称和各种工具栏。Sidebar：允许定义应用程序的侧栏。TopBar：允许定义应用程序的顶部工具栏。
下面我们将详细讲解这些组件的使用方式。
AppShell 组件
AppShell 组件定义了应用程序的顶层组件，并允许你定义应用程序的名称和各种工具栏。下面是一个 AppShell 组件的例子：
import { AppShell } from '@dhis2/app-shell';
const App = () => (
<AppShell name="My App">
{/* 子组件 */}
</AppShell>
);在上面的例子中，我们定义了一个 AppShell 组件，并将名称设置为 "My App"。你也可以定义一个左侧导航栏和一个顶部菜单栏。下面是一个带有菜单栏和导航栏的 AppShell 示例：
-- -------------------- ---- -------
------ - --------- -------- ---------------- ------ - ---- -------------------
----- --- - -- -- -
--------- -------- -----
--------
--- ----- ---
---------
---------
---------------- ----------- ---- -- --
---------------- ----------- ---- -- --
---------------- ----------- ---- -- --
----------
-----------
--在这个例子中，我们添加了一个 TopBar 和一个 Sidebar。Sidebar 中包含了三个 SidebarMenuItem。当用户单击菜单项时，应用程序的内容区域将更新。
Sidebar 组件
Sidebar 组件允许你定义应用程序的侧栏。你可以使用多个 SidebarMenuItem 组件来创建菜单项列表。例如：
-- -------------------- ---- -------
------ - -------- --------------- - ---- -------------------
----- --------- - -- -- -
---------
---------------- ----------- ---- -- --
---------------- ----------- ---- -- --
---------------- ----------- ---- -- --
----------
--TopBar 组件
TopBar 组件允许你定义应用程序的顶部工具栏。你可以使用多个 TopBarMenuItem 组件来创建菜单项列表。例如：
-- -------------------- ---- -------
------ - ------- -------------- - ---- -------------------
----- -------- - -- -- -
--------
--------------- ----------- ---- -- --
--------------- ----------- ---- -- --
--------------- ----------- ---- -- --
---------
--创建你的第一个应用程序
现在我们已经了解了如何使用 AppShell、Sidebar 和 TopBar 组件。接下来，我们将通过创建一个简单的应用程序来展示它们的使用方式。
在新建一个 React 项目后，执行以下命令安装所需包：
npm i @dhis2/ui-core @dhis2/app-runtime @dhis2/app-service-datastore @dhis2/data-visualizer
然后，打开 App.js 文件，并添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - --------- -------- ---------------- ------ - ---- -------------------
------ ---------- ---- -----------------------------------------
------ - ---------- - ---- --------------------------
------ -------------- ---- ------------------------
------ - --------------- - ---- ------------------------------------------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
------------ -----
----- ---
-
-
----- ------------------- -
----- --- - ----- -----------------
----- ------- - ---------------- --------------------- --------
----- ----- - -
---------- -----------------
------- ------------------
---------------- ------------
----------- ---------
--------- ----------------
--
----- -------- - ----- ---------------------
----- ---- - ------------------------- -- --
-- ----------------
-- ------------------------ -- -------------- --- ---------------------
----- ------------------
----
--------------- ------------ -------- ---- ---
-
-------- -
------ -
--------- ---------- - ---- ------------
--------
--------------- ------------ --
--------------- --------------- --
--------------- ---------------- --
---------
---------
---------------- ----------- ------------
---------------
-------------
----- -----
----- ----------------
--
----------
------ -
------- -----
-
--
--
------------------
----------
-----------
--
-
-
-------------------- --- ---------------------------------在这个例子中，我们使用 @dhis2/data-visualizer 包来展示数据。我们使用 @dhis2/app-service-datastore/ApiService 来获取用户信息和数据，并使用 @dhis2/app-runtime/utils 中的 uidsByType 方法来获取用户的 UID。在 componentDidMount 函数中，我们获取用户的数据并将其存储在组件的 state 中。在 render 函数中，我们将数据可视化并在侧栏中显示。
这个应用程序只是一个简单的例子，只演示了如何使用 app-shell 组件来创建应用场景。你可以使用这个库来开发更高级、更复杂的应用程序，甚至可以与您的后端进行交互以获取数据。
结论
@dhis2/app-shell 提供了一个轻量级的解决方案，使开发者可以快速的构建出用于可视化 DHIS 2 后端数据的应用程序。在本文中，我们详细介绍了如何安装和初始化 app-shell，以及它的核心组件和用法。我们还展示了如何创建一个简单的应用程序，用于可视化 DHIS 2 后端数据。我们希望本教程能帮助你更好地了解 @dhis2/app-shell 并提供指导，以帮助你快速构建应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/dhis2-app-shell