微信小程序首页弹出广告的demo

这个微信小程序首页广告demo

仅供有需要的参考

.wxml

<!-- 广告展示 --><view class="AdView" hidden="{{showAd}}" catchtouchmove="preventMove">
<view class="bg" ></view>
<view class="active active-sport" >
<view class="cancel" bind:tap = "cancelTap" ></view>
<view class="active-content" bind:tap ="activeContent" data-id='2340173092'><text>this is ad</text><image class="active-img" src ='cloud://international-3bp20.696e-international-3bp20-1300609829/my-image.jpeg' mode="aspectFit"></image>
</view>
</view>
</view>

//事件 catchtouchmove方法主要作用是固定广告防止点击穿透，就是使用弹出广告的后面内容不能上下拉动。其中对应的.js方法可以不做任何处理。此处只能在真机上看到实际效果，在电脑上不能。并且此方法要放到广告view最外层

.wxss

.bg{width: 100%;height: 100%;position: fixed;top: 0;left: 0;   z-index: 990;background-color:rgb(180, 180, 180);opacity: 0.5;
}
.active{width: 80%;height:80%;background-color: #fff;position: absolute;top:10%;left:50%;transform: translate(-50%);z-index: 992;
}
.active-sport{animation: sport 1.5s linear 1;
}
@keyframes sport{from{ transform:rotate(0deg) skew(-10deg) scale(2.0) translate(-100%,0)}to{ transform:rotate(360deg) skew(0deg) scale(1.0) translate(-50%,0)}
}
.active-content{width: 80%;height:80%;background-color: blue ;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);text-align: center;}
.active-img{width: 100%;}
.cancel{background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTc5OTMwNDc5NTM2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIxMTkiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTg1MC41MzgzNDMgODk1LjUxNjc0NGMtMTEuNDk0Nzk5IDAtMjIuOTg4NTc0LTQuMzg2OTE0LTMxLjc2MzQyNC0xMy4xNjE3NjRMMTQxLjEwMzY5MiAyMDQuNjY5NDI2Yy0xNy41NDg2NzgtMTcuNTM0MzUyLTE3LjU0ODY3OC00NS45OTI0OTcgMC02My41MjU4MjUgMTcuNTQ4Njc4LTE3LjU0ODY3OCA0NS45NzcxNDctMTcuNTQ4Njc4IDYzLjUyNTgyNSAwbDY3Ny42NzEyMjcgNjc3LjY4NTU1M2MxNy41NDg2NzggMTcuNTM0MzUyIDE3LjU0ODY3OCA0NS45OTI0OTcgMCA2My41MjU4MjVDODczLjUyNjkxNyA4OTEuMTI4ODA3IDg2Mi4wMzIxMTggODk1LjUxNjc0NCA4NTAuNTM4MzQzIDg5NS41MTY3NDR6IiBwLWlkPSIyMTIwIiBmaWxsPSIjY2RjZGNkIj48L3BhdGg+PHBhdGggZD0iTTE3Mi44NjcxMTYgODk1LjUxNjc0NGMtMTEuNDk0Nzk5IDAtMjIuOTg4NTc0LTQuMzg2OTE0LTMxLjc2MzQyNC0xMy4xNjE3NjQtMTcuNTQ4Njc4LTE3LjUzNDM1Mi0xNy41NDg2NzgtNDUuOTkyNDk3IDAtNjMuNTI1ODI1bDY3Ny42NzEyMjctNjc3LjY4NTU1M2MxNy41NDg2NzgtMTcuNTQ4Njc4IDQ1Ljk3NzE0Ny0xNy41NDg2NzggNjMuNTI1ODI1IDAgMTcuNTQ4Njc4IDE3LjUzNDM1MiAxNy41NDg2NzggNDUuOTkyNDk3IDAgNjMuNTI1ODI1TDIwNC42Mjk1MTcgODgyLjM1NDk3OUMxOTUuODU1NjkgODkxLjEyODgwNyAxODQuMzYwODkxIDg5NS41MTY3NDQgMTcyLjg2NzExNiA4OTUuNTE2NzQ0eiIgcC1pZD0iMjEyMSIgZmlsbD0iI2NkY2RjZCI+PC9wYXRoPjwvc3ZnPg==') no-repeat 10rpx 10rpx/40rpx 40rpx;
width: 60rpx;
height: 60rpx;
position: absolute;
top:5rpx;
right: 5rpx;
z-index: 998;}

此处cancel的背景图片只能使用base64或本地。

image 只能是网络或者fieldId上

可以作用CSS3特性，制作动画，制作动画时要注意加上transform之后，才可以增加rotate旋转，skew翻转，scale缩放，translate移动。

.js

// miniprogram/pages/demo/demo.js
Page({/*** 页面的初始数据*/data: {playlist:[],showAd:false},//cancelTap隐藏方向cancelTap(){this.setData({showAd:!this.data.showAd});},//广告链接activeContent(event){console.log(event.currentTarget.dataset.id);// this.setData({showAd:!this.data.showAd});let musicId=event.currentTarget.dataset.id;wx.navigateTo({url:`../musicList/musicList?playlistId=${musicId}`, success(){console.log('navigate success')},fail(err){console.log(err)}});},//阻止滚动穿透preventMove(e){console.log(e);},/*** 生命周期函数--监听页面加载*/async onLoad(options) {this._getPlaylist();},async _getPlaylist(){wx.showLoading({title: '加载中',})let listCount = await wx.cloud.callFunction({name: 'music',data: {$url: 'getPlaylist',start: this.data.playlist.length,count: 15}}).then(res => { console.log(res); res.result.map(value=>{this.setData({playlist:this.data.playlist.concat(value)})})wx.hideLoading();return res.result.length;}).catch(err=>{console.error;wx.hideLoading();wx.showToast({title: '加载失败，稍后再试！',icon:'none',duration:1500})});return listCount;},
//tcbRouter async tcbmusicTap(){let result =   await wx.cloud.callFunction({name:'tcbRouter',data:{$url:'music'}}).then(res=>console.log(res)).catch(err=>console.error);},async tcbmovieTap(){let result =  await wx.cloud.callFunction({name:'tcbRouter',data:{$url:'movie'}}).then(res=>console.log(res)).catch(err=>console.error);},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {//  this.setData({showAd:false});},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/async onPullDownRefresh() {this.setData({ playlist:[]});await this._getPlaylist();wx.stopPullDownRefresh();},/*** 页面上拉触底事件的处理函数*/async onReachBottom() {let flag = await this._getPlaylist();if(!flag){wx.showToast({title: '我是一个有底的人!',duration:2000,image:'../../images/girl3.png'})}},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

微信小程序首页弹出广告的demo相关推荐

微信小程序无法弹出授权登录窗口
微信小程序开发,小程序接口问题..... 今天在写微信小程序的时候,为了获取到后台的token,必须要获取到code,encryptedData,iv ,rawData,signature五个值.co ...
微信小程序自定义弹出框组件，模拟wx.showModal
微信小程序开发交流qq群 173683895 效果图: 代码 wxml <view wx:if='{{showModal}}'><view class='mask_layer' ...
微信小程序input弹出键盘挡住文字的解决办法
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 解决思路:阻止键盘弹起时,自动上推页面.输入框获取焦点的时候让页面绝对定位,相对底部 100 像素.失去焦点的 ...
微信小程序购物车弹出层
https://www.jianshu.com/p/a0c2c8712dab 微信小程序购物车数量加减功能 wxml:  <button bin ...
微信最新授权登录微信小程序无法弹出授权弹框 open-type getUserInfo获取不到用户信息授权不弹框
解决办法使用getUserProfile接口 !!!! 大大的坑啊,调试了半天 getUserProfile(e) {// 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接 ...
微信小程序—自定义弹出式键盘（车牌键盘、十六进制键盘），可快速定义不同场景键盘
摘要小程序input组件提供的键盘有四种(text-文本.number-数字.idcard-身份证.digit-小数点),但输入场景万千,很多情况下都需要排除不必要的干扰,比如车牌输入.色值输入,或 ...
微信小程序vantweapp-Dialog弹出框提交表单，并还原确定按钮样式
vantweapp中Dialog弹出框使用组件调用,怎么将form表单的提交按钮与Dialog弹出框相结合呢解决方案: wxml代码 <van-dialoguse-slottitle=&quo ...
微信小程序之弹出提示框确认取消按钮以及在该api内的方法中不能使用setData的问题！
首先,我们来介绍一下弹出提示框: wx.showModal({title: '提示',content: '这是一个模态弹窗',success (res) {if (res.confirm) {cons ...
微信小程序自定义弹出模态框禁止底部滚动
图示: wxml代码: <view class='fix_bottom'> <view>分享</view> <view>电话咨询</view> ...
微信小程序自定义弹出框
网上搜了一下感觉都没有好用的自定义弹框就自己手写了一个,方便以后CV 弹框可以点击按钮关闭,也可以点击空白关闭代码很简单 wxml <view bindtap="submit&quo ...

微信小程序首页弹出广告的demo

微信小程序首页弹出广告的demo相关推荐

最新文章

热门文章

微信小程序 首页弹出广告的demo

微信小程序 首页弹出广告的demo相关推荐

最新文章

热门文章

微信小程序首页弹出广告的demo

微信小程序首页弹出广告的demo相关推荐