小白慢慢自己研究的。仅适合小白,大神肯定有更好方法分享案列,可以自己百度
uni-app加广告联盟代码
如果有自己的广告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替换为正确的地址。