一号优惠经验分享网
51福利网的各种薅羊毛福利经验笔记

hbuilder常见uni-app怎么加入自己广告联盟代码小白笔记

小白慢慢自己研究的。仅适合小白,大神肯定有更好方法分享案列,可以自己百度

uni-app加广告联盟代码

51福利网

如果有自己的广告js代码一定要转为html格式,不要用一些在线html和js互转,转不完全

推荐用文言一心等ai给你转吧。

比如我初始的js代码是:

var p_w="70px";  
var p_h="70px";   
var p_s="https://img.51yhyh.com/flwp-content/uploads/2024/01/27f9bce672c914d.jpg";  
var p_l="https://www.51yhyh.com/3409"; 
document.writeln("<style type=\"text/css\">");
document.writeln(".f_f{ width:100%; position:fixed; left:70%;top:38%;width:"+p_w+"; height:"+p_h+"; bottom:0px; z-index:9999;}");
document.writeln(".f_pic{ width:"+p_w+"; height:"+p_h+"; margin:0px auto; position:relative; }");
document.writeln(".f_pic img{ width:"+p_w+"; height:"+p_h+";}");
document.writeln(".f_pic .f_close{z-index:2157999999 !important;height:16px; width:16px; font-size:13px; color:white;text-align:center;line-height:14px;background:rgba(0,0,0,0.7); position:absolute; top:-5px; right:-5px;border-radius:50%;}");
document.writeln("</style>");
document.writeln("<div class=\"f_f\" id=\"f_f\">");
document.writeln("<div class=\"f_pic\">");
document.writeln("<a href=\""+p_l+"\" target=\"_blank\"><img src=\""+p_s+"\" /></a>");
document.writeln("<span class=\"f_close\" id=\"f_close\">x</span>");
document.writeln("</div>");
document.writeln("</div>");

/**
var f_close = document.getElementById("f_close");
var f_div_f = document.getElementById("f_f");
f_close.onclick = function(){
	if(f_div_f){
		f_div_f.style.display = "none";
	}

}

**/

然后用ai帮我转成html格式如下:

<!DOCTYPE html>  
<html>  
<head>  
  <style>  
    .f_f {  
      width: 100%;  
      position: fixed;  
      left: 70%;  
      top: 38%;  
      width: 70px;  
      height: 70px;  
      bottom: 0px;  
      z-index: 9999;  
    }  
    .f_pic {  
      width: 70px;  
      height: 70px;  
      margin: 0px auto;  
      position: relative;  
    }  
    .f_pic img {  
      width: 70px;  
      height: 70px;  
    }  
    .f_pic .f_close {  
      z-index: 2157999999 !important;  
      height: 16px;  
      width: 16px;  
      font-size: 13px;  
      color: white;  
      text-align: center;  
      line-height: 14px;  
      background: rgba(0, 0, 0, 0.7);  
      position: absolute;  
      top: -5px;  
      right: -5px;  
      border-radius: 50%;  
    }  
  </style>  
</head>  
<body>  
  <div class="f_f" id="f_f">  
    <div class="f_pic">  
      <a href="https://www.51yhyh.com/3409" target="_blank">  
        <img src="https://img.51yhyh.com/flwp-content/uploads/2024/01/27f9bce672c914d.jpg" />  
      </a>  
      <span class="f_close" id="f_close">x</span>  
    </div>  
  </div>  
  <script>  
    var f_close = document.getElementById("f_close");  
    var f_div_f = document.getElementById("f_f");  
    f_close.onclick = function() {  
      if (f_div_f) {  
        f_div_f.style.display = "none";  
      }  
    };  
  </script>  
</body>  
</html>

然后再去vue页面加入广告代码即可

要在Vue页面中直接显示广告,你可以将广告代码放入一个<div>元素中,并使用CSS样式进行样式化。以下是一个简单的示例:

<template>  
  <div>  
    <!-- 广告容器 -->  
    <div class="ad-container">  
      <!-- 广告内容 -->  
      <div class="ad-content" v-html="adCode"></div>  
    </div>  
    <!-- 其他页面内容 -->  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      adCode: ''  
    };  
  },  
  mounted() {  
    this.fetchAd();  
  },  
  methods: {  
    fetchAd() {  
      // 请求广告代码  
      uni.request({  
        url: 'https://www.51yhyh.com/myadjs/xuanfulogo.js',  
        success: (res) => {  
          this.adCode = res.data; // 将获取到的广告代码赋值给adCode数据属性  
        },  
        fail: (err) => {  
          console.error('Failed to fetch script:', err);  
        }  
      });  
    }  
  }  
};  
</script>  
  
<style scoped>  
.ad-container {  
  position: fixed; /* 可根据需要调整位置 */  
  top: 0; /* 可根据需要调整位置 */  
  left: 0; /* 可根据需要调整位置 */  
  width: 100%; /* 可根据需要调整宽度 */  
  height: 100%; /* 可根据需要调整高度 */  
}  
.ad-content {  
  /* 在这里添加你想要的广告样式 */  
}  
</style>

在上述示例中,我们创建了一个ad-container的容器,并在其中放置了一个ad-content的元素。通过v-html指令,我们将adCode数据属性的内容插入到ad-content元素中。你可以在<style>标签中添加适当的CSS样式来定制广告的外观和位置。请确保将实际的广告代码URL替换为正确的地址。

打赏
一号优惠 · 51福利网薅羊毛福利具有时效性,如已失效,请留言
文章名称:《hbuilder常见uni-app怎么加入自己广告联盟代码小白笔记》-一号优惠 · 51福利网
免责申明:本站所有活动信息均来自网络,如有失效,不实或侵权,请联系我们删除。谢谢

评论 抢沙发

一号优惠经验分享网最新最全薅羊毛,现金红包线报网

一号优惠经验分享网提供每日最新内部优惠,薅羊毛活动,现金红包领取,免费福利和网赚福利手机赚钱线报,打造中国最受欢迎的网赚信息发布平台!51福利网

51联盟线报群赚钱·合作·帮助

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫

微信扫一扫

登录

找回密码

注册