微信小程序广告弹出与关闭

介绍一个简单的案例，广告的弹出与关闭，页面如下：

image

点击×按钮，该页面删除
思路如下：

• 设置大view高宽为屏幕大小，fixed定位，透明居最外层，用isSuccess控制此view显示还是消失
• 设置里面的图片居中
• 简历一个小的view，给一个时间bindtap为close,当点击时，isSuccess从false转为true

<!--pages/home/home.wxml-->
<view class="girl" wx:if='{{isSuccess}}'>
  <view bindtap="close">×</view>
  <image src="https://s2.hdslb.com/bfs/static/blive/blfe-message-web/static/img/nodata.4d721f9d.png">
  </image>

</view>

/* pages/home/home.wxss */
.girl{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.girl image{
  width: 400rpx;
  height: 300rpx;
}
.girl view{
  width: 30rpx;
  height: 30rpx;
  line-height: 30rpx;
  align-items: center;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  right: 200rpx;
  top: 200rpx;
}

// pages/home/home.js
Page({
  del(e) {
    close(){
    this.setData({
      isSuccess:false
    })
  },
 
  /**
   * 页面的初始数据
   */
  data: {
    isSuccess:true
  }
})