开始使用 Framework7
优质
小牛编辑
125浏览
2023-12-01
使用Framework7可以很方便创建你的web应用，有两种快速上手的办法：
你可以从example或者demo apps中选择一个应用并做修改成为自己的应用。也可以从头开始创建应用。
让我们看看如何从头开始创建一个应用:
下载安装Framework7
首先，我们需要下载Framework7需要的所有文件：
- 可以从 Framework7 GitHub repository 上下载代码。
- 或者通过bower来安装:
$ bower install framework7
在下载/安装好的目录下，我们需要的文件都在 dist 目录下
基本布局
在这个基本APP中我们使用iOS主题。Android/Material 应用布局请参考App Layout
我们首选需要创建一个 index.html 文件。
这是一个 iOS 单页应用，有一个 view, left panel 和 动态穿透布局的navbar 和 toolbar:
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Your app title -->
<title>My App</title>
<!-- Path to Framework7 iOS CSS theme styles-->
<link rel="stylesheet" href="path/to/framework7.ios.min.css">
<!-- Path to Framework7 iOS related color styles -->
<link rel="stylesheet" href="path/to/framework7.ios.colors.min.css">
<!-- Path to your custom app styles-->
<link rel="stylesheet" href="path/to/my-app.css">
</head>
<body>
<!-- Status bar overlay for full screen mode (PhoneGap) -->
<div class="statusbar-overlay"></div>
<!-- Panels overlay-->
<div class="panel-overlay"></div>
<!-- Left panel with reveal effect-->
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Left panel content goes here</p>
</div>
</div>
<!-- Views -->
<div class="views">
<!-- Your main view, should have "view-main" class -->
<div class="view view-main">
<!-- Top Navbar-->
<div class="navbar">
<div class="navbar-inner">
<!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
<div class="center sliding">Awesome App</div>
<div class="right">
<!--
Right link contains only icon - additional "icon-only" class
Additional "open-panel" class tells app to open panel when we click on this link
-->
<a href="#" class="link icon-only open-panel"><i class="icon icon-bars-blue"></i></a>
</div>
</div>
</div>
<!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes-->
<div class="pages navbar-through toolbar-through">
<!-- Page, "data-page" contains page name -->
<div data-page="index" class="page">
<!-- Scrollable page content -->
<div class="page-content">
<p>Page content goes here</p>
<!-- Link to another page -->
<a href="about.html">About app</a>
</div>
</div>
</div>
<!-- Bottom Toolbar-->
<div class="toolbar">
<div class="toolbar-inner">
<!-- Toolbar links -->
<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>
</div>
</div>
</div>
</div>
<!-- Path to Framework7 Library JS-->
<script type="text/javascript" src="path/to/framework7.min.js"></script>
<!-- Path to your app js-->
<script type="text/javascript" src="path/to/my-app.js"></script>
</body>
</html> 初始化APP
我们写好布局，引用了 Framework7 的JS和CSS之后，我们需要初始化 APP 和 View.
在我们的 my-app.js 文件中这样写：
// Initialize app
var myApp = new Framework7();
// If we need to use custom DOM library, let's save it to $$ variable:
var $$ = Framework7.$;
// Add view
var mainView = myApp.addView('.view-main', {
// Because we want to use dynamic navbar, we need to enable it for this view:
dynamicNavbar: true
});再添加一个Page
我们添加一个 "about app"页面，放在 about.html 文件中
<!-- We don't need full layout in this file because this page will be parsed with Ajax. It is just enough to put here .navbar and .page-->
<!-- Top Navbar-->
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="back link">
<i class="icon icon-back-blue"></i>
<span>Back</span>
</a>
</div>
<div class="center sliding">About</div>
<div class="right">
<a href="#" class="link icon-only open-panel"><i class="icon icon-bars-blue"></i></a>
</div>
</div>
</div>
<div class="pages">
<div data-page="about" class="page">
<div class="page-content">
<div class="content-block">
<p>Here is About page!</p>
<p>Fusce eros lectus, accumsan eget mi vel, iaculis tincidunt felis. Nulla tincidunt pharetra sagittis. Fusce in felis eros. Nulla sit amet aliquam lorem, et gravida ipsum. Mauris consectetur nisl non sollicitudin tristique. Praesent vitae metus ac quam rhoncus mattis vel et nisi. Aenean aliquet, felis quis dignissim iaculis, lectus quam tincidunt ligula, et venenatis turpis risus sed lorem. Morbi eu metus elit. Ut vel diam dolor.</p>
</div>
</div>
</div>
</div>给about页面添加JS代码
假设我们需要在 about 页面中执行JS代码。因为 about.html 页面是通过JS加载的，我们不能通过在 about.html 中添加 <script> 标签的方式来添加JS代码，因为script标签会直接被忽略。所说，Framework7 提供了简单的回调函数，我们可以在 my-app.js中使用：
// Initialize app and store it to myApp variable for futher access to its methods
var myApp = new Framework7();
// We need to use custom DOM library, let's save it to $$ variable:
var $$ = Framework7.$;
// Add view
var mainView = myApp.addView('.view-main', {
// Because we want to use dynamic navbar, we need to enable it for this view:
dynamicNavbar: true
});
// Now we need to run the code that will be executed only for About page.
// For this case we need to add event listener for "pageInit" event
// Option 1. Using one 'pageInit' event handler for all pages (recommended way):
$$(document).on('pageInit', function (e) {
// Get page data from event data
var page = e.detail.page;
if (page.name === 'about') {
// Following code will be executed for page with data-page attribute equal to "about"
myApp.alert('Here comes About page');
}
})
// Option 2. Using live 'pageInit' event handlers for each page
$$(document).on('pageInit', '.page[data-page="about"]', function (e) {
// Following code will be executed for page with data-page attribute equal to "about"
myApp.alert('Here comes About page');
})打开页面
我们只需要在浏览器中输入 index.html 的地址即可。
因为Framework7是通过Ajax在不同页面间跳转的，所以你需要启动一个 http 服务器才可以（不要直接打开本地文件)