十分钟教会你写出引导页

前言

最近公司做的公众号基本完成了，但是领导觉得还有很多客户不知道如何在公众号里面去花钱购买更充值，所以给我提了个新需求，要一个引导页来引导用户去充值（如下图所示）

当时研究了一下，觉得全部用背景图片解决就行了部分地方自己写一下，其实也简单，问题就是：这样需要产品提供图片，本身项目用的图片已经很多了，而且图片全是存本地，所以打包出来资源很大，所以我觉得还是找找其它方法，框框有没有第三方库来用，进来少使用图片，如果确实没合适的再考虑用图片去写

intro.js插件

在github中找了一下找到两个插件第一个是driver.js，当时试了一下报错了两次就放弃了，不知道是不是版本不兼容没去深究，第二个插件就是intro.js，这个插件看了一下上手简单切理解起来也很容易

这里直接给出的示例跟代码一目了然，并且只需要知道执行引导的dom就行了，执行intro().setOptions(),在setOptions里面加入需要引导的dom节点

js 复制代码

introJs().setOptions({
  steps: [
  {
    element: document.querySelector('.card-demo'),// 获取类名为.card-demo的dom
    intro: 'This step focuses on an image' // 提示文案
  },
  {
    title: 'Farewell!', // 标题
    element: document.querySelector('.card__image'),
    intro: 'And this is our final step!'
  }]
}).start(); //  开始执行

文档例子很清楚了，大家可以去官方文档看一看

注意事项

想必大家看到这个例子也知道，这个引导这么丑，应该怎么修改？

其实很简单，文档提供了一个自定义按钮额外类名的属性buttonClass还有整个提示额外的类名属性tooltipClass，具体用法就是直接在setOptions里面进行配置就可以了

js 复制代码

introJs().setOptions({
  steps: [
  {
    element: document.querySelector('.card-demo'),// 获取类名为.card-demo的dom
    intro: 'This step focuses on an image' // 提示文案
  },
  {
    title: 'Farewell!', // 标题
    element: document.querySelector('.card__image'),
    intro: 'And this is our final step!'
  }],
  buttonClass: 'my-button', // 额外按钮类名
  tooltipClass: 'my-Tooltip' // 额外提示框类名
}).start(); //  开始执行

注意注意注意 重要的事情说三遍，在页面引入的时候是需要把插件本身自带样式也要引入的

js 复制代码

import intro from 'intro.js'
import 'intro.js/minified/introjs.min.css'

所以当你要使用自己定义的类名时候，你需要保证你的自定义样式是在introjs.min.css后面引入的，不然你找半天也找不出问题（本人亲自踩的坑）还有一些其它的配置我在这里整理出来了，大家自取

js 复制代码

        showButtons: false, // 是否需要显示按钮
        nextLabel: '下一步', // 下一步文案
        prevLabel: '上一步', // 上一步文案
        hidePrev: true, // 是否需要隐藏第一次的上一步
        doneLabel: '关闭', // 最后一步完成按钮文案，默认done
        showBullets: false, // 是否显示步骤小圆点
        disableInteraction: true, // 默认是false显示一个点击过的a标签后还停留a标签一样效果，建议关掉
        exitOnOverlayClick: false, // 退出引导
        buttonClass: 'intro-next-button', // 按钮额外样式
        overlayOpacity: 0.9, // 背景透明度
        keyboardNavigation: false, // 是否使用键盘导航，不知道啥东东，还是关了好
        skipLabel: '<span>跳过引导</span> ×', // 右上角的叉叉，默认是×，支持标签写法
        tooltipClass: 'customTooltip' // 提示框额外样式

事件

引导后有最后的完成操作跟在引导时有点击叉叉关闭引导的操作，当你两个点击需要进行不同操作时可以用下面两个回调进行处理

js 复制代码

introJs().setOptions({
  steps: [
  {
    element: document.querySelector('.card-demo'),// 获取类名为.card-demo的dom
    intro: 'This step focuses on an image' // 提示文案
  },
  {
    title: 'Farewell!', // 标题
    element: document.querySelector('.card__image'),
    intro: 'And this is our final step!'
  }],
  buttonClass: 'my-button', // 额外按钮类名
  tooltipClass: 'my-Tooltip' // 额外提示框类名
}).onexit(() => {
     // 点击叉叉关闭了引导
}).oncomplete(() => {
    //  点击了最后一步的完成按钮进行的操作
}).start(); //  开始执行

最后

这是本人亲测总结出来的，如果还有什么不足或者有什么问题，欢迎交流，希望大家一起学习一起进步🥳🥳🥳

附（项目展示图）