新闻资讯
新闻资讯
新闻资讯分为新界面展示
和插入到当前页面
两种类型,回调相同:
新界面展示是拉起一个新的AndroidActivity,接入相对简单,效率更高
插入到当前页面需要指定View的宽、高、上边距、左边距,默认填满当前屏幕
新界面展示
methods:{
newsAd() {
this.zjJSBridge.newsAd({
// 广告位ID,必填
posId: "J6944088141",
// 用户ID,必填
userId: "13000000000"
}, function(succ, data) {
console.log("succ = " + succ + " & data = " + data)
})
},
}
插入到当前页面
注意
使用插入到当前页面时,需要确保WebView
为contentView
或父容器为FrameLayout
,否则无法定位
使用插入到当前页面展示,需要处理退出页面事件,移除当前视图,详见Demo工程的演示页面
传入的尺寸,需要为屏幕的真实像素值,使用UNI时需要计算devicePixelRatio,详见Demo
<template>
<view class="page-container">
<button class="btn-view" @click="newsAd">新页面加载</button>
<button class="btn-view" @click="newsView">当前界面加载</button>
<button class="btn-view" @click="hideNewsView">隐藏</button>
<button class="btn-view" @click="removeNewsView">移除</button>
<view class="ad-container" :style="{height:containerHeight+'px'}"></view>
</view>
</template>
<script>
var isShowing = false
export default {
data() {
return {
containerTop: 0,
containerLeft: 0,
containerWidth: 0,
containerHeight: 0,
devicePixelRatio: 0,
}
},
onLoad() {
},
onReady() {
var _this = this;
uni.getSystemInfo({
success: function(ret) {
_this.devicePixelRatio = ret.devicePixelRatio
uni.createSelectorQuery()
.select(".ad-container")
.boundingClientRect(function(boundRect) {
_this.containerTop = boundRect.top + ret.windowTop
_this.containerLeft = boundRect.left
_this.containerWidth = boundRect.width
_this.containerHeight = ret.windowHeight - boundRect.top - 30;
}).exec();
}
});
this.zjJSBridge.ready(() => {
this.zjJSBridge.setListener((event, data) => {
if (event != this.zjJSBridge.events.newsAd && event != this.zjJSBridge.events
.newsView) {
return
}
switch (data.action) {
case this.zjJSBridge.actions.onZjAdError:
uni.showModal({
showCancel: false,
title: '新闻资讯加载失败',
content: "错误码:" + data.code + "\n错误信息:" + data.msg
})
break;
case this.zjJSBridge.actions.onZjAdReward:
// 完成任务的用户重新进入页面会重复回调,需要接入方根据用户ID判断是否已发奖
console.log('新闻资讯完成任务')
break;
}
})
})
},
onBackPress(event) {
this.onBackPressed()
},
onUnload() {
if (isShowing) {
this.onBackPressed()
}
this.zjJSBridge.removeListener()
},
methods: {
onBackPressed() {
if (isShowing) {
this.removeNewsView()
}
return true
},
toNativePx(px) {
return parseInt(this.devicePixelRatio * px)
},
newsView() {
this.zjJSBridge.newsView({
// 广告位ID,必填
posId: "J6944088141",
// 用户ID,必填
userId: "13000000000",
width: this.toNativePx(this.containerWidth),
height: this.toNativePx(this.containerHeight),
top: this.toNativePx(this.containerTop),
left: this.toNativePx(this.containerLeft)
}, function(succ, data) {
console.log("succ = " + succ + " & data = " + data)
if (succ) {
isShowing = true
}
})
},
hideNewsView() {
this.zjJSBridge.newsView({
// 广告位ID,必填
posId: "J6944088141",
// 用户ID,必填
userId: "13000000000",
// 当hide为true时,暂时隐藏新闻资讯界面,再次调用newsView方法会恢复显示
hide: true
}, function(succ, data) {
console.log("succ = " + succ + " & data = " + data)
})
},
removeNewsView() {
isShowing = false
this.zjJSBridge.newsView({
// 广告位ID,必填
posId: "J6944088141",
// 用户ID,必填
userId: "13000000000",
// 当remove为true时,移除新闻资讯界面,再次调用newsView方法会重新加载
remove: true
}, function(succ, data) {
console.log("succ = " + succ + " & data = " + data)
})
}
}
}
</script>