Intro.js简介

• Intro.js 是一个流行的引导库，用于提供步进式的新手教程。它可以帮助你创建用户引导，展示一些步骤和提示，逐步引导用户了解应用程序的功能。

安装方法：

npm install intro.js

使用方法：

import introJs from 'intro.js';
import 'intro.js/introjs.css';

const startTutorial = () => {
  const intro = introJs();
  intro.setOptions({
  skipLabel: '跳过',    // 跳过按钮https://introjs.com/docs/tour/options
    steps: [
      {
        element: '#step1',
        intro: '这是步骤1的提示信息。',
      },
      {
        element: '#step2',
        intro: '这是步骤2的提示信息。',
      },
    ],
  });

  intro.start();
};

startTutorial();

你可以通过 #step1 和 #step2 等 ID 选择页面上的元素，设置每个步骤的提示信息。

使用示例：

• 以下为一个在初始化的 React 中使用 intro.js 的示例：
  • 初始化的 React 项目：
    
  • 使用效果：
    
    
    

代码实现：

• Intro.js

import React, { useEffect } from 'react';
import introJs from 'intro.js'; // 引入 intro.js
import 'intro.js/introjs.css'; // 引入 intro.js 样式

const Intro = () => {
  useEffect(() => {
    // 初始化并配置 Intro.js
    const intro = introJs();
    intro.setOptions({
      steps: [
        {
            element: '.App-header',
            intro: '欢迎使用本APP,这是新手引导.',
        },
        {
          element: '.App-logo',
          intro: 'App-logo ！！!',
        },
        {
          element: '.App-link',
          intro: 'Click & Learn more ！！!',
        }
      ],
      showStepNumbers: true,
      showBullets: true,
      exitOnOverlayClick: true,
    });

    // 启动 Intro.js
    intro.start();
  }, []);

  return null; // Intro 组件不渲染任何东西
};

export default Intro;

• . 修改 App.js 使用 Intro 组件

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Intro from './Intro'; // 引入 Intro 组件

function App() {
  return (
    <div className="App">
      <Intro /> {/* 渲染 Intro 组件 */}
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

• Intro.js 已获得 AGPL 许可，并且是开源的。但是，如果您想在商业应用程序、网站或插件中使用 Intro.js，则需要获得商业许可证。单个网站商用许可证$9.99。

相关库

• Shepherd.js 是一个强大的引导库，可以用来展示功能引导、教程等。它支持弹出式引导，可以在用户与页面进行交互时引导他们。

• Bootstrap Tour 是基于 Bootstrap 开发的一个简单易用的引导库，它适合那些已经使用了 Bootstrap 框架的项目。