[泛微EC9] 使用页面引导组件/功能

引言

在现代办公自动化（OA）系统中，页面引导功能变得越来越重要。它不仅能帮助新用户快速上手系统，还可以优化用户体验，提高工作效率。在泛微EC9中，我们可以通过两种方式实现页面引导功能：使用泛微ecode和纯JavaScript（JS）方式。

泛微EC9中实现页面引导功能的方法

使用泛微ecode实现页面引导

使用泛微ecode来实现页面引导是一种通用且全局的方法。它的主要优势在于能够与泛微系统深度集成，适用于大多数需要页面引导的场景。此方法的实现相对复杂，但对于长期需要维护和扩展的项目来说，具有很高的可扩展性。

使用纯JS方式实现页面引导

相比之下，使用纯JS方式则更加灵活和简单。你可以在建模或流程中随时应用这一功能，而不需要对现有系统做过多的调整。此方法适用于希望快速实现特定功能，且对页面引导的控制要求更高的场景。

纯JS实现页面引导功能的详细步骤

引入必要的组件和库

在使用纯JS实现页面引导时，我们需要引入泛微的部分组件，如WeaReqTop和WeaIntro。这些组件提供了页面引导所需的基础功能。

创建引导步骤并设置提示内容

通过Intro组件，我们可以定义多个引导步骤。每个步骤可以绑定到页面上的特定元素，并为用户提供相应的提示说明。

启动页面引导

在定义完所有步骤后，我们通过intro.start()方法启动页面引导，让用户能够逐步了解页面上的关键功能。

示例代码解析

下面的代码展示了如何使用纯JS实现页面引导功能：

const { WeaReqTop, WeaIntro } = ecCom;
const { Intro, Step } = WeaIntro;

// 创建一个新的小容器节点
const introContainer = document.createElement('div');
document.body.appendChild(introContainer);

// 创建 `Intro` 组件的元素
const introElement = React.createElement(Intro, {
  onReady: (intro) => {
    // 设置引导步骤
    intro.setOptions({
      steps: [
        {
          element: '.ant-tabs-tab-inner[title="全部流程"]',  // 第一个元素
          intro: "这是全部流程选项"
        },
        {
          element: '.ant-tabs-tab-inner[title="我的收藏"]',  // 第二个元素
          intro: "这是我的收藏选项"
        }
      ],
    });

    // 启动引导
    intro.start();
  }
});

// 使用 ReactDOM 渲染 `Intro` 组件到新的小容器节点
ReactDOM.render(introElement, introContainer);

代码结构与功能概述

这段代码首先创建了一个新的容器节点，并将其添加到页面中。然后，通过React.createElement创建了Intro组件，并设置了引导步骤和相应的提示内容。最后，使用ReactDOM.render将该组件渲染到页面上。

各部分代码的详细解读

• 引入组件：通过const { WeaReqTop, WeaIntro } = ecCom;引入泛微的必要组件。
• 创建容器：document.body.appendChild(introContainer);将新的容器节点添加到页面中，用于存放引导组件。
• 定义引导步骤：在intro.setOptions中，我们为页面上的元素设置了引导步骤及提示内容。
• 启动引导：intro.start();用于启动页面引导，让用户依次看到各步骤的提示信息。

如何根据实际需求进行定制

你可以根据实际的业务需求，调整steps数组中的元素选择器和提示内容，从而实现针对不同页面的个性化引导。

结论

通过本文的介绍，你已经了解了在泛微EC9中实现页面引导功能的两种方法。使用泛微ecode可以实现更全局的引导功能，而使用纯JS方式则提供了更高的灵活性。根据你的具体需求，选择适合的方法可以大大提高系统的用户体验。

[泛微EC9] 使用页面引导组件/功能 by https://oneszhang.com/archives/99.html