大家好，我是 CUGGZ。
在產(chǎn)品發(fā)布新版本或者有新功能上線時，經(jīng)常需要新手引導(dǎo)功能來引導(dǎo)用戶了解應(yīng)用。下面就來分享幾個開箱即用的新手引導(dǎo)組件庫，幫你快速實現(xiàn)新手引導(dǎo)功能！
Intro.js
Intro.js 是一個使用廣泛的產(chǎn)品引導(dǎo)庫，它在 Github 上擁有 21.6k Star。其具有以下特點：
- 無依賴：它不需要任何其他依賴。
- 小而快：庫文件較小使得引導(dǎo)過程流暢直觀。JavaScript 文件的整體大小為 10KB，CSS 為 2.5KB。
- 用戶友好：提供可以根據(jù)喜好選擇的各種主題。
- 瀏覽器兼容性：適用于所有主流瀏覽器，如 Google Chrome、Mozilla Firefox、Opera、Safari 等 。
- 文檔完善：文檔包含要介紹的每個元素的樣本和示例。
可以通過以下命令來安裝 Intro.js：
npm install intro.js - save
安裝完成后，只需三個簡單的步驟即可將其添加到項目中：
- 將 JavaScript 和 CSS 文件（intro.js 和 introjs.css）添加到項目中。
- 將 data-intro 和 data-step 屬性添加到相關(guān)的 HTML 元素。這將為特定元素啟用 intro.js。
- 調(diào)用以下 JavaScript 函數(shù)：
可以使用以下附加參數(shù)在特定元素或類上調(diào)用 Intro.js：
introJs(".introduction-farm").start();Github：https://github.com/usablica/intro.js。
shepherd
Shepherd 在 Github 上擁有 10.7k GitHub Star。它支持在多個前端框架中開箱即用，包括 React、Vue、Angular 等。其具有以下特點：
- 輔助功能：提供鍵盤導(dǎo)航支持，遵循 a11y 規(guī)范，還可以使用 JavaScript 啟用 DOM 元素內(nèi)的焦點捕獲。
- 高度可定制：允許在不影響性能的情況下更改外觀。
- 框架支持：隨時融入項目的前端框架。
- 文檔完善：文檔涵蓋安裝和自定義，包括項目的主題和樣式。
可以使用以下命令來安裝 shepherd.js：
npm install shepherd.js -save
npm install react-shepherd --save
npm install vue-shepherd --save
npm install angular-shepherd --save
安裝完成之后，可以按如下方式來使用 shepherd（以 React 為例）：
import React, { Component, useContext } from 'react'
import { ShepherdTour, ShepherdTourContext } from 'react-shepherd'
import newSteps from './steps'
const tourOptions = {
defaultStepOptions: {
cancelIcon: {
enabled: true
}
},
useModalOverlay: true
};
function Button() {
const tour = useContext(ShepherdTourContext);
return (
<button className="button dark" onClick={tour.start}>
Start Tour
</button>
);
}
class App extends Component {
render() {
return (
<div>
<ShepherdTour steps={newSteps} tourOptions={tourOptions}>
<Button />
</ShepherdTour>
</div>
);
}
}- shepherd：https://github.com/shipshapecode/shepherd。
- react-shepherd：https://github.com/shipshapecode/react-shepherd。
- vue-shepherd：https://github.com/shipshapecode/vue-shepherd。
- angular-shepherd：https://github.com/shipshapecode/angular-shepherd。
React Joyride
React Joyride 在 GitHub 上擁有超過 5.1k Star，在 React 項目中開箱即用，用于向現(xiàn)有用戶介紹新功能。其具有以下特點：
可以使用以下命令來安裝 react-joyride：
可以通過以下方式來在 React 中使用 react-joyride：
import Joyride from 'react-joyride';
export class App extends React.Component {
state = {
steps: [
{
target: '.my-first-step',
content: 'This is my awesome feature!',
},
{
target: '.my-other-step',
content: 'This another awesome feature!',
},
...
]
};
render () {
const { steps } = this.state;
return (
<div className="app">
<Joyride
steps={steps}
...
/>
...
</div>
);
}
}
Github：https://github.com/gilbarbara/react-joyride。
Vue Tour
Vue Tour 是一個輕巧、簡單且可自定義的新手指引插件，可以與 Vue.js 一起使用。它提供了一種快速簡便的方法來指導(dǎo)用戶使用應(yīng)用。它在 Github 上擁有 2.1 k Star。
可以通過以下命令來安裝 Vue Tour：
然后在應(yīng)用入口導(dǎo)入插件（如果使用 vue-cli 搭建項目，通常是 main.js），并在 Vue 中注冊它。可以添加默認提供的樣式或根據(jù)自己的喜好自定義它們。
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')
最后將 v-tour 組件放入模板中的任何位置（通常在 App.vue 中），并向其傳遞一系列步驟。每個步驟的 target 屬性可以將應(yīng)用的任何組件中的 DOM 元素作為 target（只要在相關(guān)步驟彈出時它存在于 DOM 中）。
<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', // We're using document.querySelector() under the hood
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' // Any valid Popper.js placement. See https://popper.js.org/popper-documentation.html#Popper.placements
}
}
]
}
},
mounted: function () {
this.$tours['myTour'].start()
}
}
</script>
Github：https://github.com/pulsardev/vue-tour。
Reactour
Reactour 是一個用于創(chuàng)建 React 應(yīng)用導(dǎo)覽的流行庫。在 GitHub 上擁有 3.2K Star，它提供了一種簡單的方式來引導(dǎo)用戶瀏覽網(wǎng)站和應(yīng)用。
可以通過以下命令來安裝 reactour：
安裝完成之后，在應(yīng)用的根組件添加 TourProvider，傳遞元素的步驟以在瀏覽期間突出顯示：
import { TourProvider } from '@reactour/tour'
ReactDOM.render(
<TourProvider steps={steps}>
<App />
</TourProvider>,
document.getElementById('root')
)
const steps = [
{
selector: '.first-step',
content: 'This is my first Step',
},
// ...
]然后在應(yīng)用樹中的某個地方，使用 useTour hook 來控制 Tour：
import { useTour } from '@reactour/tour'
function App() {
const { setIsOpen } = useTour()
return (
<>
<p className="first-step">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at
finibus nulla, quis varius justo. Vestibulum lorem lorem, viverra porta
metus nec, porta luctus orci
</p>
<button onClick={() => setIsOpen(true)}>Open Tour</button>
</>
)
}Github：https://github.com/elrumordelaluz/reactour。
