初始化应用程序

现在你可以看到我们的 HTML 布局，其中链接了所需的 CSS 和 JavaScript 文件。现在我们应该初始化我们的应用程序（例如在 my-app.js 中）

var app = new Framework7();

在上面的例子中，我们使用了 app 变量来存储初始化后的 Framework7 实例，以便将来方便访问。它不一定要命名为 app，可以使用任何你喜欢的名称。

这非常简单。但 Framework7 也提供了更多初始化时的自定义选项，可以通过传递包含参数的对象来实现

var app = new Framework7({
  // App root element
  el: '#app',
  // App Name
  name: 'My App',
  // Enable swipe panel
  panel: {
    swipe: true,
  },
  // Add default routes
  routes: [
    {
      path: '/about/',
      url: 'about.html',
    },
  ],
  // ... other parameters
});

有关所有可用 app 参数的列表，请查看App / 核心部分。

现在，在我们初始化 app 之后，我们需要初始化我们的视图（app 布局中的 <div class="view view-main">）。视图基本上是负责导航的 app 路由器

var mainView = app.views.create('.view-main');

因此，你在 my-app.js 中的最终初始化代码可能如下所示

var app = new Framework7({
  // App root element
  el: '#app',
  // App Name
  name: 'My App',
  // Enable swipe panel
  panel: {
    swipe: true,
  },
  // Add default routes
  routes: [
    {
      path: '/about/',
      url: 'about.html',
    },
  ],
  // ... other parameters
});

var mainView = app.views.create('.view-main');

下一步是什么

好的，现在我们知道了如何搭建和初始化 app。现在我们需要查看App / 核心组件，以了解更多关于其参数和方法、路由器如何工作、以及更多关于视图、页面和其他组件的信息。