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