【引导页】功能实现原理分析

什么是引导页，就是引导用户对一些新功能使用说明UI展示。

遇到这种需求，一般的想法是：

• 有没有办法可以快速实现
• 有时间对其背后原理研究一番

快速接入

按照常用框架Vue React 原生js进行分类，罗列一些开源比较好的框架使用。

Vue

vue-tour

vue-tour 适用于Vue2,

Vue Tour是一个轻量级、简单且可定制的导游插件，可与Vue.js一起使用。它提供了一种快速而简单的方法来指导用户完成您的应用程序。

使用方法：

import Vue from 'vue'
import App from './App.vue'
import VueTour from 'vue-tour'

require('vue-tour/dist/vue-tour.css')

Vue.use(VueTour)

new Vue({
  render: h => h(App)
}).$mount('#app')

// 这里使用vue组件
<template>
  <div>
    <div id="v-step-0">A DOM element on your page. The first step will pop on this element because its ID is 'v-step-0'.</div>
    <div class="v-step-1">A DOM element on your page. The second step will pop on this element because its ID is 'v-step-1'.</div>
    <div data-v-step="2">A DOM element on your page. The third and final step will pop on this element because its ID is 'v-step-2'.</div>

    <v-tour name="myTour" :steps="steps"></v-tour>
  </div>
</template>

<script>
  export default {
    name: 'my-tour',
    data () {
      return {
        steps: [
          {
            target: '#v-step-0',  // 使用 document.querySelector() 查询DOM节点
            header: {
              title: 'Get Started',
            },
            content: `Discover <strong>Vue Tour</strong>!`
          },
          {
            target: '.v-step-1',
            content: 'An awesome plugin made with Vue.js!'
          },
          {
            target: '[data-v-step="2"]',
            content: 'Try it, you\'ll love it!<br>You can put HTML in the steps and completely customize the DOM to suit your needs.',
            params: {
              placement: 'top' // 展示方位 包括: top/bottom/left/right等
            }
          }
        ]
      }
    },
    mounted: function () {
      this.$tours['myTour'].start()
    }
  }
</script>

React

React的生态比较丰富，插件也比较多，google React Tour就可以找到很多，下面罗列一下github上star较多的几个

• react-joyride：使用方便快捷的引导页插件
• reactour： 功能更加丰富的React引导组件，分成好几种组件：@reactour/tour @reactour/mask @reactour/popover @reactour/utils等

原生js

原生js实现的引导页插件，比较有名有driver.js、intro.js和shepherd.js

driver.js

driver.js 是一个强大而轻量级的普通 JavaScript 引擎，可在整个页面上驱动用户的注意力，只有 4kb 左右的体积，并且没有外部依赖，不仅高度可定制，还可以支持所有主流浏览器。

github地址: driver.js

使用demo教程：

import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';

// 高亮某个dom节点
const driver = new Driver();
driver.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
    position: 'left',
    offset: 20,
  }
});

// 步骤
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();

intro.js

intro.js 是是一个开源的 vanilla Javascript/CSS 库，用于添加分步介绍或提示，大小在 10kB左右，属于轻量级的且无外部依赖。

github地址: intro.js

使用demo教程：

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

// 使用HTML属性
<a href='http://google.com/' data-intro='Hello step one!'></a>

// 使用JSON配置
<section class="nav-menu">
    <ul>
        <li id="step1">步骤一</li>
        <li id="step2">步骤2</li>
    </ul>
</section>
// 配置
introJs().setOptions({
  steps: [{
    title: 'Welcome',
    intro: 'Hello World! 👋'
  },
  {
    element: document.querySelector('#step1'),
    intro: 'This step focuses on an image'
  },
  {
    title: 'Farewell!',
    element:document.querySelector('#step2'),,
    intro: 'And this is our final step!'
  }]
}).start();

shepherd.js

shepherd.js 包含的 API 众多，大多场景都可以通过其对应的配置得到，缺点就是整体的包体积较大，并且配置也比较复杂，配置复杂的内容一般都需要进行二次封装，将可变和不可变的配置项进行抽离

github地址: shepherd.js
使用demo教程：

import Shepherd from 'shepherd.js';

// 初始化配置
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. 高亮部分，通过el.cloneNode(true)复制元素节点，将节点复制到蒙层
2. 引导部分，展示引导框，并将引导框与高亮部分进行定位
3. 过度动画，通过设置transition实现
4. 页面监听，当页面发生变化的时候，引导页需要重新渲染计算

具体实现可以点击查看源码tour.js。

参考资料

• 不使用第三方库怎么实现【前端引导页】功能？

赏

谢谢你请我吃糖果

支付宝

微信

• 本文作者： qborfy
• 本文链接： https://qborfy.com/2023/01/03/today/20220103/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！