初始化应用程序

现在你可以看到我们的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',
    },
  ],
  // ... 其他参数
});

要获取所有可用的应用程序参数，请查看App / Core部分。

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

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');

What's next

好的，现在我们知道如何搭建和初始化应用程序。现在我们需要检查App / Core组件，以了解更多关于它的参数和方法，以及如何使用Router，了解更多关于视图、页面和其他组件的信息。