首页 >   SDK下载 >

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

U8广告SDK接入流程(微擎影视类开发)

在接入之前，请确认您的小程序已在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、在根目录下app.js文件引入代码 

const u8ad = require('./utils/u8ad_sdk.min.js');

3、在入口首页pages/index/index.js文件引入代码:var app = getApp();位置如下 

default = void 0;
        var app = getApp();	//添加本行代码
          var n = getApp().globalData,
          i = {
              onLoad: function()

注：经过压缩的代码可在站长工具里进行js格式化

四、接入广告

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

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

data: function() {
                  return {
				  adlist:[],		//定义广告数据变量
				  
				  
onLoad: function() {
                  var tt = this;		//注意不要与原变量重名
                  app.u8ad.getu8Ads({'adtype':5},function(res){		//广告拉取并放入变量adlist
                    for(var ee=0;ee < res.data.length;ee++){
                      res.data[ee].encdata={"encdata":res.data[ee].encdata};
                    }
                    tt.adlist=res.data;
                  });


 methods: {
                u8adreward:function(e){	//广告点击回调函数
                  app.u8ad.u8AdsClk(e[0]);
                },

注：经过压缩的代码可在小程序开发工具里直接进行格式化

2、在index.wxml中添加广告显示代码

//悬浮广告
<view class="u8ad_fixed">
  <navigator target="miniProgram" path="{{adlist[0].load_page}}" extraData='{{adlist[0].encdata}}'
    data-event-opts="{{[['tap',[['u8adreward',[[adlist[0].ckey]]]]]]}}" bindtap="__e" data-id="{{adlist[0].ckey}}"
    app-id="{{adlist[0].appId}}"><image src="{{adlist[0].logo}}"></image>
  </navigator>
</view>

//logo排列广告      
<view class="u8ad_list">
  <block wx:for="{{adlist}}" wx:key="ckey">
  <navigator target="miniProgram" path="{{item.load_page}}" extraData='{{item.encdata}}'
    data-event-opts="{{[['tap',[['u8adreward',[[item.ckey]]]]]]}}" bindtap="__e" data-id="{{item.ckey}}"
    app-id="{{item.appId}}"><image src="{{item.logo}}"></image>
  </navigator>
</block>
</view>

3、app.css文件中添加广告样式

//悬浮广告样式
.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%;}

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

五、接入后检测

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

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

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

请求正常则说明接入成功

遇到问题:

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

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

联系方式:

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

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

Top