在接入之前,请确认您的小程序已在U8AD.COM网站用户中心添加成功。
进入微信公众号平台|小程序后台,点击页面左侧的“开发”,进入“开发设置”,在服务器域名设置项中添加request合法域名:
https://www.u8ad.com
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
若不懂技术,可将小程序端代码打包发给客服,请客服免费帮忙免费接入