华为快应用banner广告如何实现显示在底部

小提示：您能找到这篇{华为快应用banner广告如何实现显示在底部}绝对不是偶然，我们能帮您找到潜在客户，解决您的困扰。如果您对本页介绍的华为快应用banner广告如何实现显示在底部内容感兴趣，有相关需求意向欢迎拨打我们的服务热线，或留言咨询，我们将第一时间联系您！

< ">背景

< font-size: 16px;">华为快应用的banner广告展示时，需要设置参数top，这个值决定了广告的展示位置，假如我希望banner广告在不同的手机上都可以显示在底部，该怎么实现呢？

解决方案

先看一下banner广告接口说明：

经过测试，发现当top设置为0时，banner显示在状态栏那里（见下图），那也就是说这个top值是从手机的最顶部计算的。这个结论很重要，涉及到计算底部位置时，需要考虑标题栏、状态栏。      

我们知道不同手机的分辨率、屏幕密度都是不一样的，要想在不同大小手机上都可以显示在底部，最基本的前提是能获取到设备的分辨率和像素密度信息。

页面设置的值最终到引擎侧都是需要经过等比换算成该设备上的大小，保证在各个分辨率下显示效果。换算公式如下：

RealPX/windowWidth = 页面设置的值/ windowLogicWidth

RealPX：引擎侧转换后的结果。

windowWidth：设备宽度，可以通过device接口获得。

页面设置的值：ux代码中设置的值。

windowLogicWidth：页面基准宽度值，可以通过device接口获得。

Android 上的dp和px的介绍请自行查询，这里只给出换算公式：

px值= dp值*设备屏幕密度

其中设备屏幕密度：可以通过device接口获得。

通过上面两个公式，就可以计算底部坐标了。由于device接口返回的windowHeight是界面可用的窗口高度，当快应用页面有titleBar和无titleBar时，计算规则也会不一样。

1）页面配置显示标题栏场景

核心代码如下：

data: {

      bannerAD: {

        adUnitId: "testw6vs28auh3",

        adIntervals: 30,

        style: {

          left: 20,

          top: 20, 

          width: 360,

          height:我想网站建设 57

        }

      }

    },

calBannerPostion1: function () {

      var d = device.getInfoSync();

      console.info("calBannerPostion1 d= "+JSON.stringify(d));

        //获取页面内可见窗口的高度和宽度，此值不包括标题栏和状态栏高度

        let windowWidth = d.windowWidth;

        let windowHeight=d.windowHeight;

        //logicWidth对应manifest.json文件设置的designWidth值，默认是750

      let logicWidth = d.windowLogicWidth;

      //广告自身大小单位是dp，需要转换成px单位

      let realAdHeighPX = this.bannerAD.style.height * d.screenDensity;

      //标题栏高度android一般大小是42dp左右，此处也需要转换成px单位

      let titleBarHeight=42*d.screenDensity;

       //此处计算很关键，需要将状态栏高度、标题栏高度加上

       let realToppx= windowHeight-realAdHeighPX+d.statusBarHeight+titleBarHeight;

       //转换成页面基准值下的逻辑单位

      let logicWebTop = (realToppx * logicWidth) / windowWidth;

       //此对象请自己在data下定义

      this.bannerAD.style.top = logicWebTop;

      console.info("calBannerPostion1 top=" + this.bannerAD.style.top+", logicWebTop= "+logicWebTop);

    },

效果图如下：

2）页面配置不显示标题栏场景

核心代码如下：

calBannerPostionWithNoTitle: function () {

      var d = device.getInfoSync();

      console.info("calBannerPostion1 d= "+JSON.stringify(d));

        //获取页面内可见窗口的高度和宽度，此值不包括标题栏和状态栏高度

        let windowWidth = d.windowWidth;

        let windowHeight=d.windowHeight;

        //logicWidth对应manifest.json文件设置的designWidth值，默认是750

      let logicWidth = d.windowLogicWidth;

      //广告自身大小单位是dp，需要转换成px单位

      let realAdHeighPX = this.bannerAD.style.height * d.screenDensity;

       //此处计算很关键，需要将状态栏高度、标题栏高度加上

       let realToppx= windowHeight-realAdHeighPX+d.statusBarHeight;

       //转换成页面基准值下的逻辑单位

      let logicWebTop = (realToppx * logicWidth) / windowWidth;

      this.bannerAD.style.top = logicWebTop;

      console.info("calBannerPostionWithNoTitle top=" + this.bannerAD.style.top+", logicWebTop= "+logicWebTop);

&n漯河推广服务bsp;   },

效果图如下： 

总结

由于快应用引擎未提供标题栏高度的方法，结合华为手机的emui规范，此处标题栏高度给了一个近似值42dp。通过此文档，了解快应用大小换算原理以及学会简单的数学计算。本文只是提供了显示在底部的1个计算规则，如果希望显示在屏幕其他地方，都是可以借鉴其中的原理。