H5广告

  1. 在index.html中插入以下代码

在body结束标签下面</body> 重点

<script type="text/javascript" src="https://www.4metas.io/owner/uni.webview.1.5.4.js"></script>
<script>
  document.addEventListener('UniAppJSBridgeReady', function() {
    uni.webView.getEnv(function(res) {
      console.log('当前环境:' + JSON.stringify(res));
    });
  });
</script>
  1. 确保上述代码打印出来东西后(sdk正常运行) 再执行以下方法

  2. 记得给uni加判定 不然 sdk没有正常运行 没有uni这个对象的 直接跑会报错的

// 打开广告 function btnClick() { const message = { action: 'openAd', // 事件标识 主应用加的标记 需要判断 是打开广告 data: any // 自定义参数 } // 给父窗口发消息 uni.postMessage({ data: message }); }

// 获取父窗口的消息 window.addEventListener('message', function({data:res}) { const { action, data } = res if(action === 'acceptAd') { // data数据暂时没处理 console.log('广告回调参数', data) } }, '*')

1实例代码
  // 打开广告
  function btnClick() {
    const message = {
      action: 'openAd', // 事件标识 主应用加的标记 需要判断 是打开广告
      data: 'insert' // string 激励广告: incentive 插屏广告: insert
    }
    // 给父窗口发消息
    uni.postMessage({
      data: message
    });
  }

  // 获取父窗口的消息
  window.addEventListener('message', function({data:res}) {
    const { action, data } = res
    if(action === 'acceptAd') {
      // data数据暂时没处理
       // {status: 1, msg: '正常关闭'}
      // {status: 0, msg: '跳过广告'}
      console.log('广告回调参数', data)
    }
  }, '*')

示例​

// 打开广告
  function btnClick() {
    const message = {
      action: 'openAd',
      data: 123
    }
    // 给父窗口发消息
    uni.postMessage({
      data: message
    });
  }
  document.querySelector('button').addEventListener('click', btnClick)
  // 获取父窗口的消息
  window.addEventListener('message', function({data:res}) {
    const { action, data } = res
    if(action === 'acceptAd') {
      // data数据暂时没处理
      console.log('广告回调参数', data)
      document.querySelector('#content').innerHTML = '广告回调参数: ' + data
    }
  }, '*')

// Some code
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>播放</button>
  <div id="content" style="color: #ffffff"></div>
</body>
<script type="text/javascript" src="https://www.4metas.io/owner/uni.webview.1.5.4.js"></script>
<script>
  document.addEventListener('UniAppJSBridgeReady', function() {
    uni.webView.getEnv(function(res) {
      console.log('当前环境:' + JSON.stringify(res));
    });
  });

  // 打开广告
  function btnClick() {
    const message = {
      action: 'openAd',
      data: 'insert'
    }
    // 给父窗口发消息
    uni.postMessage({
      data: message
    });
  }
  
  // 登录
  function btnClick() {
    const message = {
      action: 'login',
      data: {}//有参数给参数
    }
    // 给父窗口发消息
    uni.postMessage({
      data: message
    });
  }
  document.querySelector('button').addEventListener('click', btnClick)
  // 获取父窗口的消息
  window.addEventListener('message', function({data:res}) {
    const { action, data } = res
    if(action === 'acceptAd') { // 广告的回调
      // data: {status: 1, msg: '正常关闭'}
      // data: {status: 0, msg: '跳过广告'}
      console.log('广告回调参数', data)
      document.querySelector('#content').innerHTML = '广告回调参数: ' + data
    }else if(action === 'login') { // 登录的回调
        console.log('回调参数', data) // userId
    }
  }, '*')
</script>
</html>

Last updated