基于web的introjs

最新推荐文章于 2024-03-04 16:58:37 发布

朽木白露

最新推荐文章于 2024-03-04 16:58:37 发布

阅读量890

点赞数

分类专栏： # APP

本文链接：https://blog.csdn.net/qq_45467083/article/details/104817483

版权

APP 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

QQ群招募中：646258285（招募中，没几个人说话），
需要交流的朋友可以直接加我微信( DntBeliv )或QQ( 1121864253 )

这里要强调一下，这个是基于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