小程序进入首页时弹出广告

article/2025/9/11 6:31:05

项目需求，判断用户是否开通会员，没开通会员的话每次进入小程序弹出一个引导开通会员的弹窗，已经开通会员的不在弹
先看下效果图
在这里插入图片描述
wxml代码

	<!-- 广告展示 --><view class="mask" hidden="{{showAd}}"><view class="AdView-mask" animation="{{animationData}}"><image class="mask-img" src="https://adminapi.sukliyw.cn/file/pic/20201119133713712425.png"></image><image class="an-niu" catchtap="toOpenMember" src="../../images/anniu.png"></image><image class="close-mask" bindtap="hiddenMsak" src="../../images/closemask.png"></image></view></view>

css代码

/* 广告弹窗 */
.mask {width: 100%;height: 100%;background: rgba(0, 0, 0, .5);position: fixed;top: 0;bottom: 0;z-index: 99998;
}.mask .AdView-mask {position: relative;width: 664rpx;height: 864rpx;top: 300rpx;left: 43rpx;}.mask .AdView-mask .mask-img {width: 664rpx;height: 767rpx;}.mask .AdView-mask .an-niu {position: absolute;width: 351rpx;height: 102rpx;top: 638rpx;left: 157rpx;
}.mask .AdView-mask .close-mask {position: absolute;width: 57rpx;height: 57rpx;bottom: 0;left: 302rpx;
}

js代码

// 获取用户开通会员与否，来展示首页蒙版getUserMessage() {var deptId = wx.getStorageSync('deptId')var token = wx.getStorageSync('token')console.log("token==========", token);var _this = thiswx.request({url: app.globalData.api + `/userMsg/${deptId}`,method: "POST", //指定请求方式header: {'content-type': 'application/json','token': token},success: function (res) {console.log("res=============", res);if (res.data.code == 200) {var nowtimestamp = Date.parse(new Date());if (res.data.data.vipEndTime > nowtimestamp) {_this.setData({showAd: true})} else {// 显示遮罩层var animation = wx.createAnimation({duration: 500,timingFunction: "linear",delay: 0})// this.animation = animationanimation.translateY(300).step()_this.setData({animationData: animation.export(),showAd: false})setTimeout(function () {animation.translateY(0).step()_this.setData({animationData: animation.export()})}.bind(this), 200)}}}})},// 点击隐藏弹出蒙版hiddenMsak() {var animation = wx.createAnimation({duration: 500,timingFunction: "linear",delay: 0})this.animation = animation;animation.translateY(300).step()this.setData({animationData: animation.export(),})setTimeout(function () {animation.translateY(0).step()this.setData({animationData: animation.export(),showAd: true})}.bind(this), 200)},// 生命周期onLoad: function () {//根据自己项目需求啥时候弹出setTimeout(() => {this.getUserMessage()}, 1000)},