敬告:此 DEMO 演示为开放测试页面,仅用于开发者快速测试体验应用功能,请严格遵守开发者协议,了解更多。
♦ JS-SDK 引用方式:
♦ 普通网页 script 方式加载:下载最新版 jsBridge-v20240828.zip,请在页面上调用 jsBridge 接口之前引用 jsbridge-mini.js 库;
♦ js module 方式引用:npm install ym-jsbridge 具体请参考 npm package
jsBridge.xyNews.config({ //资讯 APP ID //可在打包模块里面配置,以此 js 接口的配置值优先 app_id : "ba0063bfbc1a5ad878", //可选,用户ID,后期可调用 setUserId 设置 user_id: "13800138000" }, function(succ, data) { alert(succ ? "成功" : "失败:" + JSON.stringify(data)); });
事件监听
• 如需接口调用事件,请设置此监听器;
jsBridge.xyNews.setListener(function(event, data) { if (event == "onReadingStart") { //倒计时 jsBridge.xyNews.startCountDown({ countdownSeconds : 10, scrollEffectSeconds: 3, rewardData : 5, //可选,UI 界面设置 ui: { //进度条中间的图标 icon: "https://m.yimenapp.com/assets/img/bm-news.png", //已完成进度条颜色 finishedColor : "#FF0000", //未完成进度条颜色 unfinishedColor: "#BBBBBB", //完成任务后的奖励文字颜色 rewardColor : "#0000FF" } }, function(succ, data) { showResult({ event: "倒计时执行结果", succ : succ, data : data }); }); } else if (event == "onReward") { //发放奖励 //do something... //通知App奖励发放情况 jsBridge.xyNews.setRewardResult({ success : true, rewardData: 5 }, function(succ, data) { showResult({ event: "通知结果", succ : succ, data : data }); }); }; showResult({ event: event, data : data }); }); //请拉到页面底部查看回调数据信息 $('html,body').animate({ scrollTop: $('#view').offset().top }, 500); /** 回调参数说明:请参考官方说明 event - 事件代码,字符串类型 onReadingStart 资讯开始阅读回调,此时可以决定是否显示倒计时 onReadingPause 资讯暂停阅读回调 onReadingResume 资讯恢复阅读回调 onReward 倒计时结束回调,此时可以给用户发放奖励 onReadingEnd 资讯结束阅读回调 data - 事件数据,JSON 对象 **/
//移除监听器,不会再收到回调通知 //在需要时可重新调用 setListener jsBridge.xyNews.removeListener();
展示
//展示资讯 jsBridge.xyNews.show({ //标题 title : "看新闻 观天下", //可选,字符串类型,资讯栏目,默认空 //为空时 - 多 TAB 信息流 //非空时 - 单列表信息流 channel: "推荐", //可选,字符串类型,主题颜色,light 浅色,dark 深色,默认 light theme : "light" }, function(succ, data) { if (!succ) { alert(JSON.stringify(data)); } });
//展示资讯 jsBridge.xyNews.show({ title : "大事小事天下事", channel: "", theme : "dark" }, function(succ, data) { if (!succ) { alert(JSON.stringify(data)); } });
阅读倒计时(激励)
//开始倒计时 //请务必在 setListener 监听器中 event 为 onReadingStart 时调用此倒计时接口 jsBridge.xyNews.startCountDown({ //时长(秒) countdownSeconds : 10, //滚动作用时间(秒),到期后暂停计时,再滚动继续计时;小于等于0不滚动也不会暂停计时 scrollEffectSeconds: 3, //整数,激励数量(发多少奖励) rewardData : 5, //可选,UI 界面设置 ui: { //进度条中间的图标 icon: "https://m.yimenapp.com/assets/img/bm-news.png", //已完成进度条颜色 finishedColor : "#FF0000", //未完成进度条颜色 unfinishedColor: "#BBBBBB", //完成任务后的奖励文字颜色 rewardColor : "#0000FF" } }, function(succ, data) { if (!succ) { alert(JSON.stringify(data)); } });
//发放奖励 //请务必在 setListener 监听器中 event 为 onReward 时发放奖励 //奖励发放后调用此 setRewardResult 通知 App 发放奖励的结果 jsBridge.xyNews.setRewardResult({ //必须,布尔类型,奖励是否发放成功 success : true, //必须,数字类型,实际发放的奖励数量 rewardData: 5 }, function(succ, data) { if (!succ) { alert(JSON.stringify(data)); } });
用户
//登录 jsBridge.xyNews.setUserId({ user_id : "13800138000" }, function(succ, data) { alert(succ ? "已登录" : JSON.stringify(data)); });
//退出 jsBridge.xyNews.setUserId({ //用户ID留空则表示退出 user_id : "" }, function(succ, data) { alert(succ ? "已退出" : JSON.stringify(data)); });
监听回调数据: