前端常用的新手引导库，总有一款适合你！

在产品发布新版本或者有新功能上线时，经常需要新手引导功能来引导用户了解应用，新手引导功能在应用中具有以下作用：

1. 帮助用户快速掌握应用的基本操作和核心功能，提高用户的使用体验。
2. 引导用户了解应用的特点、优势和使用方法，激发用户的使用兴趣和需求。
3. 帮助用户理解应用中的一些复杂功能和高级操作，提高用户对应用的认知和使用技能。
4. 通过个性化的引导，满足不同用户的需求和偏好，提高应用的用户留存率和满意度。
5. 通过反馈和评估，收集用户的反馈和建议，帮助开发者改进应用的功能和性能。

总之，新手引导功能在应用中扮演着重要的角色，可以帮助用户快速上手、提高使用体验、增强应用的认知度和用户留存率。同时，也帮助开发者收集反馈和建议，不断改进和优化应用的功能和性能。

下面就来分享几个开箱即用的新手引导组件工具库，帮你快速实现新手引导功能！

Intro.js

Intro.js 是一个帮助你引导新用户了解你的网站或应用的 JavaScript 库。它提供了一个简单的方式来创建优雅的指导体验，使得用户可以了解你的产品特性，快速上手，并对你提供的功能有更深入的理解。

介绍

Intro.js 的主要特点是：

1. 易于使用：你只需要在你的 html 文件中包含一些特定的标记，然后引入 intro.js 文件，就可以开始创建引导。
2. 丰富的主题：Intro.js 提供了许多可配置的主题，可以方便地定制你的引导样式。
3. 互动性强：Intro.js 支持多种交互方式，例如点击、触摸或键盘操作，使得用户可以以他们喜欢的方式进行交互。
4. 兼容性：Intro.js 在各种设备和浏览器上都有良好的兼容性。

使用

使用 Intro.js 的步骤如下：

1. 引入库：首先，你需要在你的 HTML 文件中引入 intro.js 库。
2. 定义引导步骤：然后，在你的 JavaScript 代码中，你需要定义引导的步骤。每个步骤都包括一个元素、一个标题、一段描述和一个可选的子步骤。
3. 启动引导：最后，你需要在你的 JavaScript 代码中启动引导。你可以选择在页面加载时自动开始引导，或者让用户手动启动引导。

introJs().setOption('showProgress', true).start();

以上代码会在页面加载时自动开始引导，并且显示进度条。

请注意，为了使引导正常工作，你可能需要在你的 HTML 文件中包含一些特定的标记。具体的使用方法可以查阅 Intro.js 的官方文档。

Github：https://github.com/usablica/intro.js

Driver.js

Driver.js 是一个可以轻松实现新手指引交互的 javascript 工具库，主要的作用是为刚接触应用的新手用户快速了解产品，帮助用户把注意力聚焦到某项功能，从而快速熟悉我们的开发的产品。

介绍

Driver.js  的主要特点是：

• 简单轻量：使用很简单，独立无依赖，只有 4kb 大小
• 高度可定制：具有丰富强大的 api，按需使用
• 交互体验好：支持动画过渡，体验流畅舒服
• 突出显示任何内容：支持突出显示页面上的任何 dom 元素
• 简单几步实现功能介绍：为我们 Web 应用创建很棒的功能介绍，体验优秀
• 对用户操作友好：可以通过键盘控制引导流程，在生成力应用上很实用
• 浏览器兼容性表现一致：支持几乎所有浏览器（包括著名的IE）

Driver.js 支持通过 npm 或 yarn 来安装，比如：

yarn add driver.js
npm install driver.js

也可以在线或本地直接引入，需要注意要同时引入 css 文件：

<script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css">

最简单的使用方法是高亮突出一个元素，只要给一个 CSS 选择器即可：

const driver = new Driver();
driver.highlight('#create-post');

调整弹出框的位置：

const driver = new Driver();
driver.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
    // 位置支持设置为 left, left-center, left-bottom, top,
    // top-center, top-right, right, right-center, right-bottom,
    // bottom, bottom-center, bottom-right, mid-center
    position: 'left',
  }
});

github：https://github.com/kamranahmedse/driver.js

shepherd.js

Shepherd.js 是一个用于创建引导体验的轻量级库。它可以帮助开发者创建一种用户友好的方式，引导用户了解新的功能或界面。

使用

使用Shepherd.js的基本步骤如下：

1. 引入库：首先，你需要引入Shepherd.js库。这可以通过在HTML文件中引入相关脚本文件或使用CDN链接来实现。
2. 创建引导：在JavaScript代码中，你可以使用Shepherd.js来创建引导。这通常涉及定义一系列的步骤，每个步骤都包含一个元素、一个标题、一段描述和可能的子步骤。
3. 配置选项：你可以通过调用setOption方法来配置Shepherd.js的行为。例如，你可以设置是否显示进度条、是否允许用户跳过引导等。
4. 启动引导：最后，调用start方法来启动引导。这通常在页面加载完成后执行。

var shepherd = new Shepherd.Tour({  
  defaults: {  
    classes: 'shepherd-theme-dark',  
    showCancelLink: true,  
    scrollTo: true,  
    steps: [  
      {  
        element: '#step1',  
        title: 'Step 1',  
        text: 'This is step 1'  
      },  
      {  
        element: '#step2',  
        title: 'Step 2',  
        text: 'This is step 2'  
      }  
    ]  
  }  
});  

// 启动引导  
shepherd.start();

在这个示例中，我们创建了一个包含两个步骤的引导。每个步骤都关联到一个特定的元素（通过元素的ID指定），并具有一个标题和描述。最后，我们调用start方法来启动引导。

请注意，为了使引导正常工作，你需要确保每个步骤所关联的元素在页面加载时存在。此外，你还可以根据需要自定义引导的样式和行为。

