新闻资讯

新闻资讯

新闻资讯分为新界面展示插入到当前页面两种类型,回调相同:

  • 新界面展示是拉起一个新的AndroidActivity,接入相对简单,效率更高

  • 插入到当前页面需要指定View的宽、高、上边距、左边距,默认填满当前屏幕

新界面展示

methods:{
    newsAd() {
        this.zjJSBridge.newsAd({
            // 广告位ID,必填
            posId: "J6944088141",
            // 用户ID,必填
            userId: "13000000000"
        }, function(succ, data) {
            console.log("succ = " + succ + " & data = " + data)
        })
    },
}

插入到当前页面

注意

使用插入到当前页面时,需要确保WebViewcontentView或父容器为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>