微信小程序关闭首页广告

由于之前微信小程序默认开启了首页广告位。导致很多老人误入广告页的内容,所以想着怎么屏蔽广告。好家伙,搜索一圈,要么是用户版本的屏蔽广告,或者是以下一个模棱两可的答案,要开发者设置一下什么参数的,如图:

然后根据这个思路,程序员嘛,当然找代码解决方案,盲目的搜索了一下,发现真的没有一个合适的答案,怎么办呢?死磕微信广告政策https://ad.weixin.qq.com/docs/72?branch_id=zzQy8 发现好像这个东西不是用代码控制的。哈哈哈,然后就开始慢慢找到解决方案啦,下面分三步,单单看截图不看文字也可以。

①登录进小程序管理后台,打开左侧栏的流量主模块,点进去,有下图:

② 点击进到广告管理,看到下图:

③默认是自主接入广告,banner广告是自己设置的,因为要看的是封面广告关闭, 所以切换到封面广告,将已开启的按钮关闭即可,如图:

如果不想设置关闭,那可以选择场景设置,设置哪些场景或者行业不显示。

然后就没有然后啦,然后首页的广告就可以关闭啦。

### 微信小程序实现首页广告弹窗的方法 #### 使用 `wx.showModal` 创建简单广告弹窗 对于简单的广告展示需求,可以直接调用微信内置API `wx.showModal` 来快速构建一个带有确认按钮的基础型广告弹窗[^2]。 ```javascript // app.js 或页面逻辑文件中触发此函数 function showAdvertise() { wx.showModal({ title: '特别推荐', content: '欢迎关注我们的最新优惠活动!点击查看详情...', confirmText: "立即查看", success(res) { if (res.confirm) { console.log('用户点击了立即查看'); // 跳转到具体链接或执行其他动作 } else if (res.cancel) { console.log('用户取消了查看'); } } }) } ``` 然而,为了提供更丰富的视觉效果以及更好的用户体验,建议开发自定义的广告弹窗组件。 #### 构建自定义广告弹窗组件 考虑到现有标准弹窗组件存在样式固定、交互方式有限等问题,在实际项目里往往需要更加个性化的解决方案。因此,创建一个专门针对广告推广用途设计的可复用UI控件显得尤为重要[^3]。 ##### 组件结构说明 - **WXML**: 定义弹窗的整体布局,包括背景遮罩层和主要内容区域。 - **WXSS**: 设置样式属性,比如透明度渐变动画等特效处理。 - **JS**: 控制显示隐藏状态切换逻辑,并监听关闭事件。 ##### 示例代码片段 ###### WXML 文件 ```xml <!-- components/ad-modal/index.wxml --> <view class="ad-mask" bindtap="hideMask" hidden="{{!isShow}}"> <view class="ad-content"> <!-- 这里放置具体的广告图片或其他形式的内容 --> <image src="/images/sample-ad.jpg"></image> <button type="primary" size="mini" bindtap="closeAd">关闭</button> </view> </view> ``` ###### WXSS 文件 ```css /* components/ad-modal/index.wxss */ .ad-mask { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, .7); display: flex; justify-content: center; align-items: center; } .ad-content { width: 90%; max-width: 300px; padding: 20px; border-radius: 8px; overflow: hidden; box-shadow: 0 0 10px #ccc; text-align: center; } .ad-content image { width: 100%; height: auto; } ``` ###### JS 文件 ```javascript // components/ad-modal/index.js Component({ properties: {}, data: { isShow: false, }, methods: { hideMask() { this.setData({ isShow: false }); }, closeAd(e) { e.stopPropagation(); // 阻止冒泡传播至父级元素触发hideMask方法 this.hideMask(); }, openAd() { this.setData({ isShow: true }); } } }) ``` 在页面初始化时可以通过调用 `openAd()` 方法来打开这个定制好的广告弹窗;当用户完成浏览并希望退出时,则可通过点击“关闭”按钮或者屏幕空白处的方式将其收起。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值