引导页就是当用户第一次或者手动进行触发的时候,提示给用户当前系统的模块介绍,比如哪里是退出,哪里是菜单等等相应的操作。
无论是开发 APP 还是 web 应用,新手引导都是一个很常见的需求,一般在这2个方面需要新手引导:
1. 用户第一次打开应用,对界面不够熟悉,或者作为一个创新型的产品,大部分用户没有类似的使用经验
2. 对成熟的应用进行一次较大的版本改动,UI 布局有比较大的改变,需要引导来告知用户
导航演示
Driver.js 介绍
Driver.js 是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库。主要的作用是为刚接触应用的新手用户快速了解产品,帮助用户把注意力聚焦到某项功能,从而快速熟悉我们的开发的产品。它没有依赖项,支持所有主要浏览器。
github:https://github.com/kamranahmedse/driver.js
Driver.js 的技术特性
简单轻量:使用很简单,独立无依赖,只有 4kb 大小
高度可定制:具有丰富强大的 API,按需使用
交互体验好:支持动画过渡,体验流畅舒服
突出显示任何内容:支持突出显示页面上的任何 dom 元素
简单几步实现功能介绍:为我们 Web 应用创建很棒的功能介绍,体验优秀
对用户操作友好:可以通过键盘控制引导流程,在生成力应用上很实用
浏览器兼容性表现一致:支持几乎所有浏览器(包括著名的IE)
安装依赖
npm 安装
yarn 安装
项目组件中引入依赖
代码实现
在项目中需要先实例化 driver 对象,然后调用 driver.defineSteps(array) 方法实现引导步骤。
在需要实现新用户引导的Vue文件中实例化driver对象,例如在项目的 main.vue 文件中,driver.js用法如下所示:
配置相关参数
defineSteps() 方法的参数为数组类型,数组中元素就是要执行的引导步骤。
step 选项包括:
领取专属 10元无门槛券
私享最新 技术干货