shepherd：https://github.com/shipshapecode/shepherd
react-shepherd：https://github.com/shipshapecode/react-shepherd
vue-shepherd：https://github.com/shipshapecode/vue-shepherd
angular-shepherd：https://github.com/shipshapecode/angular-shepherd

React-JoyRide

React-JoyRide是一个React组件库，它提供了一个轻松的引导体验。这个库使用一个直观的API来定义引导步骤，并允许你自定义每个步骤的样式和行为。React-JoyRide还提供了一些额外的功能，如导航控制、回调函数等，使你能够更灵活地控制引导过程。

使用

使用React-JoyRide的基本步骤如下：

安装库：首先，你需要在你的项目中安装React-JoyRide库。你可以使用npm或yarn来安装它。

npm install react-joyride

yarn add react-joyride

引入库：在你的React组件中，你需要引入React-JoyRide库。

import JoyRide from 'react-joyride';

定义引导步骤：你需要定义引导的步骤。每个步骤都包含一个标题、描述和目标元素。你可以通过传递一个数组来定义多个步骤。

const steps = [  
  {  
    target: '#step1',  
    title: 'Step 1',  
    description: 'This is step 1'  
  },  
  {  
    target: '#step2',  
    title: 'Step 2',  
    description: 'This is step 2'  
  }  
];

配置选项：你可以通过传递一个配置对象来配置React-JoyRide的行为。例如，你可以设置是否显示导航控制、是否自动滚动到目标元素等。

const options = {  
  showNavigation: true,  
  autoScroll: true,  
  // 其他选项...  
};

渲染组件：最后，你可以在React组件中渲染JoyRide组件，并传递步骤和选项作为props。

<JoyRide steps={steps} options={options} />

这样，当用户访问你的网站时，React-JoyRide会自动引导他们了解你的界面或功能。你可以根据需要自定义每个步骤的样式和行为，以及整个引导的外观和感觉。

Github：https://github.com/gilbarbara/react-joyride

Reactour.js

Reactour.js的设计目标是提供一种简单而灵活的方式来创建引导体验。它提供了丰富的组件和功能，使开发者能够轻松地定义引导步骤、导航控制、回调函数等。此外，Reactour.js还支持多种自定义样式和行为，以满足不同的项目需求。

使用

使用Reactour.js的基本步骤如下：

安装库：首先，你需要在你的项目中安装Reactour.js库。你可以使用npm或yarn来安装它。

npm install reactour

yarn add reactour

引入库：在你的React组件中，你需要引入Reactour.js库。

import Reactour from 'reactour';

定义引导步骤：你需要定义引导的步骤。每个步骤都包含一个标题、描述和目标元素。你可以通过传递一个数组来定义多个步骤。

const steps = [  
  {  
    target: '#step1',  
    title: 'Step 1',  
    description: 'This is step 1'  
  },  
  {  
    target: '#step2',  
    title: 'Step 2',  
    description: 'This is step 2'  
  }  
];

配置选项：你可以通过传递一个配置对象来配置Reactour.js的行为。例如，你可以设置是否显示导航控制、是否自动滚动到目标元素等。

const options = {  
  showNavigation: true,  
  autoScroll: true,  
  // 其他选项...  
};

渲染组件：最后，你可以在React组件中渲染Reactour组件，并传递步骤和选项作为props。

<Reactour steps={steps} options={options} />

这样，当用户访问你的网站时，Reactour.js会自动引导他们了解你的界面或功能。你可以根据需要自定义每个步骤的样式和行为，以及整个引导的外观和感觉。

Github：https://github.com/elrumordelaluz/reactour

Vue Tour

Vue Tour是Vue.js的一个插件，它可以帮助开发者在应用程序中创建引导体验。Vue Tour提供了一种简单而直观的方式来定义和组织引导步骤，并在用户访问应用程序时自动引导他们了解新的功能或界面。

介绍

Vue Tour通过在应用程序中添加一个特殊的组件来工作。这个组件可以包含一系列的步骤，每个步骤都包含一个目标元素、一个标题、一个描述和一个可选的子步骤。当用户访问应用程序时，Vue Tour会自动引导他们按照定义的步骤进行操作。

Vue Tour还提供了一些额外的功能，如导航控制、回调函数等，使你能够更灵活地控制引导过程。此外，Vue Tour还支持多种自定义样式和行为，以满足不同的项目需求。

使用

使用Vue Tour的基本步骤如下：

安装库：首先，你需要在你的项目中安装Vue Tour库。你可以使用npm或yarn来安装它。

npm install vue-tour

yarn add vue-tour

引入库：在你的Vue组件中，你需要引入Vue Tour库。

import VueTour from 'vue-tour';

定义引导步骤：你需要定义引导的步骤。每个步骤都包含一个目标元素、一个标题和描述。你可以通过传递一个数组来定义多个步骤。

const steps = [  
  {  
        target: '#step1',  
        title: 'Step 1',  
        description: 'This is step 1'  
      },  
      {  
        target: '#step2',  
        title: 'Step 2',  
        description: 'This is step 2'  
      }  
];

配置选项：你可以通过传递一个配置对象来配置Vue Tour的行为。例如，你可以设置是否显示导航控制、是否自动滚动到目标元素等。

渲染组件：最后，你可以在Vue组件中渲染VueTour组件，并传递步骤和选项作为props。

<v-tour :steps="steps" :options="options" />

这样，当用户访问你的应用程序时，Vue Tour会自动引导他们了解新的功能或界面。你可以根据需要自定义每个步骤的样式和行为，以及整个引导的外观和感觉。

Github：https://github.com/pulsardev/vue-tour

链接: https://www.fly63.com/article/detial/12618