初始化应用

现在你可以看到我们的基础布局文件已经准备好了,接下来可以通过 my-app.js 初始化我们的应用:

var app = new Framework7();

以上是其中一种使用 app 变量来存储已经初始化 Framework7 实例的例子。不一定非得叫 app, 你可以随意给变量起名字。

看起来非常简单。Framework7 同时还提供更多自定义变量,可以在初始化的时候进行定义:

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

可以在 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
  root: '#app',
  // App Name
  name: 'My App',
  // App id
  id: 'com.myapp.test',
  // Enable swipe panel
  panel: {
    swipe: 'left',
  },
  // Add default routes
  routes: [
    {
      path: '/about/',
      url: 'about.html',
    },
  ],
  // ... other parameters
});

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

接下来呢?

现在,我们已经知道如何使用脚手架及初始化应用了。接下来我们可以通过 App / Core 继续学习更多相关的参数及方法,例如:路由是怎么工作的, 视图 是什么? 页面 是什么?还有其他更多的组件等等。