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

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

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

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

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

Intro.js

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

介绍

Intro.js 的主要特点是：

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

使用

使用 Intro.js 的步骤如下：

引入库：首先，你需要在你的 HTML 文件中引入 intro.js 库。
定义引导步骤：然后，在你的 JavaScript 代码中，你需要定义引导的步骤。每个步骤都包括一个元素、一个标题、一段描述和一个可选的子步骤。
启动引导：最后，你需要在你的 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的基本步骤如下：

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