本文例項為大家分享了微信小程式實現首頁彈出廣告的具體程式碼，供大家參考，具體內容如下

這個微信小程式首頁廣告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 () {
 
 }
})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。