敬告:此 DEMO 演示为开放测试页面,仅用于开发者快速测试体验应用功能,请严格遵守开发者协议,了解更多。
♦ JS-SDK 引用方式:
♦ 普通网页 script 方式加载:下载最新版 jsBridge-v20251019.zip,请在页面上调用 jsBridge 接口之前引用 jsbridge-mini.js 库;
♦ js module 方式引用:npm install ym-jsbridge 具体请参考 npm package
事件监听
• 如需处理接口调用事件,请设置此监听器;
jsBridge.tz.setListener(function(event, data) {
switch (event) {
//激励视频 jsBridge.tz.reward(...)
case "reward": {
switch (data.action) {
//成功获取广告信息
case "onAdSucceed": {
break;
}
//广告曝光
case "onAdExposure": {
break;
}
//广告点击
case "onAdClicked": {
break;
}
//广告关闭
case "onAdClose": {
break;
}
//视频播放完毕
case "onVideoComplete": {
break;
}
//广告激励达成
case "onAdReward": {
jsBridge.toast("奖励已达成!");
break;
}
//广告加载失败,data.message 为失败说明
case "onAdFailed": {
break;
}
}
break;
}
//全屏视频 jsBridge.tz.fullscreen(...)
case "fullscreen": {
switch (data.action) {
//成功获取广告信息
case "onAdSucceed": {
break;
}
//广告曝光
case "onAdExposure": {
break;
}
//广告点击
case "onAdClicked": {
break;
}
//广告关闭
case "onAdClose": {
break;
}
//视频播放完毕
case "onVideoComplete": {
break;
}
//广告加载失败,data.message 为失败说明
case "onAdFailed": {
break;
}
}
break;
}
//插屏广告 jsBridge.tz.dialog(...)
case "dialog": {
switch (data.action) {
//成功获取广告信息
case "onAdSucceed": {
break;
}
//广告曝光
case "onAdExposure": {
break;
}
//广告点击
case "onAdClicked": {
break;
}
//广告关闭
case "onAdClose": {
break;
}
//广告加载失败,data.message 为失败说明
case "onAdFailed": {
break;
}
}
break;
}
//banner横幅广告 jsBridge.tz.banner(...)
case "banner": {
switch (data.action) {
//成功获取广告信息
case "onAdSucceed": {
break;
}
//广告曝光
case "onAdExposure": {
break;
}
//广告点击
case "onAdClicked": {
break;
}
//广告关闭
case "onAdClose": {
break;
}
//广告加载失败,data.message 为失败说明
case "onAdFailed": {
break;
}
}
break;
}
//内容视频(短视频) jsBridge.tz.contentVideo(...)
case "contentVideo": {
switch (data.action) {
//加载成功
case "onLoad": {
break;
}
//关闭短视频窗口
//持续时长(毫秒): data.data.duration
case "onClose": {
break;
}
}
break;
}
}
//此函数仅用于显示回调参数在本 DEMO 页面上
showResult({
event: event,
data : data
});
});
//请拉到页面底部查看回调数据信息
$('html,body').animate({ scrollTop: $('#view').offset().top }, 500);
/**
回调参数说明:
event //事件代码,字符串类型
data: //事件数据,JSON 对象
{
action : "onClick", //事件名称,字符串类型
message: "" //事件参数,字符串类型
}
**/
//移除监听器,不会再收到回调通知 //在需要时可重新调用 setListener jsBridge.tz.removeListener();
权限
//不强制要求权限,但建议您申请,获得权限后能提升广告效果
jsBridge.tz.requestPermissionIfNecessary(function(succ, res) {
//res.allowAll 是否同意了全部权限
//res.neverAsk 拒绝时是否选中了 “不再提示”
alert("allowAll: " + res.allowAll + "\n" +
"neverAsk: " + res.neverAsk);
});
展示广告
adId:
//激励视频,setListener 的监听回调 event 为 reward
jsBridge.tz.reward({
//字符串类型,广告平台上申请的代码位id
adId: "{{reward.adId}}",
//可选,用户标识,一般为用户ID,以便在处理服务器通知时给此用户发放奖励
userId: "user123",
//可选,自定义信息
customInfo: ""
}, function(succ, data) {
if (!succ) {
alert(JSON.stringify(data));
}
});
adId:
//全屏视频,setListener 的监听回调 event 为 fullscreen
jsBridge.tz.fullscreen({
//字符串类型,广告平台上申请的代码位id
adId: "{{fullscreen.adId}}"
}, function(succ, data) {
if (!succ) {
alert(JSON.stringify(data));
}
});
adId:
jsBridge.tz.contentVideo({
//字符串类型,广告平台上申请的代码位id
adId: "{{contentVideo.adId}}"
}, function(succ, data) {
if (!succ) {
alert(JSON.stringify(data));
}
});
adId:
//插屏广告,setListener 的监听回调 event 为 dialog
jsBridge.tz.dialog({
//字符串类型,广告平台上申请的代码位id
adId: "{{dialog.adId}}"
}, function(succ, data) {
if (!succ) {
alert(JSON.stringify(data));
}
});
adId:
//横幅广告,setListener 的监听回调 event 为 banner
jsBridge.tz.banner({
//字符串类型,广告平台上申请的代码位id
adId: $("#banner1").val(),
//数字类型,到顶部的距离
top : 20
}, function(succ, data) {
if (!succ) {
alert(JSON.stringify(data));
}
});
adId:
//横幅广告,setListener 的监听回调 event 为 Banner
jsBridge.tz.banner({
adId: $("#banner2").val(),
//数字类型,到底部的距离
bottom: 20
}, function(succ, data) {
if (!succ) {
alert(JSON.stringify(data));
}
});
//横幅广告
jsBridge.tz.banner({
remove: true
}, function(succ, data) {
if (!succ) {
alert(JSON.stringify(data));
}
});
adId:
//引用 js 库
//import jsBridge from 'ym-jsbridge'
const showReward = function (jsBridge) {
//设置监听器
jsBridge.tz.setListener(function (event, data) {
switch (event) {
//激励视频
case "reward": {
switch (data.action) {
//成功获取广告信息
case "onAdSucceed": {
//关闭加载动画
layer.closeAll();
break;
}
//广告加载失败,data.message 为失败说明
case "onAdFailed": {
//关闭加载动画
layer.closeAll();
//提示失败
layer.msg("广告加载失败:" + data.message);
break;
}
//广告激励达成
case "onAdReward": {
//奖励达成,客户端仅做简单提示;
//为避免刷单,强烈建议在处理服务器端通知时发放奖励;
jsBridge.toast("奖励已达成!");
break;
}
}
break;
}
}
});
//展示广告
jsBridge.tz.reward({
//字符串类型,广告平台上申请的代码位id
adId: "{{practiceReward.adId}}",
//可选,用户标识,一般为用户ID,以便在处理服务器通知时给此用户发放奖励
userId: "user123",
//可选,自定义信息
customInfo: ""
}, function (success, res) {
if (success) {
//执行成功,显示加载动画(拉取广告需要一点时间)
layer.load(0, { shade: 0.2 });
} else {
//执行失败
layer.alert(JSON.stringify(res));
}
});
};
showReward(jsBridge);
监听回调数据: