アプリの初期化

必要なCSSとJavaScriptファイルがリンクされたHTMLレイアウトが表示されるようになりました。次に、アプリを初期化する必要があります(例:`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');

次は?

アプリのスキャフォールディングと初期化の方法がわかりました。次に、アプリ/コアコンポーネントをチェックして、そのパラメータとメソッド、ルーターの動作、ビューページ、その他のコンポーネントについて詳しく学びましょう。