如何使用引导功能

参考文档：createTour()

准备物料

• 准备好需要进行引导的页面元素，并为这些元素赋予唯一的 ID（如text1,button1），以便在创建漫游式引导时能够正确引用它们作为目标组件。

使用方法

• 在主内容区挂载完成后，可以通过调用mobi.createTour(steps)来定义并启动一段漫游式引导。steps参数是一个数组，包含每个步骤的对象，每个对象应至少包含title和description属性来描述该步骤的目的和信息。

• 如果你想将某个页面组件设为目标，则可以在对应步骤对象中添加target属性，并设置为目标组件的 ID。

• 以下是一个简单的示例代码，用于创建一个两步的漫游式引导：

  var code =  await mobi.createTour([{
        title: '第一步',
        description: '这是引导的第一步描述',
        target:text1
      },
      {
        title: '第二步',
        description: '这是引导的第二步描述',
        target: button1
      }
  ]);
  
  if(code){
    //同意
  }else{
    //拒绝
  }

• 调用createTour()后，它会返回一个 Promise，当用户点击结束按钮完成引导时，Promise 会以true的值 resolve；如果用户在其他情况下关闭了引导，Promise 会以false的值 resolve。

配置以及效果展示

注意事项

• 每个步骤中的title和description是必填项，缺少这两个属性可能导致引导无法正常显示。

• target属性是可选的，但如果提供了无效的组件 ID，可能会导致引导在尝试聚焦该组件时出现问题。

• 确保所有的目标组件在引导开始前就已经存在于 DOM 中，否则createTour()可能无法正确地找到并聚焦这些组件。

• 引导过程中，尽量避免对页面结构做出重大更改，以免影响引导的流畅性和用户体验。