敬告:此 DEMO 演示为开放测试页面,仅用于开发者快速测试体验应用功能,请严格遵守开发者协议,了解更多。
♦ JS-SDK 引用方式:
♦ 普通网页 script 方式加载:下载最新版 jsBridge-v20241118.zip,请在页面上调用 jsBridge 接口之前引用 jsbridge-mini.js 库;
♦ js module 方式引用:npm install ym-jsbridge 具体请参考 npm package
事件监听
• 如需处理接口调用事件,请设置此监听器;
jsBridge.hj.setListener(function(event, data) { switch (event) { //激励视频 jsBridge.hj.reward(...) case "reward": { switch (data.action) { //加载成功 case "onVideoAdLoadSuccess": { break; } //播放开始 case "onVideoAdPlayStart": { break; } //播放结束 case "onVideoAdPlayEnd": { break; } //激励达成 case "onVideoRewarded": { jsBridge.toast("奖励已达成!"); break; } //点击 case "onVideoAdClicked": { break; } //关闭 case "onVideoAdClosed": { break; } //加载失败,data.message 为失败说明 case "onVideoAdLoadError": { break; } //播放失败,data.message 为失败说明 case "onVideoAdPlayError": { break; } } break; } //插屏广告 jsBridge.hj.interstitial(...) case "interstitial": { switch (data.action) { //加载成功 case "onInterstitialAdLoadSuccess": { break; } //播放开始 case "onInterstitialAdPlayStart": { break; } //播放结束 case "onInterstitialAdPlayEnd": { break; } //点击 case "onInterstitialAdClicked": { break; } //关闭 case "onInterstitialAdClosed": { break; } //加载失败,data.message 为失败说明 case "onInterstitialAdLoadError": { break; } //播放失败,data.message 为失败说明 case "onInterstitialAdPlayError": { break; } } break; } //横幅广告 jsBridge.hj.banner(...) case "banner": { switch (data.action) { //加载成功 case "onAdLoadSuccess": { break; } //展示 case "onAdShown": { break; } //点击 case "onAdClicked": { break; } //关闭 case "onAdClosed": { break; } //自动刷新 case "onAdAutoRefreshed": { break; } //自动刷新失败 case "onAdAutoRefreshFail": { break; } //加载失败,data.message 为失败说明 case "onAdLoadError": { break; } } break; } } //此函数仅用于显示回调参数在本 DEMO 页面上 showResult({ event: event, data : data }); }); //请拉到页面底部查看回调数据信息 $('html,body').animate({ scrollTop: $('#view').offset().top }, 500); /** 回调参数说明: event //事件代码,字符串类型 data: //事件数据,JSON 对象 { action : "onClick", //事件名称,字符串类型 message: "" //事件参数,字符串类型 } **/
//移除监听器,不会再收到回调通知 //在需要时可重新调用 setListener jsBridge.hj.removeListener();
权限
//不强制要求权限,但建议您申请,获得权限后能提升广告效果 jsBridge.hj.requestPermissionIfNecessary();
展示广告
adId:
userId:
//激励视频,setListener 的监听回调 event 为 reward jsBridge.hj.reward({ //必须,广告平台上申请的代码位id adId: "{{reward.adId}}", //可选,用户标识,用于服务器端通知 userId: "{{reward.userId}}", //可选,广告加载扩展参数,任意键值对 extra: { key1: "hello", key2: "world" }, //可选,广告展示扩展参数,任意键值对 showOptions: { key1: "123456" } }, function(succ, data) { if (!succ) { alert(JSON.stringify(data)); } });
adId:
userId:
//插屏广告,setListener 的监听回调 event 为 interstitial jsBridge.hj.interstitial({ //必须,广告平台上申请的代码位id adId: "{{interstitial.adId}}", //可选,用户标识 userId: "{{interstitial.userId}}", //可选,广告加载扩展参数,任意键值对 extra: { key1: "hello", key2: "world" }, //可选,广告展示扩展参数,任意键值对 showOptions: { key1: "123456" } }, function(succ, data) { if (!succ) { alert(JSON.stringify(data)); } });
adId:
top:
//横幅广告,setListener 的监听回调 event 为 banner jsBridge.hj.banner({ //字符串类型,广告平台上申请的代码位id adId: "{{banner.adId}}", //数字类型,到顶部的距离 top : {{banner.top}} }, function(succ, data) { if (!succ) { alert(JSON.stringify(data)); } });
adId:
bottom:
//横幅广告,setListener 的监听回调 event 为 Banner jsBridge.hj.banner({ adId: "{{banner.adId}}", //数字类型,到底部的距离 bottom: {{banner.bottom}} }, function(succ, data) { if (!succ) { alert(JSON.stringify(data)); } });
//横幅广告 jsBridge.hj.banner({ remove: true }, function(succ, data) { if (!succ) { alert(JSON.stringify(data)); } });
激励视频 adId:
//引用 js 库 //import jsBridge from 'ym-jsbridge' const showReward = function (jsBridge) { //设置监听器 jsBridge.hj.setListener(function (event, data) { switch (event) { //激励视频 case "reward": { switch (data.action) { //加载成功 case "onVideoAdLoadSuccess": { //关闭加载动画 layer.closeAll(); break; } //失败,data.message 为失败说明 case "onVideoAdLoadError": case "onVideoAdPlayError": { //关闭加载动画 layer.closeAll(); //提示失败 layer.msg("广告加载失败:" + data.message); break; } //激励达成 case "onVideoRewarded": { //奖励达成,客户端仅做简单提示; //为避免刷单,强烈建议在处理服务器端通知时发放奖励; jsBridge.toast("奖励已达成!"); break; } } break; } } }); //展示广告 jsBridge.hj.reward({ //字符串类型,广告平台上申请的代码位id adId: "{{practiceReward.adId}}", //可选,用户标识,一般为用户ID,以便在处理服务器通知时给此用户发放奖励 userId: "user123", }, function (success, res) { if (success) { //执行成功,显示加载动画(拉取广告需要一点时间) layer.load(0, { shade: 0.2 }); } else { //执行失败 layer.alert(JSON.stringify(res)); } }); }; showReward(jsBridge);
监听回调数据: