用户引导-聚光灯

核心实现基础：

使用非常大的border来冒充遮罩层

box-shadow: rgba(0,0,0,.5) 0px 0px 0px 2005px; 

完整示例

wxml，以下为整个引导层，一般放在需要聚光的地方

<view class="birthdayTipGuide" catchtap="onHideBirthdayTipGuide" wx:if="{{isShowBirthdayTipGuide}}"  catchtouchmove="preventTouchMove">
    <view class="birthdayTipGuideContent">
        <image class="birthdayTipGuideImage" mode="widthFix" src="这个是介绍图"></image>
        <image class="birthdayTipGuideBtn" catchtap="onGotoUserInfo" mode="widthFix" src="这个是一个操作btn"></image>
    </view>
</view>

注意：这里使用 catchtap ，用于阻止冒泡

wxss

.birthdayTipGuide{
  position: relative; /* 使其子元素可以使用绝对路径 */
}

/* 聚光灯层 */
.birthdayTipGuide::before {
  box-shadow: rgba(0,0,0,.5) 0px 0px 0px 2005px; 
  display:block;
  position: absolute;
  margin:0 auto;
  width:85%;
  height: 100%;
  top:-60rpx;
  left: 50%; /* 结合transform，用于block的左右居中 */
  transform:translate(-50%,0);
  border-radius: 30rpx;
  height: 60rpx;
  z-index:99;
  content:''
}

/* 平铺层，用于点击时捕获点击事件 */
.birthdayTipGuide::after {
  display: block;
  position: fixed; /* 必须使用fixed，才能跳出父元素的relative，才能铺满整个屏幕 */
  background-color: transparent;
  width:100%;
  height: 100%;
  content:'';
  z-index:999;
  top: 0px;
}

/* 内容 */
.birthdayTipGuideContent{
  z-index:99999;
  position: absolute;
  left:0px;
  margin-top:-20rpx;
}

.birthdayTipGuideImage{
  width:750rpx;
}
.birthdayTipGuideBtn{
  width:202rpx;
  margin-top:-20rpx;
}