从个人开发和使用角度来说，新手引导属于一个比较鸡肋的功能。

反正就是有几个提示，就弹几个框。这里采用的方式是，用三倍图片，然后用2倍的尺寸，然后加上一个黑科技属性，可以做到弹框图片高清不模糊的效果。

话不多说直接上代码：使用点击 +1，的逻辑动态显示对应的图片

<Mask v-if="showGuide">
  <view class="maskGuide">
    <view v-if="guideNumber == 1" @tap="clickToNext">
      <image src="XXX.png" class="tl-img-1"/>
    </view>
    <view v-if="guideNumber == 2" @tap="clickToNext">
      <image src="XXX.png" class="tl-img-2"/>
    </view>
    <view v-if="guideNumber == 3" @tap="clickToNext">
      <image src="XXX.png" class="tl-img-3"/>
    </view>
    <view v-if="guideNumber == 4" @tap="clickToNext">
      <image src="XXX.png" class="tl-img-4"/>
    </view>
    <view v-if="guideNumber == 5" @tap="clickToNext">
      <image v-if="gender==1" src="XXX.png" class="tl-img-5"/>
      <image v-else src="XXX.png" class="tl-img-5"/>
    </view>
  </view>
</Mask>

js 逻辑：

uni.setStorageSync('isGuide', true) //存储本地，只弹出一次的逻辑

// 新手引导初步下一步逻辑
  clickToNext(){
    this.guideNumber +=1
    if(this.guideNumber == 6){
      uni.setStorageSync('isGuide', true)
      this.showGuide = false;    
    }
  },

less

.maskGuide{
  position: relative;
  width: 100vw;
  height: 100vh;
  .tl-img-1{
    position: absolute;
    top: 48rpx;
    left: 20rpx;
    width: 584rpx;
    height: 230rpx;
    image-rendering: -webkit-optimize-contrast;
  }
  .tl-img-2{
    position: absolute;
    top: 174rpx;
    left: 20rpx;
    width: 646rpx;
    height: 230rpx;
    image-rendering: -webkit-optimize-contrast;
  }
  .tl-img-3{
    position: absolute;
    top: 40rpx;
    right: 0;
    width: 630rpx;
    height: 308rpx;
    image-rendering: -webkit-optimize-contrast;
  }
  .tl-img-4{
    position: absolute;
    top: 240rpx;
    right: 10rpx;
    width: 604rpx;
    height: 112rpx;
    image-rendering: -webkit-optimize-contrast;
  }
  .tl-img-5{
    position: absolute;
    top: 164rpx;
    right: 35rpx;
    width: 684rpx;
    height: 1048rpx;
    image-rendering: -webkit-optimize-contrast;
  }
}

以上是目前想到的一个实现方案，如果有其他实现方案，欢迎大家补充。共勉！