菜鸟教程
教程 driver-js tutorial

Driver.js 教程

Driver.js 是一个轻量的页面引导库，可以在网页上高亮指定元素，并配合弹层说明完成产品导览、首次使用提示、功能介绍和操作指引。

它不依赖具体框架，既可以直接在普通 HTML 页面中使用，也可以集成到 React、Vue、Svelte、Next.js 等现代前端项目中。

适合什么场景

场景 说明
新用户引导 用户第一次进入后台、编辑器、控制台时，逐步说明主要区域
新功能提示 发布新按钮或新入口后，短暂高亮并解释用途
复杂表单说明 对关键字段、风险选项、提交规则做上下文提示
内部系统培训 用分步导览代替长篇说明文档，降低学习成本
空状态转化 在页面没有数据时，引导用户完成第一次创建

学习路线

  1. 阅读 Driver.js 是什么，理解它解决的问题。
  2. 通过 安装与样式引入 准备项目。
  3. 学习 创建第一个 Tour 和 单点高亮。
  4. 掌握 弹层位置与按钮 和 主题样式。
  5. 用 Hooks 与事件 处理埋点、权限和表单保存。
  6. 通过 动态元素与异步引导 适配真实业务页面。
  7. 最后参考 最佳实践 和 官方资料 持续深入。

你将学到什么

  • 如何安装 Driver.js 并正确引入默认样式。
  • 如何用 steps 描述一组页面引导。
  • 如何使用 highlight() 做一次性的功能提示。
  • 如何配置按钮、进度、遮罩、滚动和弹层位置。
  • 如何通过 hooks 处理生命周期、埋点、校验和清理逻辑。
  • 如何在 React 与 Vue 中避免重复初始化和内存泄漏。

参考资料

相关内容