基于web的introjs

这里要强调一下，这个是基于web的，我本来想在微信小程序里面使用，但是introjs里面的css样式微信小程序很多不支持。
注意，introjs用于商业是收费的。

参考博客：
官方文档：https://introjs.com
https://www.cnblogs.com/shenyixin/p/5266057.html
https://www.dowebok.com/35.html

下载代码

下载地址：https://github.com/usablica/intro.js/releases
下载后，里面主要包括三部分：
第一部分是我们要用的js库和css样式：intro.js和introjs.css
第二部分是themes文件夹，里面有一些我们想要设计的样式
第三部分是example文件夹，里面是官方例程

导入库

我们只需要在HTML文档里面导入intro.js和introjs.css即可使用

<link rel="stylesheet" href="css/introjs.css">
<script src="js/intro.js"></script>

使用

使用方法非常简单，具体可以参考example文件夹。基本用法如下：

在你需要遇到的HTML标签中加入：

<div class="span6" data-step="1" data-intro="步骤1">。。。</div>
<div class="span6" data-step="2" data-intro="步骤2">。。。</div>
<div class="span6" data-step="3" data-intro="步骤3">。。。</div>

然后在页面渲染结束后，如果是vue，一般是在mounted里面，开始intorjs引导：

introJs().start();

然后就可以了，一些更多的用法可以参考官方文档或例程。

其他

我在网上基本上只找到了这一个新手引导框架，好可惜不能用于小程序。然后继续查阅资料，发现一般新手引导都是自己绘制的，这样更加个性化。其思路就是在APP进入的最开始显示一个页面图层，然后记录下来，之后就不显示了。可以参考：

https://blog.csdn.net/qq_35695041/article/details/85134691
https://blog.csdn.net/qq_38194393/article/details/89495786

此外还有一种更通用的引导，但我觉得很鸡肋，因为并不能引导告诉用户如何使用APP，一般只是用来介绍新功能：

https://juejin.im/entry/59465923fe88c2006a7f3bc4?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com

最后

我个人认为，可以利用vue很便捷的样式绑定功能，实现一套新手引导的组件框架。这样可以引导用户更充分发掘APP的功能。

---

交流QQ群：【技术斋】646258285
关注微信公众号【技术斋】，发现更多精彩。