前端开发如何做新手引导
通常,在产品发布新版本或者有新功能上线时,都会开发一个新手引导功能来引导用户了解应用的功能。在前端开发中,如何快速地开发新手引导功能呢,下面介绍几个开箱即用的新手引导组件库。
1,Intro.js
Intro.js是一个使用广泛的产品引导库,在Github上拥有超过21.7k的Star。具有以下特点:
- 无依赖:不需要任何其他依赖。
- 小而快:库文件较小使得引导过程流畅直观,JavaScript 文件的整体大小为 10KB,CSS 为 2.5KB。
- 用户友好:提供多种主题,用户可以根据喜好选择的主题。
- 浏览器兼容性:支持所有的主流浏览器,如 Google Chrome、Mozilla Firefox、Opera、Safari 等 。
- 文档完善:文档包含了基本的使用方法、每个元素的样本和示例。
和其他组件库的使用流程一样,需要先在项目中使用以下命令来安装 Intro.js库。
npm install intro.js - save
按照如下的步骤开发引导功能:
- 将 JavaScript 和 CSS 文件(intro.js 和 introjs.css)添加到项目中。
- 将 data-intro 和 data-step 属性添加到相关的 HTML 元素,这将为特定元素启用 intro.js。
接着,调用以下JavaScript 函数,启动Intro.js。
introJs().start();
然后,使用以下附加参数在特定元素或类上调用 Intro.js启动。
introJs(".introduction-farm").start();
项目链接:https://github.com/usablica/intro.js
2,Shepherd
Shepherd是一个前端JavaScript引导库,在Github上拥有10.8kGitHub Star,支持在 React、Vue、Angular 等多个前端框架中开箱即用,其具有以下特点:
- 辅助功能:提供键盘导航支持,遵循 a11y 规范,还可以使用 JavaScript 启用 DOM 元素内的焦点捕获。
- 高度可定制:允许在不影响性能的情况下更改外观。
- 框架支持:随时融入项目的前端框架。
- 文档完善:文档涵盖安装和自定义,包括项目的主题和样式。
使用Shepherd之前,我们可以使用以下命令来安装 shepherd.js。
npm install shepherd.js -save
npm install react-shepherd --save
npm install vue-shepherd --save
npm install angular-shepherd --save
安装完成之后,我们需要使用shepherd组件来嵌套引导页面。
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>);}
}
为了支持React、Vue、Angular等不同的框架,Shepherd提供了不同的地址:
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
3,React Joyride
React Joyride 是一款用于向用户介绍新功能的React项目新手引导库,在GitHub上拥有超过5.1k的Star,具有以下特点:
- 易于使用
- 高度可定制
- 文档完善
- 积极维护
在项目中使用 react-joyride之前,需要使用以下命令来安装 react-joyride。
npm i 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"><Joyridesteps={steps}.../>...</div>);}
}
项目链接:https://github.com/gilbarbara/react-joyride
4,Vue Tour
Vue Tour是一个轻巧、简单且可自定义的新手指引组件,专门为Vue.js 定制,它提供了一种快速简便的方法来指导用户使用应用,目前它在 Github 上拥有 2.12k Star。
首先,我们需要通过以下命令来安装Vue Tour。
npm install vue-tour
然后,在应用入口文件(通常是 main.js)中导入插件,并在 Vue 中注册它,可以添加默认提供的样式或根据自己的喜好自定义它们。
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 属性可以将应用的任何组件中的 DOM 元素作为 target。
<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 hoodheader: {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>
项目链接:https://github.com/pulsardev/vue-tour
5,Reactour
Reactour 是一个广泛使用的React 应用引导库,在GitHub上拥有3.2K的Star,它提供了一种简单的方式来引导用户浏览网站和应用。首先,需要通过以下命令来安装 reactour。
npm i -S @reactour/tour
安装完成之后,在应用的根组件添加 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',},// ...
]
然后,在应用树中的某个地方,使用 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 atfinibus nulla, quis varius justo. Vestibulum lorem lorem, viverra portametus nec, porta luctus orci</p><button onClick={() => setIsOpen(true)}>Open Tour</button></>)
}
项目链接:https://github.com/elrumordelaluz/reactour
前端开发如何做新手引导相关推荐
- Web前端开发主要做什么
Web前端开发主要做什么?朗沃小刘小编今天来谈谈web前端开发主要做什么?web前端工程师,做的工作与网站前/后台系统的页面相关,使用到的主要技术包括:HTML.CSS.JavaScript.现代we ...
- web前端开发主要做什么?应该学些什么?
web前端开发主要做什么?当我们要生产一款APP,UI设计是展现在我们眼前的界面.图标.交互等内容,而它的各项功能的实现是后端工程师的代码开发,可是这两个部分没有在开发的时候办法直接对应,此时web前 ...
- 入行web前端开发可以做什么工作
迷茫和烦恼几乎是人人都有,作为一名初级程序员来说,可能是因为工资低.家庭无背景.发展前景有限等等的现实原因影响了心态.特别是在找工作四处碰壁后,可能会发出行业饱和这样的感慨,再加上最近中美贸易摩擦下, ...
- 前端开发工程师做些什么?
1.web前端开发工程师是做什么的 要与网站打交道 2.成为一名web前端开发工程师需要具备的条件 1.兴趣2.敲代码 3.web前端开发工程师需要学习什么 1)软件(代码的辅助工具) 浏览器:浏览器 ...
- 拿4k的前端开发都会做些什么?
对于刚刚入门的小白来说,你起码得是一个合格的初级前端工程师,不然有哪家公司愿意给你offer,初级的前端工程师拿4K的工资不稀奇,如果你是中高级前端工程师还拿着4K的薪资这就有点说不过去了.那么,什么 ...
- 前端开发是做什么的?工作职责有哪些?
我们介绍Web网站工作流程的时候提到,前端开发,主要的职责就是将数据以好看的样式呈现出来.说白了,就是开发网页程序,如下图所示: 那在讲解web前端开发之前,我们先需要对web前端开发有一个整体的认知 ...
- Web前端开发是做什么的?学Web前端有前途吗?
尚学堂导读 某学员: "前几年前端开发人员鱼目混杂,技术参差不齐,相对学习起来不规范,导致前端开发人员聚集,所以现在前端工种和工资还是没得到普遍重视,但近2年来,HTML5.JS 的流行,让 ...
- 前端开发是做什么的?工作职责
想要了解前端从业者的工作职责,需要从一个完整网站应用产生流程入手,一个网站应用从无到有的过程大致如下 : 1)产品经理与甲方反复沟通交流,逐步确定产品需求完成设计草图: 2)产品经理根据需求和草图进行 ...
- WebVR大潮来袭时,前端开发能做些什么
作者 | YoneChen 来源 | https://www.jianshu.com/p/c9c03e14ba9d WebVR即web + VR的体验方式,我们可以戴着头显享受沉浸式的网页,新的API ...
最新文章
- 项目在eclipse中部署到tomcat时部署到了wtpwebapps文件夹下
- Python正则表达式 re.sub()函数:标志位flags与参数个数问题
- Copying to tmp table Problem Solving
- jquery中is()函数
- Windows 多个系统版本惊现大漏洞,攻击者可随意操作程序!
- 系统学习NLP(十八)--文本分类概述
- 史上最污技术解读,让你秒懂IT术语
- linux防火墙应用,Linux防火墙iptables基本应用
- VUE实现SQL在线编辑器,SQL分析器,SQL代码关键字提示
- 穿越回二年级讲CPU工作原理。
- Himall商城普通帮助类(一)
- python保存到txt_python保存成文本文件
- STM32实现DAC音频播放
- 研究生的生活原来是酱紫的……
- 3种思路,打造用户画像的标签体系
- C# WPF 快捷键的实现 极简教程
- Win10 自定义右键新建菜单
- SQL 追踪(SQL Trace)
- 基于C#简单的游戏客户端编程(VS)
- java picked up,抑制“Picked up _JAVA_OPTIONS”信息