Weapp-new-user-guide NPM

微信小程序新手引导组件

一个简单的微信小程序新手引导组件，支持镂空引导元素，不遮挡引导元素的操作，支持定义样式

引入

npm i weapp-new-user-guide

安装完在小程序开发者工具中点击菜单栏：工具 -> 构建 npm

在需要使用的页面的 json 文件中添加配置

{
  "usingComponents": {
    "weapp-new-user-guide": "/miniprogram_npm/weapp-new-user-guide/index"
  }
}

使用

<weapp-new-user-guide
  wx:if="{{ showGuide }}"
  options="{{ guideData }}"
  bind:stepChange="onGuideStepChange"
  bind:end="onGuideEnd"
/>

Page({
  ...
  data: {
    showGuide: true,
    guideData: [
      { selector: '.image_wrapper .tempImage', tips: '步骤1' },
      { selector: '.bottomIcon .setting', tips: '步骤2' },
      { selector: '.bottomIcon .playback', tips: '步骤3' },
      { selector: '.bottomIcon .buyBtn', tips: '步骤4', scrollViewSelector: '.scroll-view' },
    ],
  },
  ...
})

Props

参数	类型	默认值	说明
options	Array	[]	引导步骤数据
options[].selector	String	''	引导元素选择器
options[].tips	String	''	引导提示文字
options[].scrollViewSelector	String	''	引导元素所在的滚动元素选择器，如果引导元素在滚动元素内，需要传入该参数，否则引导元素可能会被滚动元素遮挡
hollowOut	Boolean	false	是否镂空引导元素，关闭时点击镂空位置会触发下一步，开启时高亮区域为镂空状态，点击事件可以正常触发，需要自己调用 `nextStep` 方法进行下一步
initDelay	Number	500	初始化延迟时间，防止元素还未创建时就开始查询节点，单位ms
zIndex	Number	3000	层级
pageKey	String	''	页面标识，用于区分同页面的不同引导，不传默认为路由字符串
animationTime	Number	250	动画时间，单位ms
tipsWrapperClass	String	''	提示文字容器类名
nextBtnText	String	'下一步'	下一步按钮文字
nextBtnClass	String	''	下一步按钮类名
endBtnText	String	'我知道了'	完成按钮文字
endBtnClass	String	''	完成按钮类名
jumpAllBtnText	String	'全部跳过'	跳过按钮文字
maskPadding	Number	5	遮罩层与引导元素的间距，单位px

Events

事件名	说明	参数
stepChange	引导步骤变化时触发	`{ pageKey: string, step: number }`
end	引导结束时触发	`{ pageKey: string }`

Methods

方法名	说明	参数
nextStep	下一步	-

<weapp-new-user-guide
  wx:if="{{ showGuide }}"
  id="guide"
  hollowOut
  options="{{ guideData }}"
  bind:stepChange="onGuideStepChange"
  bind:end="onGuideEnd"
/>

this.selectComponent('#guide')?.nextStep()

weapp wechat UserGuide 微信小程序

@everything-registry/sub-chunk-3120

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago