npm包cordova-plugin-admob使用教程

#npm包cordova-plugin-admob使用教程

本文将详细介绍npm包cordova-plugin-admob的使用方法，包括安装、配置、示例代码和注意事项等。

##1.安装

在终端中输入如下命令进行npm安装：

--- ------- -------------------- ------

##2.配置

###2.1 集成cordova-plugin-admob

在你的cordova项目中加入cordova-plugin-admob：

------- ------ --- --------------------

###2.2 配置应用ID

在cordova-plugin-admob 插件的Android 平台配置信息中，需要配置广告商提供的应用ID。该应用ID 主要是调用平台广告 API时需要传入的参数。应用ID 在平台控制台中受到保护，需要由发布人员进行配置。

###2.3 JAR和Manifest 权限

cordova-plugin-admob 使用到了Google Play Services和Google Mobile Ads SDK。

需要将 Google Mobile Ads SDK、play-services 相关 jars，放置在${主项目}/libs 文件夹下，或使用Gradle进行配置，方法如下：

在 ${主项目}/platforms/android 下创建 build-extras.gradle 文件，加入如下代码：

----------- -
  ------------ -
    ---------
  -

  -------------- -
    ------- -
      ------- ------ ------------------------
    -
  -

  ------------ -
    ------- ------------------------------------------------
    ------- ------------------------------------------------------
    ------- ------------------------------------------------
    ------- -----------------------------------------------------
  -
-

将 ${主项目}/platforms/android/cordova-plugin-admob.xml 替换为以下内容：

----- ------------- ------------------
------- ------------------------------------------------
        ----------------------------------------------------------
        -------------------------
        -----------------
    ------------------
    -------------------- ------ --- ------ -------------------

    --------- ---------------
        ------------ ------------------ -----------------------------
            ---------------- ------------------------------------------ --
            ---------------- ------------------------------------------------------ --
            ---------------- --------------------------------------------------- --
            ---------------- -------------------------------------------------- --
        --------------

        ------------ ------------------------------ -----------------------------
            ---- -------- ---
            ---------
                    ----------------------------------------------------
                    -------------------------------------------------------------------------------------------------------------
                    --------------------------------------------------

            ---- -------- ---- ----- --------- ---
            ---------
                    -----------------------------------------------------------
                    ------------------------------------------------------------------------------------------------------------- --

            ---------
                    ------------------------------------------------------------------------
                    ---------------------------------------------------------------------------------------------------------------

            ---------- ---------------------------------------------
                       -------------------------------------------------------

            ---- --- -- --- --- ---- -------- ---- --- -- --- ----- ---- ------ ---- -------- ------- ---
            ---------- --------------------------------------------------------
                       ----------------------------------

            ---- ----- --- -- --- ------- --- ---- -- ---- --- ------ --- ---------- ---
            ---------- --------------------------
                        ------------------

        --------------

        ------------ ------------------- ----------------------------
            ----------- ------------------------------------------------ ------------------------ --
            ----------- ------------------------ ------------- --
            ----------- -------------------- ------------- --
            ----------- --------------------- ------------ --
            ----------- ------------------------ ------------- --
            ----------- ------------- -------------------- --
            ----------- -------------------- ------------- --
            ----------- --------------- ----------- --
            ----------- ----------------------- ------------- --
            ----------- ----------------------- ------------- --
            ----------- --------------------------- ------------- --
            ----------- ----------------------------- ------------- --
            ----------- ------------------------ ------------- --
            ----------- ----------------------- ----------------------- --
            ----------- ----------------- ----------------------- --
            ----------- ---------------- --------------------------- --
        --------------
    -----------
---------

注意，将AndroidManifest.xml 中的 应用id，替换成自己获取的 应用 id

此外，在 AndroidManifest.xml 的application 标签中打入以下meta-data信息：

---------- ---------------------------------------------
           ----------------------------------------------------- --
---------- --------------------------------------------------------
           ------------------------------------ --

##3.使用方法

cordova-plugin-admob 提供了以下的API：

  1. window.AdMob.createBanner

创建一个广告横幅。

参数：

---------------------------
  ----- --------------------- 
  --------- --------------------------------------- 
  --------- ----- 

  ----------- 
  ---------- ------ 
  -------- ------ 
  ------------- ------ 
  -------- --------
  ----------------- -----
---
  1. window.AdMob.removeBanner()

移除当前广告横幅，移除后与banner相关的所有事件将不可用。如果想再次使用，您需要重新创建一个banner。

参数：无。

  1. window.AdMob.showInterstitial

展示插页广告，插页广告需要预先加载，一般展示时间为5~10秒。

参数：

-------------------------------
  ----- ---------------------
  --------- -----
  
  -----------
  ---------- ------
  ----------------- -----
---
  1. window.AdMob.prepareInterstitial

准备插页广告，在页面ready后调用，可以在调用showInterstitial前完成预加载以保证广告的快速展示。

参数：

----------------------------------
  ----- ---------------------

  -----------
  ---------- -----
---
  1. InterstitialOptions

广告选项。在显示插页广告时可以自定义广告显示的样式。

参数：

--- ------------------- - -
  ----- ---------------------
  ---------- ------
  --------- -----

  ---------
  ------- ----------------------------
  ------ ----
  ------- ---
  --------- ---------------------------------------
  -- --
  -- -
--

---------------------------------------------------

##4.示例代码

下面是cordova-plugin-admob的示例代码，用于展示一个广告banner：

---------------------------------------- ---------- -

    --- ------- - ---
    --- -------------------------------------- - - 
        ------- - - -- --- -------
        ------- ---------------------
        ------------- --------------------
        --
    -
    --- ------------------- - -----------
        -----------------------
    --
    --- ----------------- - -----------------
        -----------------------
    --
    --- ------------------- - -
        ----- ---------------------
        ---------- ------
        --------- -----
    --
    --- ------------ - ---------------------------------------------------- -------------------- -------------------

    --- ------------- - -----------
        -----------------------------
    --
    --- ----------- - -----------------
        -----------------------------
        --------------------
    --
    ---------------------------
        ----- --------------- 
        --------- --------------------------------------- 
        --------- ----- 
        ---------- ------
        -------- ------ 
        ------------- ------
        ------------ ------
        -------- --------
        ------- --------------
    -- -------------- -------------

-- -------

##5.注意事项

  1. 应用ID需要从广告商处获取，去Google AdMob官网注册；
  2. 广告展示需要联网；
  3. 需要在正式环境中去除测试设备的ID；
  4. 一些原生调用的API需要打包到应用源文件中；
  5. 在Android中有些阻止广告的APP会使广告无法正常展示；

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671cc30d09270238228a0

阅读全文

猜你喜欢

  • npm 包 egg-schedule-custom 使用教程

    在前端开发中，我们经常需要按照一定的时间规律执行一些任务，比如定时发送邮件、定时更新数据等等，这时候我们可以使用 egg-schedule-custom 这个 npm 包来帮助我们实现。

    4 年前
  • npm 包 react-native-bitmovin-player 使用教程

    在现代的前端开发中，React Native 已经成为了一个非常流行的框架。而其中一个重要的组成部分就是 Bitmovin 视频播放器。所以，在这篇文章中，我们将介绍如何安装和使用 Bitmovin ...

    4 年前
  • npm 包 react-native-flatlist-pull 使用教程

    1. 前言 在 React Native 开发过程中，我们经常需要使用一些第三方组件来实现一些功能，其中之一就是加载更多数据。而 rn 上可以使用 react-native-flatlist-pull...

    4 年前
  • npm 包 hyperterm-new-moon-theme 使用教程

    在前端开发中，好的代码编辑器主题可以提高我们的工作效率，让我们更加专注于代码编写。其中，hyperterm-new-moon-theme 是一个很不错的选择。该主题可以使您的代码编辑器看起来更加舒适、...

    4 年前
  • npm 包 fastret 使用教程

    前言 在前端开发中，构建工具是不可或缺的一部分。而 npm 作为前端构建工具的主流，提供了丰富的 package，其中就包括了 FastRet 这个可用于实时本地预览的包。

    4 年前
  • npm 包 bod 使用教程

    一、什么是 bod? bod 是一个基于 Vue.js 的 UI 组件库，它提供了一系列常用的 UI 组件，包括按钮、警告框、消息框、下拉框等等。使用 bod 可以让开发者快速构建出美观、易用、高效的...

    4 年前
  • npm 包 @maksym.khudyakov/feature-todo 使用教程

    简介 @maksym.khudyakov/feature-todo 是一款适用于前端开发的 npm 包，帮助开发者更好地管理项目中的待办事项。 安装 使用以下命令安装该 npm 包： --- ----...

    4 年前
  • npm 包 lastfm-api-client 使用教程

    简介 lastfm-api-client 是一个 npm 包，用于连接 Last.fm API。它提供了使用 Last.fm 开放 API 的简单界面，方便前端开发者快速获取 Last.fm 的音乐数...

    4 年前
  • npm 包 postcss-design-convert 使用教程

    介绍 postcss-design-convert 是一个用于将设计稿中的 px 单位自动转换为 rem 单位的 postcss 插件。在前端项目中，我们通常会根据设计稿的具体尺寸来设置元素的宽度和高...

    4 年前
  • npm 包 teleman-cache 使用教程

    在前端开发中，我们常常需要处理一些数据，有时候我们不想每次都去请求过去这些数据，这时候我们就需要把这些数据缓存下来。npm 包 teleman-cache 就是一个解决这个问题的工具。

    4 年前
  • npm 包 image-optim-upload 使用教程

    简介 在网页制作过程中，图片是非常重要的一部分，但是图片太大会影响网页的加载速度，而且占用的服务器带宽也会很大。因此，图片大小的优化是前端开发者需要掌握的技能之一。

    4 年前
  • NPM 包 static-render-html-webpack-plugin 使用教程

    静态网站是指在服务器端完成渲染后，直接把 HTML 文件传给客户端，客户端无需进行 Server Side Render (SSR)。这种方式免去了服务端渲染的开销，可以大大提升网站的性能和响应速度。

    4 年前
  • npm 包 @weus/antd-tools 使用教程

    引言 在前端开发中，Ant Design 是非常受欢迎的 UI 框架之一，而 @weus/antd-tools 是一个 Ant Design 的组件库，为前端开发者提供了便民的开发工具。

    4 年前
  • npm 包 @wmfs/tymly-data-types 使用教程

    什么是 @wmfs/tymly-data-types @wmfs/tymly-data-types 是一个开源的 npm 包，是 TymlyJS 框架中用于处理数据类型的工具。

    4 年前
  • npm包 @rideroundtrip/roundtrip-micro 使用教程

    在前端开发中，为了更好地组织和管理代码，我们经常会使用各种工具和库。而 npm 包就是目前最流行的依赖管理工具之一。在本文中，我们将介绍如何使用一个常用的 npm 包 @rideroundtrip/r...

    4 年前
  • npm 包 @vikzh/brain-games 使用教程

    简介 @vikzh/brain-games 是一个用于前端开发者的小游戏库，它包含了五个小游戏，包括： ***偶数判断器 (EvenChecker)***：判断一个数字是否为偶数。

    4 年前
  • npm 包 plyr-nocookie 使用教程

    简介 plyr是一个流行的JavaScript媒体播放器库。 它支持HTML5视频和音频以及YouTube和Vimeo等嵌入式视频。而plyr-nocookie则是一个没有追踪用户的plyr版本。

    4 年前
  • npm 包 unpack_tp 使用教程

    npm 是 Node.js 生态系统中最常用的包管理器之一，它能够方便地帮助我们下载或上传各种 JavaScript 库或工具。 在前端项目中，我们往往会使用一些第三方包来加速我们的开发流程。

    4 年前
  • npm 包 budarin-simple-apple-icon 使用教程

    在前端开发中，常常需要使用各种图标来美化页面，为用户提供更好的视觉体验。而 Apple Icon（苹果 Touch Icon）则是移动端网站必备的一个关键元素，用于在 iPhone、iPad 等苹果设...

    4 年前
  • npm 包 budarin-simple-button 使用教程

    budarin-simple-button 是一个简单的 npm 包，旨在帮助开发人员快速创建可交互简单按钮。这篇文章将详细介绍该 npm 包的使用方法，一步步引导读者完成创建、安装、引入、使用 bu...

    4 年前

相关推荐

    暂无文章