Question

我很想在Cordova / Vuejs proyect中将Admob插件用于cordova（https://www.npmjs.com/package/cordova-admob）。我创建了一个Cordova项目，然后将build vue项目（/ dist文件夹）放在Cordova的/ www文件夹中。但是我不知道我必须在哪里放置admob插件的代码。

我试图将下一个代码放入App.vue中，但它不起作用

    function onDeviceReady() {
      document.removeEventListener('deviceready', onDeviceReady, false);

      // Set AdMobAds options:
      admob.setOptions({
        publisherId:           "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB",  // Required
        interstitialAdId:      "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII",  // Optional
        autoShowBanner:        true,                                      // Optional
        autoShowRInterstitial: false,                                     // Optional
        autoShowRewarded:      false,                                     // Optional
        tappxIdiOS:            "/XXXXXXXXX/Pub-XXXX-iOS-IIII",            // Optional
        tappxIdAndroid:        "/XXXXXXXXX/Pub-XXXX-Android-AAAA",        // Optional
        tappxShare:            0.5                                        // Optional
      });

      // Start showing banners (atomatic when autoShowBanner is set to true)
      admob.createBannerView();

      // Request interstitial ad (will present automatically when autoShowInterstitial is set to true)
      admob.requestInterstitialAd();

      // Request rewarded ad (will present automatically when autoShowRewarded is set to true)
      admob.requestRewardedAd();
    }

    document.addEventListener("deviceready", onDeviceReady, false);

Answer 1

“ deviceready”事件应将您的vuejs应用包装在根js文件中，而不是在组件中。我的项目中的示例：

import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';

import Main from './components/Main.vue';
import StoreComponents from './components/StoreComponents.vue';
import StoreOffers from './components/StoreOffers.vue';

import { pluralize } from './helpers.js';

document.addEventListener('deviceready', function()
{
    Vue.use(VueRouter);

    Vue.filter('pluralize', function (num, words) {
        return pluralize(num, words);
    });

    Vue.prototype.$http = axios;

    // this is how I implemented cordova-plugin-keyboard into Vue
    // but the js logic located inside Vue component
    Vue.prototype.$keyboard = Keyboard;

    // play around with Admob js code here

    const router = new VueRouter({
        routes: [
            {
                path: '/',
                component: Main
            },
            {
                path: '/store',
                component: StoreComponents
            },
            {
                path: '/store/offers',
                component: StoreOffers
            }
        ]
    });

    const app = new Vue({
        el: '#app',
        router: router
    });
}, false);

这是我的cordova项目结构：

/hooks
/platforms
/plugins
/res
/www
  /build
  /dist
  index.html
config.xml
package.json
webpack.config.js

此外，您还应该在cordova config.xml中包含admob插件。看起来像这样：

<plugin name="cordova-plugin-keyboard" spec="^1.2.0" />

如何使用Cordova将Admob放入Vuejs应用中？

1 个答案: