新手引导功能

新手引导功能是一种用于指导用户在应用程序或网站中进行导航和操作的辅助工具。它能够解决以下问题：

1. 用户体验问题：对于新用户来说，陌生的界面和功能可能会造成困惑。通过提供新手引导，可以帮助他们快速了解和熟悉应用程序的界面和功能，提升用户体验。

2. 功能可见性问题：应用程序中可能存在许多隐藏的功能或界面元素，用户很难主动发现它们。通过新手引导，可以引导用户逐步发现和了解这些功能，提高应用程序的整体可用性。

3. 流程引导问题：某些任务或操作需要按照特定的顺序执行，否则可能会导致错误或不完整的结果。通过新手引导，可以引导用户按照正确的流程逐步完成任务，减少用户迷失和错误操作的可能性。

4. 提醒和提示问题：有时候，用户可能忘记了某个重要的功能或操作步骤。新手引导可以通过提醒和提示来帮助用户回忆起这些重要信息，避免错过关键功能。

新手引导功能能够提供用户友好的导航和操作指导，帮助用户快速熟悉应用程序或网站的界面和功能，并提供必要的提示和帮助，以提升用户体验和应用程序的可用性。

强大社区好的插件

在社区中有许多供选择的插件和工具可以用于实现新手引导功能。以下是几个常用的前端新手引导插件/库的简要对比：

1. **Intro.js**: Intro.js 是一个流行的开源 JavaScript 库，提供了丰富的功能来创建交互式的网页新手引导。它支持高亮显示特定元素、添加提示文本和步骤导航等功能，并提供灵活的配置选项，内置了好几种主题可以使用。商用收费，可以去官网了解下(Lifetime license. Once-off payment.一生的许可证。一旦付款。基础版本一个项目9.99刀等服务)。

github 22.1k,推荐指数⭐⭐⭐⭐ 效果比较流程美观问题是主要是收费

简单使用示例：

1. **Shepherd**: Shepherd 是一个基于 JavaScript 的插件，专注于为网页提供新手引导功能。它提供了易于使用的 API，允许开发人员定义引导序列、高亮显示 DOM 元素、添加提示和按钮等。

github 11.3k，推荐指数⭐⭐⭐⭐ 没别的就是觉得他的内置样式不是很好看使用的话还要定制样式！！ 简单使用示例：

/**
 * 引入依赖 js、css
 * <link rel="stylesheet" href="shepherd.js/dist/css/shepherd.css"/>
 * <script src="shepherd.js/dist/js/shepherd.min.js"></script>
 * 
 */

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    cancelIcon: {
      enabled: true
    },
    classes: 'class-1 class-2',
    scrollTo: { behavior: 'smooth', block: 'center' }
  }
});

tour.addStep({
  title: 'Creating a Shepherd Tour',
  text: `Creating a Shepherd tour is easy. too!\
  Just create a \`Tour\` instance, and add as many steps as you want.`,
  attachTo: {
    element: '.hero-example',
    on: 'bottom'
  },
  buttons: [
    {
      action() {
        return this.back();
      },
      classes: 'shepherd-button-secondary',
      text: 'Back'
    },
    {
      action() {
        return this.next();
      },
      text: 'Next'
    }
  ],
  id: 'creating'
});

tour.start();

1. **Driver.js**: Driver.js 是一个轻量级的、无依赖的 JavaScript 库，用于实现网页的新手引导。它具有简单的API，支持高亮显示元素、添加提示文本、自动导航等功能，同时提供了自定义主题的能力。

github 14.8k，推荐指数⭐⭐⭐⭐⭐

简单使用示例：

const driver = new Driver();
// Define the steps for introduction
driver.defineSteps([
  {
    element: '#first-element-introduction',
    popover: {
      className: 'first-step-popover-class',
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'left'
    }
  },
  {
    element: '#second-element-introduction',
    popover: {
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'top'
    }
  },
  {
    element: '#third-element-introduction',
    popover: {
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'right'
    }
  },
]);
// Start the introduction
driver.start();

怎么实现新手引导

我参考了一些文章，好几种方式能实现新手引导，咱们一个一个展开来说说 第一种使用div定位,这一种也是上面几个插件都是应用这个这个方案，先看一个截图：

整体分为：

1、需要引导得dom层； 2、设置一个遮罩层； 3、给原引导得dom设置一个白色得背景块（大小取决于原dom块）; 4、popver层；

简单实现就是第一步定义一个类方法如下：

class CustomDriver {
  currentStep = 0;
  steps = [];
  constructor() {

  }

  defineSteps(steps = []) {
    // 存放一下 steps
    this.steps = steps;
  }

  setDomZIndex() {
    
  }

  scrollToCenter() {

  }

  setDomBg() {

  }

  setPopover() {

  }

  start() {
    // 开始
    // 1. 新建遮罩层dom插入body
    // 2. 新建白色底块
    // 3. 新建popover 插入body
    this.next();
  }

  next() {
    //1. 给当前引导dom设置定位加权重；
    this.setDomZIndex();
    //2. 使用`getBoundingClientRect()`获取到需要引导得dom得位置信息 x、y、top、left、right、bottom等信息
    //3. 需要计算是否有滚动轴，把中焦点定位到当前屏幕得中间
    this.scrollToCenter();
    //4. 设置白色底块大小和位置
    this.setDomBg();
    //5. 动态设置popover内信息
    this.setPopover();
    this.currentStep++;
  }

  prev() {
    this.currentStep--;
    if(this.currentStep < 0) return;
    this.setDomZIndex();
    this.scrollToCenter();
    this.setDomBg();
    this.setPopover();
  }

  done() {
    // 删除创建得dom、popover等定位相关属性
  }
}

const customDriver = new CustomDriver();

customDriver.defineSteps([
  {
    element: '#first-element-introduction',
    popover: {
      className: 'first-step-popover-class',
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'left'
    }
  },]);

// Start the introduction
customDriver.start();

给白色高亮块设置过渡值就能达到平移效果了，还需要再考虑下一个点就是有些出现滚动条并不是再body，他可能再某个块div里面我们需要先把这个元素可见,那就是一直以当前元素递归到body设置到元素可见。 以上就是一个简单得实现方案。

结语

今天咱们从插件到实现原理学会了怎么实现用户引导功能，后面再遇到就能轻松实现了，如果对您有帮助，欢迎点赞收藏。

参考链接：