0

I want to use Smart App Banner in my AngularJS project, smart-app-banner uses npm to manage itself.

The guide is very simple and all in one html file. However, in real project, we need to put each file in the right place.

  1. CSS (my project uses scss)

In sample, there is one line in head in html file:

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

So in my project, I import this css file in app.scss:

@import "node_modules/smart-app-banner/smart-app-banner";
  1. JS (my project uses ECMAScript 6)

In sample, there are two part for JS in body in html file:

First Part:

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

So in my project, I import this js file in app.js:

import "smart-app-banner";

Second Part:

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

So in my project, I create a new js file called smart-banner.js in the same directory as app.js file, and put this code in, then import the js file in 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
  });

But, it's not working. The banner didn't display correctly. Is any step wrong? How to check these process step by step to make sure every file works correctly?

4

1 回答 1

0

我找到了答案。问题发生在 JS 文件的导入上。

因为它是ECMAScript 6with 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 回答