首页 >   SDK下载 >

易速小程序联盟SDK接入流程

在接入之前,请确认您的小程序已在易速小程序联盟后台添加成功。

⼀、准备工作

1、在官网下载SDK包,或点击下载最新SDK包。

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

https://www.yisuxcx.com

二、SDK接入小程序

1、引入js文件:将解压后的utils文件夹中yisuad_sdk.js和yisuad_conf.js放入小程序utils文件夹中,若 没有utils请创建。

2、引入广告组件:将components文件夹中yisuAD文件夹放入小程序components文件夹中,若没有 components请创建。

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

三、基本配置

1、配置yisuad_conf.js文件:

进入易速小程序联盟后台,依次点击“我的小程序”、“小程序列表”菜单,找到您添加的将要接SDK的小程序,将APPKey填入到yisuad_conf.js中的app_key中即可。

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

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

const yisuad = require('./utils/yisuad_sdk.min.js');

四、接入广告

目前有插屏广告、banner、悬浮广告三种展示形式。

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

1、在index.wxml同级目录下的index.json中引入yisu-ad组件:

{ 
	"usingComponents": { 
		"yisu-ad": "/components/yisuAD/yisuAD" 
	} 
} 

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

Page({
	data: 
	{ 
		// 需在 yisuad.ad 中配置广告位 
		yisuad: 
		{ 
			adData: {}, 
			ad: {
				banner: "banner", // banner 广告开关 
				insert: "insert", // 插屏广告开关 
				fixed: "fixed" // 悬浮广告开关 
				//如不需要展示删除即可 
			} 
		}
		// 您的其它数据 
		// OtherData: {} 
	} 
});

3、在index.wxml中按需引入对应类型广告

<!-- banner广告,按需引入 --> 
<view class="yisu_banner" style="background: #fffff;color:#333;"> 
	<yisu-ad data-id="{{yisuad.ad.banner}}" adData="{{yisuad.adData}}" bindadload="yisuadLoad" bindclick="yisuadClick" 
bindclose="yisuadClose" class="yisu_component"></yisu-ad> 
</view> 

<!-- 插屏广告,按需引入 --> 
<view class="yisu_insert"> 
	<yisu-ad data-id="{{yisuad.ad.insert}}" adData="{{yisuad.adData}}" bindadload="yisuadLoad" bindclick="yisuadClick" 
bindclose="yisuadClose" class="yisu_component"></yisu-ad>
</view> 

<!-- 悬浮广告,按需引入 --> 
<view class="yisu_fixed"> 
	<yisu-ad data-id="{{yisuad.ad.fixed}}" adData="{{yisuad.adData}}" bindadload="yisuadLoad" bindclick="yisuadClick" 
bindclose="yisuadClose" class="yisu_component"></yisu-ad> 
</view> 
4、单页展示多banner广告(可选) index.js需修改为
Page({
	data: { 
		// 需在 yisuad.ad 中配置广告位 
		yisuad: { 
			adData: {}, 
			ad: {
				banner: ['banner_01', 'banner_02', 'banner_03'], // 展示多少 banner 广告就在 banner 字段中添加多少个“banner_序号”组成的元素 
				insert: 'insert', // 插屏广告开关 
				fixed: 'fixed' // 悬浮广告开关 
			} 
		}
		// 您的其它数据 
		// OtherData: {} 
  	} 
});

index.wxml修改为

<!-- banner 广告,按需引入--> 
<view class="yisu_banner" style="width:100%;"> 
	<yisu-ad data-id="{{yisuad.ad.banner[0]}}" adData="{{yisuad.adData}}" bindadload="yisuadLoad" bindclick="yisuadClick" bindclose="yisuadClose" class="yisu_component"> </yisu-ad> 
</view> 

<!-- banner 广告,按需引入--> 
<view class="yisu_banner" style="width:100%;"> 
	<yisu-ad data-id="{{yisuad.ad.banner[1]}}" adData="{{yisuad.adData}}" bindadload="yisuadLoad" bindclick="yisuadClick" bindclose="yisuadClose" class="yisu_component"> </yisu-ad>
</view> 

<!-- banner 广告,按需引入 --> 
<view class="yisu_banner" style="width:100%;"> 
	<yisu-ad data-id="{{yisuad.ad.banner[2]}}" adData="{{yisuad.adData}}" bindadload="yisuadLoad" bindclick="yisuadClick" bindclose="yisuadClose" class="yisu_component"> </yisu-ad> 
</view>

其中yisu-ad节点的data-id属性{{yisuad.ad.banner[x]}}需要遵循以下2点:

• 不要跟当前页面的其他data-id属性重复

• 必须在当前页面数据data.yisuad.ad.banner数组中配置过

5、通过调用接⼝获取要展示广告的数据来⾃定义展示(可选)

调用方式:

onLoad: function() {
    let app = getApp(); //拉取广告 
},

回调参数对象格式如下

字段含义

appId广告小程序的 appid
logo广告小程序的
logo图片
name广告小程序名称
desc广告小程序的简单介绍
load_page广告跳转地址
img带广告小程序的二维码图片的地址
adtype广告类型 1:banner 2:插屏 4:悬浮
ckey点击上报参数
encdata直接跳转参数
jump_type1:扫码跳转,2:直接跳转
{
	errcode: 0, 
	data:[
		{ 
			appId:"wxb45a6fb65cd6544b", 
			logo:"https://www.yisuxcx.com/Public/images/yisuxcx_logo.png", 
			name:"易速小程序联盟", 
			desc:"一站式小程序营销平台", 
			load_page:"pages/index/index", 
			img:"https://image.yisuxcx.com/images/preview/f_preview.jpg", 
			adtype:1, 
			ckey:"67ba65c163713bf02a5258ce0be43d5f", 
			encdata:"MDAwMDAwMDAwMISPa69-qIyefYWFk4izeNqAum3Zg4y-n425dNY", 
			jump_type:1 
		},{ 
			appId:"wxb45a6fb65cd6544b", 
			logo:"https://www.yisuxcx.com/Public/images/yisuxcx_logo.png", 
			name:"易速小程序联盟", 
			desc:"一站式小程序营销平台", 
			load_page:"pages/index/index", 
			img:"", 
			adtype:1, 
			ckey:"67ba65c163713bf02a5258ce0be43d5f", 
			encdata:"MDAwMDAwMDAwMISPa69-qIyefYWFk4izeNqAum3Zg4y-n425dNY", 
			jump_type:2 
		},
	] 
} 

五、接入后检测

按照上述步骤接入SDK后,在微信小程序开发工具的控制台下观察有没有关于易速SDK的报错信息,如果没有,则说明接入成功。

接入成功后请登录易速小程序联盟后台,点击左侧菜单“我的小程序”,在“小程序列表”找到刚接入SDK的小程序,点击“测试SDK”,成功即可提交上线。

遇到问题:

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

• 如果检查接入没问题还是没有广告,请截图控制台console和网络请求network反馈给工作⼈员。

联系方式:

客服微信:jrqianlong,客服电话:13554402156

Top