初始化應用程式

現在您可以看到我們的 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
});

如需所有可用應用程式參數的清單，請查看 應用程式/核心 區段。

現在，在我們初始化應用程式之後，我們需要初始化我們的 檢視（應用程式佈局中的 <div class="view view-main">）。檢視基本上是應用程式路由器，負責導覽

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

接下來是什麼

好的，現在我們知道如何建立應用程式架構並初始化應用程式。現在，我們需要查看 應用程式/核心 元件，以進一步了解其參數和方法、路由器的運作方式，以及更多關於 檢視、頁面 和其他元件的資訊。