首页 >   SDK下载 >

SDK接入文档   |   SDK接入文档(uni-app开发)   |   SDK接入文档(微擎影视类开发)

U8广告SDK接入流程(uni-app开发)

在接入之前，请确认您的小程序已在U8AD.COM网站用户中心添加成功。

⼀、添加合法域名

进入微信公众号平台|小程序后台，点击页面左侧的“开发”，进入“开发设置”，在服务器域名设置项中添加request合法域名： 

https://www.u8ad.com

二、SDK接入小程序

1、在官网下载SDK包，立即下载。

2、将解压后的utils文件夹中u8ad_sdk.min.js，u8ad_md5.js和u8ad_conf.js放入小程序utils文件夹中，若 没有utils请创建。

引入完成后目录结构如下：

三、基本配置

1、配置u8ad_conf.js文件：

进入U8广告官网用户中心，打开【我的小程序】-【小程序列表】页面，将对应小程序AppKEY填入到u8ad_conf.js中的app_key中即可。 

exports.app_key = “xxxx”; //如下图所示，小程序列表页面获取到的AppKEY

2、在根目录下main.js文件引入sdk代码 

import u8ad from './utils/u8ad_sdk.min.js'

四、接入广告

假设您要接入的页面为/pages/index/index.wxml

1、在index.wxml同级目录下的index.js中Page参数对象的data节点中配置广告数据变量

data() {
	return {
		adlist: []	//定义广告变量
	}
},
onLoad() {
	 //拉取广告，放入adlist变量
	 var u8app = getApp();
	 var that=this;
	 u8app.u8ad.getu8Ads({'adtype':5},function(res){
	 	for(var e=0;e < res.data.length;e++){
	         res.data[e].encdata={"encdata":res.data[e].encdata};
	     }
	     that.adlist=res.data;
	 });
},
	
//广告点击事件
u8adreward:function(e){
	var u8app = getApp();
	var info=e.currentTarget;
	var jump={};
	u8app.u8ad.u8AdsClk(info.id);
	for(var ee=0;ee < this.adlist.length;ee++){
		if(this.adlist[ee].ckey==info.id){
			jump=this.adlist[ee];
		}
	}
	
	//可在此处自行给予用户奖励（激励广告）
	
	uni.navigateToMiniProgram({
		appId: jump.appId,
		path: jump.load_page,
		extraData: jump.encdata
	});
},

2、广告显示代码

//悬浮样式
<view class="u8ad_fixed">
	<image @click="u8adreward" :id="adlist[0].ckey" :src="adlist[0].logo" mode="aspectFill"></image>
</view>

//banner图标样式
<view class="u8ad_list">
	<image v-for="ad in adlist"  @click="u8adreward" :id="ad.ckey" :src="ad.logo" mode="aspectFill"></image>			
</view>

3、广告样式代码

.u8ad_fixed{width:60px;height: 60px;border-radius: 50%;position: fixed;right: 10px;bottom: 70px;z-index: 666; overflow: hidden;}
.u8ad_fixed image{width:60px;height: 60px;border-radius: 50%;}

.u8ad_list{width:100%;height: 60px;overflow: hidden;}
.u8ad_list image{width:50px; height:50px;border-radius: 50%;margin:5px;float: left;}

.u8ad_banner{width:100%;height: 64px; border-top:0.5px solid #007AFF; border-bottom:0.5px solid #007AFF;box-shadow: 0 0 7rpx 0 rgba(0,127,255,0.50);}
.u8ad_banner image{width:42px;height: 42px;border-radius: 50%;margin: 11px;float: left;}
.u8ad_banner .u8ad_con{width:50%;height:50px;margin-top: 11px; display: block; float: left; overflow: hidden;}
.u8ad_banner .u8ad_con .u8ad_tit{width:100%;height: 18px;line-height: 18px;font-size: 14px; display:block;}
.u8ad_banner .u8ad_con .u8ad_des{width:100%;height: 30px;line-height: 14px;overflow: hidden; font-size: 10px; display:block;}
.u8ad_banner .u8ad_btn{height:26px;line-height:27px;font-size: 12px; display: flex; float: right;color: #0066CC;border:0.5px solid #0066CC; border-radius:15px;text-align: center;padding: 0 13px; margin:17px 10px 7px 0;}
.u8ad_banner .u8ad_tip{width: 60px;height: 12px;line-height: 12px;font-size: 12px; display: flex;float: right; border-radius: 6px 0 0 0;background-color: #aaa;color: #fff;padding:1px 10px;}

五、接入后检测

运行到微信小程序开发中工具，打开调试器查看入口页面是否请求https://www.u8ad.com/api/config

广告页面是否请求https://www.u8ad.com/api/ad

点击广告是否请求https://www.u8ad.com/api/cli，并且弹窗跳转提示

请求正常则说明接入成功

遇到问题:

• 如果没有显示广告或者后台数据展示不正常，请检查⼀遍接入流程，确保没有漏掉其中步骤。

• 如果检查接入没问题还是没有广告，请截图控制台console和网络请求network反馈给客服。

联系方式:

客服微信：jrqianlong(二维码如下)，客服QQ：1026953886

若不懂技术，可将小程序端代码打包发给客服，请客服免费帮忙免费接入

Top