整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
家好，我是 Echa。
在产品发布新版本或者有新功能上线时，经常需要新手引导功能来引导用户了解应用。下面就来分享几个开箱即用的新手引导组件库，帮你快速实现新手引导功能！
Intro.js 是一个使用广泛的产品引导库，它在 Github 上拥有 21.6k Star。其具有以下特点：
可以通过以下命令来安装 Intro.js：
npm install intro.js - save
安装完成后，只需三个简单的步骤即可将其添加到项目中：
introJs().start();
可以使用以下附加参数在特定元素或类上调用 Intro.js：
introJs(".introduction-farm").start();
Github：https://github.com/usablica/intro.js
Shepherd 在 Github 上拥有 10.7k GitHub Star。它支持在多个前端框架中开箱即用，包括 React、Vue、Angular 等。其具有以下特点：
可以使用以下命令来安装 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>
);
}
}
React Joyride 在 GitHub 上拥有超过 5.1k Star，在 React 项目中开箱即用，用于向现有用户介绍新功能。其具有以下特点：
可以使用以下命令来安装 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">
<Joyride
steps={steps}
...
/>
...
</div>
);
}
}
Github：https://github.com/gilbarbara/react-joyride
Vue Tour 是一个轻巧、简单且可自定义的新手指引插件，可以与 Vue.js 一起使用。它提供了一种快速简便的方法来指导用户使用应用。它在 Github 上拥有 2.1 k Star。
可以通过以下命令来安装 Vue Tour：
npm install vue-tour
然后在应用入口导入插件（如果使用 vue-cli 搭建项目，通常是 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（只要在相关步骤弹出时它存在于 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 是一个用于创建 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 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
何在vue项目中使用用intro.js新手引导功能呢?这里需要使用到vue-introjs插件，vue-introjs是在Vue中绑定intro.js所使用的。在使用vue-introjs前，需要先安装intro.js
npm i intro.js --save
npm i vue-introjs --save// webpack.config.js
{
plugins: [
new webpack.ProvidePlugin({
// other modules
introJs: ['intro.js']
})
]
}如果是vue-cli3的项目，则在vue.config.js
chainWebpack: config=> {
config.plugin('provide').use(webpack.ProvidePlugin, [{
// other modules
introJs: ['intro.js']
}])
}在webpack中配置后，webpack.ProvidePlugin将会使用它，所以不需要在main.js中使用import introJs from ‘intro.js’来引用
import VueIntro from 'vue-introjs';
import 'intro.js/introjs.css';
Vue.use(VueIntro);需要在页面渲染完成后，使用
mounted: function () {
this.setGuide();
},
methods: {
setGuide() {
let data=[
{element: '.step_1',intro: '步骤1：对应class为.step_1的元素进行选择提示。',position: 'right'},
{element: '#step_2',intro: '步骤2：对应Id为#step_2的元素进行选择提示。',position: 'left'},
]
this.$intro().setOptions({
prevLabel: "上一步",
nextLabel: "下一步",
skipLabel: "跳过",
doneLabel: "完成",
steps:steps
}).oncomplete(()=> {
//点击结束按钮后执行的事件
}).onexit(()=> {
//点击跳过按钮后执行的事件
}).start()
},
}如果不想使用steps的方式，我们可以直接在html中通过指令的方式来使用，html如下：
<div v-intro="'这是步骤1的引导提示内容'" v-intro-step="1"></div>
<div v-intro="'这是步骤2的引导提示内容'" v-intro-step="2"></div>主要参数如下：
prevLabel: "上一步",
nextLabel: "下一步",
skipLabel: "跳过",
doneLabel: "结束",
tooltipPosition: 'bottom',/* 引导说明框相对高亮说明区域的位置 */
tooltipClass: '', /* 引导说明文本框的样式 */
highlightClass: '', /* 说明高亮区域的样式 */
exitOnEsc: true,/* 是否使用键盘Esc退出 */
exitOnOverlayClick: true,/* 是否允许点击空白处退出 */
showStepNumbers: true,/* 是否显示说明的数据步骤*/
keyboardNavigation: true,/* 是否允许键盘来操作 */
showButtons: true,/* 是否按键来操作 */
showBullets: true,/* 是否使用点点点显示进度 */
showProgress: false,/* 是否显示进度条 */
scrollToElement: true,/* 是否滑动到高亮的区域 */
overlayOpacity: 0.8, /* 遮罩层的透明度 */
positionPrecedence: ["bottom", "top", "right", "left"],/* 当位置选择自动的时候，位置排列的优先级 */
disableInteraction: false, /* 是否禁止与元素的相互关联 */
hintPosition: 'top-middle', /* 默认提示位置 */
hintButtonLabel: 'Got it',/* 默认提示内容 */更多详细的使用此处不再赘述，vue-introjs的github地址：https://github.com/alex-oleshkevich/vue-introjs。
文共3787字，预计学习时长8分钟
制作登陆引导页的模板和教程非常少，而且大多数都过于复杂或是添加了太多设计（如多个页面和表格等），但多数情况下一些非常简洁的设计就足矣。
本文将介绍在不用老式CSS库（如 bootstrap）的情况下，如何以CSS（Grid和Flex）为主要工具创建响应式用户界面。
那么就开始吧！
本文所要构建引导页的基本布局主要聚焦于一些基础部件，以便读者自己制作引导页时可以直接从中找出并使用自己想用的部件。下方为成果图例：
该网页主要有四个组成部分：导航栏、封面图像、卡片网格、以及页脚。
index.html的代码非常简单，主要包含div标签和整体的网页结构：
<body> <nav class="zone bluesticky"> <ulclass="main-nav"> <li><ahref="">About</a></li> <li><ahref="">Products</a></li> <li><ahref="">Our Team</a></li> <liclass="push"><ahref="">Contact</a></li> </ul> </nav> <div> <imgsrc="img/cover.jpg"> <divclass="coverText"><h1>Making the world a betterplace</h1></div> </div> <div class="zone bluegrid-wrapper"> <div> <imgsrc="./img/teamplay.jpg"> <divclass="text"> <h1>Teamplay</h1> <p>We work togetherto create impact</p> <button>Learn more</button> </div> </div> <div><img src="./img/strategy.jpg"> <divclass="text"> <h1>Strategy</h1> <p>Every goal is partof our strategy</p> <button>Learn more</button> </div> </div> <div><img src="./img/innovation.jpg"> <divclass="text"> <h1>Innovation</h1> <p>We're focused onthinking different</p> <button>Learnmore</button> </div> </div> </div> <footerclass="zone"><p> 2019 Assaf Elovic All right reserved. Formore articles visit <ahref="www.assafelovic.com"> www.assafelovic.com</a></p></footer> </div> </body>
因此，笔者这次只着重讲解网页样式的设计（采用CSS）。
用Grid和Flex设置布局样式
经验之谈：有些元素需要Grid风格的样式，如表格、卡片、媒体专辑（如Instagram上的内容）等，这种情况就使用Grid 。其他情况就都用 Flex。强烈建议深入学习这两个工具，因为要制作漂亮的响应式网页，只要掌握了Grid和Flex，就无需学习其他工具了。
导航栏
制作导航栏要使用Flex，这样就能做出导航栏需要的单向行。由于使用了<nav>标签，需要删除点（列表样式）。最后，为了删除浏览器设置的默认边距，应将边距重设为零：
.main-nav {
display: flex;
list-style: none;
margin: 0;
font-size: 0.7em;
}
在改变浏览器宽度时，部分导航栏会被删除，因此宽度缩小时要调整导航栏大小：
@media only screen and (max-width: 600px) {
.main-nav {
font-size: 0.5em;
padding: 0;
}
}
要让“联系方式”这个选项右对齐，就要将左边距设置为“auto”，这样就可以自动将超链接的左边距设置为最大值：
.push {
margin-left: auto;
}
最后，要让导航栏固定且始终出现在网页顶端，同时还要让导航栏覆盖在其他所有元素之上（z-index）：
.sticky {
position: fixed;
z-index: 1;
top: 0;
width: 100%;
}
封面
为保证画面简洁（即只保留中心内容），制作封面时应使用Flex。在Flex中设置好界面后，将内容水平居中对齐（X轴），布局容器和对齐项垂直居中（Y轴）。图像大小要适应整个屏幕，因此要将高度设置为100vh，这代表图像高度为100%：
.container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
封面文本还要居中且覆盖在图像之上：
.coverText {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: bold;
}
请参照完整CSS样式表：https://github.com/assafelovic/Basic-Landing-Page-Layout/blob/master/style.css，了解其他微调的方法。
卡片网格
如上文所述，制作引导页需要创建卡片网格，此时需要使用Grid。grid-template-columns可以定义每栏的样式（或div）。参考信息：如果把宽度设置为1fr，那每栏就只有一个区块。对其设置repeat函数（和一遍遍输入1fr的效果相同），则它就可以从最小350像素自动全屏填充（1fr）。最后，将网格间隔（也就是网格对象之间的填充间隔）设置为20像素：
.grid-wrapper {
display: grid;
grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));
grid-gap: 10px;
}
接下来，要设置网格内每个卡片的样式。如下文所示，定义每个卡片的边距和背景色，方法十分简单：
.card {
background-color: #444;
margin: 50px;
}
每个卡片要包含一张大小适应整个顶部区域的图片、一个标题和相应的文本段落、以及位于下方的“了解更多”按钮。而且卡片内部的图像、标题和段落要可控可调，代码如下所示：
.card > img {
max-width: 100%;
height: auto;
}.card h1 {
font-size: 1.5rem;
}.card p {
font-size: 1rem;
}
此时图片已经100%适应卡片宽度，但我们还可以在卡片文本区适当添加一些填充间隔：
.card > .text {
padding: 0 20px 20px;
}
最后，在每个卡片内部添加按键设计。将边框设置为0（因为系统会默认添加边框），再设置一些间隔、颜色等等：
button {
cursor: pointer;
background: gray;
border: 0;
font-size: 1rem;
color: white;
padding: 10px;
width: 100%;
}button:hover {
background-color: #e0d27b;
}
页脚
最后，页脚也很重要。页脚的设置方式非常简单。调整内部文本大小使之小于默认值，再给页脚设置一些间隔和颜色：
footer {
text-align: center;
padding: 3px;
background-color: #30336b;
}footer p {
font-size: 1rem;
}
完成了！按照这种简单的响应式布局方法，就可以制作几乎所有想要的引导页。还可以应用动画库，升级自己的页面布局——下面是一些推荐的动画库：
1. SweetAlert（https://sweetalert2.github.io/）— 添加精美的警告框
2. Typed.js（https://github.com/mattboldt/typed.js/） —在页眉处添加输入动画
3. Auroral（https://lunarlogic.github.io/auroral/） — 添加动画式渐变背景图
4. OwlCarousel（https://owlcarousel2.github.io/OwlCarousel2/）— 给元素添加动画效果
5. Animate.css（https://daneden.github.io/animate.css/） — 给加载元素添加精美动画效果
完整源代码：https://github.com/assafelovic/Basic-Landing-Page-Layout
留言 点赞 发个朋友圈
我们一起分享AI学习与发展的干货
如需转载，请后台留言，遵守转载规范
*请认真填写需求信息，我们会在24小时内与您取得联系。
