个人开发者一枚。。之前为了偷懒，做的小程序都没有好好地做用户引导，导致新用户上手的不多。

所以这次下决心好好地做一个用户引导。以下是最终效果（当然，我目前还没上新版本，所以你就算找到这个小程序也看不到这个效果）：

初步设想

做之前，先说说我想做成怎样的。

1、要井水不犯河水。我的几个小程序功能都已经做全了，我不想再为了这个用户引导功能去大改里面的逻辑，包括页面啥的。所以用户引导的功能实现最好能独立模块，与原来的代码尽量低耦合。

2、要能复用。用户引导可能会在各个小程序的不同页面中出现，所以必须能够复用。

因为这两个原因，做成组件是再好不过的了。把各个用户引导界面所需要展示的元素用配置数组的方式传给组件，再由组件去呈现出来。

配置数组

初步设计中，配置数组应该包括如下内容：

1、突出元素。即在遮罩层中需要突出展示的页面元素，如上面示意图中的按钮。配置数组应传入元素ID。

2、说明文字，为了美观，说明文字最好用气泡框。配置数组要传入文字内容，可能要允许多段文字，然后可以配置相关的位置大小样式。

3、说明图片。本人美工不行，但是如果是专业的团队应该会想用更生动的说明图片来替代说明文字。如以下这种的：

配置数组必须传入图片路径，且应该允许多张图片，并且可以自定义图片的位置大小等。

相关事件

遮罩层的相关事件其实很简单，就是点击。一点就没了。所以我们必须把这个事件再反馈出来。

大致想法就是这些，我们开工吧。