本文介紹了Driver.js這款輕量級(jí)JavaScript工具庫(kù)，它能快速實(shí)現(xiàn)新手引導(dǎo)功能，幫助用戶(hù)熟悉產(chǎn)品。文章概述了Driver.js的核心特性：支持元素高亮、分步引導(dǎo)、動(dòng)畫(huà)過(guò)渡和鍵盤(pán)控制，僅4KB大小且無(wú)依賴(lài)。提供了安裝方法和基礎(chǔ)使用示例，包括單元素高亮和多步驟引導(dǎo)的實(shí)現(xiàn)方式。最后指出該工具適用于首次使用或大改版后的產(chǎn)品引導(dǎo)場(chǎng)景，并附上官網(wǎng)鏈接便于深入查閱。

大家好，歡迎來(lái)到程序視點(diǎn)！我是小二哥！

每當(dāng)我們的新產(chǎn)品上線(xiàn)或大版本迭代后，產(chǎn)品使用步驟或功能介紹是必不可少的。

今天就給大家介紹一款可以快速實(shí)現(xiàn)新手引導(dǎo)和交互效果的工具庫(kù): Drive.js

關(guān)于 Driver.js

Driver.js 是一個(gè)可以輕松實(shí)現(xiàn)新手指引交互的 JavaScript 工具庫(kù)，主要的作用是為剛接觸應(yīng)用的新手用戶(hù)快速了解產(chǎn)品，幫助用戶(hù)把注意力聚焦到某項(xiàng)功能，從而快速熟悉我們的開(kāi)發(fā)的產(chǎn)品。

自帶動(dòng)畫(huà)，體驗(yàn)十分優(yōu)秀。

Driver.js 的技術(shù)特性

Driver.js 是一個(gè)功能強(qiáng)大且高度可定制的基于原生JavaScript開(kāi)發(fā)的新用戶(hù)引導(dǎo)庫(kù)。它沒(méi)有依賴(lài)項(xiàng)，支持所有主要瀏覽器。

?? 高亮頁(yè)面上的任意元素
? 暫停用戶(hù)交互，方便引導(dǎo)流程
?? 為web應(yīng)用程序創(chuàng)建強(qiáng)大的功能介紹
?? 支持動(dòng)畫(huà)過(guò)渡，體驗(yàn)流暢舒服
??? 高度可定制：具有豐富強(qiáng)大的 API，可以用于突出顯示任何內(nèi)容
?? 用戶(hù)友好：可通過(guò)鍵盤(pán)控制引導(dǎo)流程
?? MIT聲明：免費(fèi)用于個(gè)人和商業(yè)用途
??? 簡(jiǎn)單輕量：使用很簡(jiǎn)單，獨(dú)立無(wú)依賴(lài)，只有 4kb 大小
?? 所有主流瀏覽器(包括著名的IE)都可以使用

實(shí)踐使用

安裝

Driver.js 支持通過(guò) npm 或 yarn 來(lái)安裝，比如：

yarn add driver.js
npm install driver.js

也可以在線(xiàn)或本地直接引入，需要注意:要同時(shí)引入 CSS 文件。

<script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>
<link rel="stylesheet" >

使用方法

最簡(jiǎn)單的使用方法是高亮突出一個(gè)元素，只要給一個(gè) CSS 選擇器即可。

const driver = new Driver();
driver.highlight('#create-post');

調(diào)整彈出框的位置：

const driver = new Driver();
driver.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
    // 位置支持設(shè)置為 left, left-center, left-bottom, top,
    // top-center, top-right, right, right-center, right-bottom,
    // bottom, bottom-center, bottom-right, mid-center
    position: 'left',
  }
});

上面這些都是小打小鬧，新手引導(dǎo)交互里最常用的就是包含多個(gè)步驟引導(dǎo)。
用戶(hù)可以一步一步地了解功能，實(shí)現(xiàn)這樣的效果也很簡(jiǎn)單：

const driver = new Driver();
// 定義步驟
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'
    }
  },
]);
// 開(kāi)始引導(dǎo)
driver.start();

引導(dǎo)流程支持前進(jìn)和后退，簡(jiǎn)單酷炫的操作。
我們還可以通過(guò)編寫(xiě)自己的 CSS 樣式來(lái)定制遮罩的樣式，這樣就能完全匹配我們的應(yīng)用風(fēng)格。

體驗(yàn)和建議

無(wú)論是開(kāi)發(fā) APP 還是 web 應(yīng)用，新手引導(dǎo)都是一個(gè)很常見(jiàn)的需求，一般在這2個(gè)方面需要新手引導(dǎo)：

1)用戶(hù)第一次打開(kāi)應(yīng)用，對(duì)界面不夠熟悉，或者作為一個(gè)創(chuàng)新型的產(chǎn)品，大部分用戶(hù)沒(méi)有類(lèi)似的使用經(jīng)驗(yàn);
2)相對(duì)成熟的應(yīng)用進(jìn)行一次較大的版本改動(dòng)，UI 布局有比較大的改變，需要引導(dǎo)來(lái)告知用戶(hù)

官網(wǎng)的文檔里還有更多強(qiáng)大的功能特性，感興趣的開(kāi)發(fā)者可以去細(xì)細(xì)閱讀。

Driver.js官方文檔
https://kamranahmed.info/driver.js/

寫(xiě)在最后

【程序視點(diǎn)】助力打工人減負(fù)，從來(lái)不是說(shuō)說(shuō)而已！

后續(xù)小二哥會(huì)繼續(xù)詳細(xì)分享更多實(shí)用的工具和功能。持續(xù)關(guān)注，這樣就不會(huì)錯(cuò)過(guò)之后的精彩內(nèi)容啦！

如果這篇文章對(duì)你有幫助的話(huà)，別忘了【點(diǎn)贊】【分享】支持下哦~