華為快應(yīng)用banner廣告如何實(shí)現(xiàn)顯示在底部

背景

華為快應(yīng)用的banner廣告展示時(shí)，需要設(shè)置參數(shù)top，這個(gè)值決定了廣告的展示位置，假如我希望banner廣告在不同的手機(jī)上都可以顯示在底部，該怎么實(shí)現(xiàn)呢？

解決方案

先看一下banner廣告接口說(shuō)明：

經(jīng)過(guò)測(cè)試，發(fā)現(xiàn)當(dāng)top設(shè)置為0時(shí)，banner顯示在狀態(tài)欄那里（見(jiàn)下圖），那也就是說(shuō)這個(gè)top值是從手機(jī)的最頂部計(jì)算的。這個(gè)結(jié)論很重要，涉及到計(jì)算底部位置時(shí)，需要考慮標(biāo)題欄、狀態(tài)欄。      

我們知道不同手機(jī)的分辨率、屏幕密度都是不一樣的，要想在不同大小手機(jī)上都可以顯示在底部，最基本的前提是能獲取到設(shè)備的分辨率和像素密度信息。

頁(yè)面設(shè)置的值最終到引擎?zhèn)榷际切枰?jīng)過(guò)等比換算成該設(shè)備上的大小，保證在各個(gè)分辨率下顯示效果。換算公式如下：

RealPX/windowWidth = 頁(yè)面設(shè)置的值/ windowLogicWidth

RealPX：引擎?zhèn)绒D(zhuǎn)換后的結(jié)果。

windowWidth：設(shè)備寬度，可以通過(guò)device接口獲得。

頁(yè)面設(shè)置的值：ux代碼中設(shè)置的值。

windowLogicWidth：頁(yè)面基準(zhǔn)寬度值，可以通過(guò)device接口獲得。

Android 上的dp和px的介紹請(qǐng)自行查詢，這里只給出換算公式：

px值= dp值*設(shè)備屏幕密度

其中設(shè)備屏幕密度：可以通過(guò)device接口獲得。

通過(guò)上面兩個(gè)公式，就可以計(jì)算底部坐標(biāo)了。由于device接口返回的windowHeight是界面可用的窗口高度，當(dāng)快應(yīng)用頁(yè)面有titleBar和無(wú)titleBar時(shí)，計(jì)算規(guī)則也會(huì)不一樣。

1）頁(yè)面配置顯示標(biāo)題欄場(chǎng)景

核心代碼如下：

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));

        //獲取頁(yè)面內(nèi)可見(jiàn)窗口的高度和寬度，此值不包括標(biāo)題欄和狀態(tài)欄高度

        let windowWidth = d.windowWidth;

        let windowHeight=d.windowHeight;

        //logicWidth對(duì)應(yīng)manifest.json文件設(shè)置的designWidth值，默認(rèn)是750

      let logicWidth = d.windowLogicWidth;

      //廣告自身大小單位是dp，需要轉(zhuǎn)換成px單位

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

      //標(biāo)題欄高度android一般大小是42dp左右，此處也需要轉(zhuǎn)換成px單位

      let titleBarHeight=42*d.screenDensity;

       //此處計(jì)算很關(guān)鍵，需要將狀態(tài)欄高度、標(biāo)題欄高度加上

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

       //轉(zhuǎn)換成頁(yè)面基準(zhǔn)值下的邏輯單位

      let logicWebTop = (realToppx * logicWidth) / windowWidth;

       //此對(duì)象請(qǐng)自己在data下定義

      this.bannerAD.style.top = logicWebTop;

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

    },

效果圖如下：

2）頁(yè)面配置不顯示標(biāo)題欄場(chǎng)景

核心代碼如下：

calBannerPostionWithNoTitle: function () {

      var d = device.getInfoSync();

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

        //獲取頁(yè)面內(nèi)可見(jiàn)窗口的高度和寬度，此值不包括標(biāo)題欄和狀態(tài)欄高度

        let windowWidth = d.windowWidth;

        let windowHeight=d.windowHeight;

        //logicWidth對(duì)應(yīng)manifest.json文件設(shè)置的designWidth值，默認(rèn)是750

      let logicWidth = d.windowLogicWidth;

      //廣告自身大小單位是dp，需要轉(zhuǎn)換成px單位

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

       //此處計(jì)算很關(guān)鍵，需要將狀態(tài)欄高度、標(biāo)題欄高度加上

       let realToppx= windowHeight-realAdHeighPX+d.statusBarHeight;

       //轉(zhuǎn)換成頁(yè)面基準(zhǔn)值下的邏輯單位

      let logicWebTop = (realToppx * logicWidth) / windowWidth;

      this.bannerAD.style.top = logicWebTop;

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

    },

效果圖如下： 

總結(jié)

由于快應(yīng)用引擎未提供標(biāo)題欄高度的方法，結(jié)合華為手機(jī)的emui規(guī)范，此處標(biāo)題欄高度給了一個(gè)近似值42dp。通過(guò)此文檔，了解快應(yīng)用大小換算原理以及學(xué)會(huì)簡(jiǎn)單的數(shù)學(xué)計(jì)算。本文只是提供了顯示在底部的1個(gè)計(jì)算規(guī)則，如果希望顯示在屏幕其他地方，都是可以借鑒其中的原理。