Question

我是webpack和EMCA脚本的初学者，尽管我不认为我是新的JS开发人员，可以说我在这里和那里使用JS，但不是我的主要开发语言，而且我对所有js导入以及如何使用感到困惑它可以应用于我的framework7应用程序。

很抱歉，以下一些简单的问题，

我有我的src / js / app.js

import $$ from 'dom7';
import Framework7 from 'framework7/framework7.esm.bundle.js';

// Import F7 Styles
import 'framework7/css/framework7.bundle.css';

// Import Icons and App Custom Styles
import '../css/icons.css';
import '../css/app.less';

// Import own application auth class
import 'app-auth/lib/index.js';

// Import Routes
import routes from './routes.js';

// Import main app component
import App from '../app.f7.html';

// trying to initialize the Auth class 
// not sure whether should be using "const" or "var"
var auth = new Auth();

var app = new Framework7({
  root: '#app', // App root element
  component: App, // App main component

  name: 'mos_app', // App name
  theme: 'auto', // Automatic theme detection


  // App routes
  routes: routes,

  // ** i have tried below, but not sure is correct ? 
  auth: auth,
});

因此从上面的app.js中，不确定如何将其传递给 index.html还是我其余的pages_x.html？

<!-- built styles file will be auto injected -->
</head>
<body>
  <script>
    // Method login
    // parameters username, password, database
    console.log(app.name);
    app.auth.login('admin', 'admin', 'mydbname').then(console.log);

    // Method logout
    app.auth.logout().then(console.log);
  </script>  
  <div id="app"></div>

  <!-- built script files will be auto injected -->
</body>
</html>

当我检查控制台时，错误提示变量不是定义，我不确定从哪里开始以及谷歌搜索什么，但是我对JS ECMA的了解不足。谢谢你们中的任何一个向我提供一些有关如何使其工作的建议？

我基本上需要加载自己的node_modules，然后对其进行初始化和使用， node_module是一个类。

非常感谢。

Answer 1

浏览器按最终HTML中出现的顺序可以预料地加载东西。因此，在主体底部插入脚本之前，先执行头部的script标签。

当您将应用程序的构造函数称为“ var app = new Framework7（{...}）”时，它仅解析其所知道的选项，因此无法在其中定义变量。属性“ auth”被静默跳过。

我的观点是，您应该避免拆分代码，并在src / js / app.js中执行所需的任何操作。

如果要在加载框架后执行某些操作，则应使用“ init”函数将“ on”对象传递给应用程序构造函数

类似这样的东西：

var app = new Framework7({
  root: '#app', // App root element
  component: App, // App main component

  name: 'mos_app', // App name
  theme: 'auto', // Automatic theme detection

  // App routes
  routes: routes,

  // HERE:
  on: {
    init: function(){
      //do something
    }
  }
});

您可以在这里https://framework7.io/docs/app.html

进行检查。

但是，登录通常是在输入一些信息后才能完成的操作，因此您可能希望了解事件的处理。

如何将变量从app.js传递到index.html？

1 个答案: