初始化应用程序

现在你可以看到我们的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,了解更多关于视图页面和其他组件的信息。