0

AngularJS プロジェクトでSmart App Bannerを使用したいのですが、それ自体を管理するためにsmart-app-banner使用します。npm

このガイドは非常にシンプルで、すべてが 1 つの html ファイルにまとめられています。ただし、実際のプロジェクトでは、各ファイルを適切な場所に配置する必要があります。

  1. CSS (私のプロジェクトは を使用scss)

では、 html ファイルsampleに次の 1 行があります。head

<link rel="stylesheet" href="node_modules/smart-app-banner/smart-app-banner.css" type="text/css" media="screen">

したがって、私のプロジェクトでは、この css ファイルを次の場所にインポートしますapp.scss。

@import "node_modules/smart-app-banner/smart-app-banner";
  1. JS (私のプロジェクトは を使用ECMAScript 6)

では、 html ファイルsampleに JS の 2 つの部分があります。body

最初の部分:

<script src="node_modules/smart-app-banner/smart-app-banner.js"></script>

したがって、私のプロジェクトでは、この js ファイルを次の場所にインポートしますapp.js。

import "smart-app-banner";

第二部:

<script type="text/javascript">
  new SmartBanner({
      daysHidden: 15,   // days to hide banner after close button is clicked (defaults to 15)
      daysReminder: 90, // days to hide banner after "VIEW" button is clicked (defaults to 90)
      appStoreLanguage: 'us', // language code for the App Store (defaults to user's browser language)
      title: 'MyPage',
      author: 'MyCompany LLC',
      button: 'VIEW',
      store: {
          ios: 'On the App Store',
          android: 'In Google Play',
          windows: 'In Windows store'
      },
      price: {
          ios: 'FREE',
          android: 'FREE',
          windows: 'FREE'
      }
      // , force: 'ios' // Uncomment for platform emulation
  });
</script>

私のプロジェクトでは、ファイルとsmart-banner.js同じディレクトリに呼び出される新しいjsファイルを作成しapp.js、このコードを入れてから、jsファイルをインポートしますapp.js

import "./smart-banner";

smart-banner.js:

  new SmartBanner({
      daysHidden: 15,   // days to hide banner after close button is clicked (defaults to 15)
      daysReminder: 90, // days to hide banner after "VIEW" button is clicked (defaults to 90)
      appStoreLanguage: 'us', // language code for the App Store (defaults to user's browser language)
      title: 'MyPage',
      author: 'MyCompany LLC',
      button: 'VIEW',
      store: {
          ios: 'On the App Store',
          android: 'In Google Play',
          windows: 'In Windows store'
      },
      price: {
          ios: 'FREE',
          android: 'FREE',
          windows: 'FREE'
      }
      // , force: 'ios' // Uncomment for platform emulation
  });

しかし、それは機能していません。バナーが正しく表示されませんでした。ステップが間違っていませんか？これらのプロセスを段階的にチェックして、すべてのファイルが正しく機能することを確認するにはどうすればよいですか?

4

1 に答える 1

0

私は答えを見つけました。JS ファイルのインポートで問題が発生しました。

ECMAScript 6とあるのでbabel、ドキュメントには次のように書かれています。

モジュールの内容全体をインポートします。これにより、myModule が現在のスコープに挿入され、「my-module.js」からエクスポートされたすべてのバインディングが含まれます。

import * as myModule from "my-module";

モジュールの単一メンバーをインポートします。これにより、myMember が現在のスコープに挿入されます。

import {myMember} from "my-module";

バインディングをインポートせずに、副作用のためだけにモジュール全体をインポートします。

import "my-module";

そのため、js ファイルをインポートするだけでは機能しませんでした。代わりに、クラスをインポートする必要があります

import SmartBanner from smart-app-banner;

さらに、インポートを に入れることはできませんapp.js。クラスを使用する js ファイルに入れる必要があります。

于 2016-03-24T05:38:39.537 に答える