This article shares the specific code for the homepage pop-up advertisement for WeChat applets for your reference. The specific content is as follows
This WeChat applet homepage ad demo
For reference only
.wxml
<!-- Advertising display -->
<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/' mode="aspectFit"></image>
</view>
</view>
</view>
//The main function of the event catchtouchmove method is to fix the ad to prevent click penetration, that is, use the pop-up ad to not pull up and down. The corresponding .js method can be processed without any processing. Here you can only see the actual effect on the real machine, but not on the computer. And this method should be placed on the outermost layer of the advertising 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;
}
Here, the background image of cancel can only be used with base64 or local.
image can only be on the network or fieldId
It can be used to create CSS3 features and animations. When creating animations, you should pay attention to adding transform before adding rotate rotation, skew flip, scale scale, and translate movement can be increased.
.js
// miniprogram/pages/demo/
Page({
/**
* Initial data of the page
*/
data: {
playlist:[],
showAd:false
},
//cancelTap hides direction cancelTap(){
({showAd:!});
},
//Advertising link activeContent(event){
();
// ({showAd:!});
let musicId=;
({
url:`../musicList/musicList?playlistId=${musicId}`,
success(){
('navigate success')
},
fail(err){
(err)
}
});
},
//Stop scrolling penetration
preventMove(e){
(e);
},
/**
* Lifecycle function-listen to page load
*/
async onLoad(options) {
this._getPlaylist();
},
async _getPlaylist(){
({
title: 'loading',
})
let listCount = await ({
name: 'music',
data: {
$url: 'getPlaylist',
start: ,
count: 15
}
})
.then(res => {
(res);
(value=>{
({
playlist:(value)
})
})
();
return ;
})
.catch(err=>{;();({
title: 'Loading failed, try again later! ',
icon:'none',
duration:1500
})});
return listCount;
},
//tcbRouter
async tcbmusicTap(){
let result = await ({
name:'tcbRouter',
data:{
$url:'music'
}
})
.then(res=>(res))
.catch(err=>);
},
async tcbmovieTap(){
let result = await ({
name:'tcbRouter',
data:{
$url:'movie'
}
})
.then(res=>(res))
.catch(err=>);
},
/**
* Lifecycle function--listening page rendering is completed for the first time
*/
onReady: function () {
},
/**
* Lifecycle function--listening page display
*/
onShow: function () {
// ({showAd:false});
},
/**
* Lifecycle function--listening page hidden
*/
onHide: function () {
},
/**
* Lifecycle function-listening page uninstall
*/
onUnload: function () {
},
/**
* Page-related event handling function-listen to user pull-down action
*/
async onPullDownRefresh() {
({ playlist:[]});
await this._getPlaylist();
();
},
/**
* The handling function of the bottoming event on the page
*/
async onReachBottom() {
let flag = await this._getPlaylist();
if(!flag){
({
title: 'I am a person with a foundation!',
duration:2000,
image:'../../images/'
})
}
},
/**
* User clicks to share
*/
onShareAppMessage: function () {
}
})
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.