一：App基本布局
用Framework7搭建的app，一般在index.html中引入所需的样式文件与js文件，并且搭建起整体的基本视图框架。
二：跨平台、通用型布局
<!DOCTYPE html> <html> <head> <!--1:4个meta标签，指定编码格式、界面宽高、app性质、状态栏颜色等参数--> <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, viewport-fit=cover"> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- Color theme for statusbar --> <meta name="theme-color" content="#2196f3"> <!-- 2:App标题 --> <title>应用标题</title> <!-- 3:引入Framework7样式文件 --> <link rel="stylesheet" href="path/to/framework7.min.css"> <!-- 4:引入自己定义的样式文件--> <link rel="stylesheet" href="path/to/my-app.css"> </head> <body> <!-- 5:app根元素 --> <div id="app"> <!-- 6:创建app状态栏 --> <div class="statusbar"></div> <!-- 7:app的主视图，之后app的各个页面文件都加载到这个view中进行展示 --> <div class="view view-main"> <!--1）定义一个页面（该div标签对包含页面定义内容） --> <div data-name="页面名称" class="page"> <!-- 2）顶部导航栏 --> <div class="navbar"> <div class="navbar-inner"> <div class="title">页面标题</div> </div> </div> <!-- 3）底部工具栏 --> <div class="toolbar"> <div class="toolbar-inner"> <!--底部工具栏选项（控制跳转）--> <a href="#" class="link"></a> <a href="#" class="link"></a> </div> </div> <!-- 4）页面内容 --> <div class="page-content"> .... </div> </div> </div> </div> <!--8:引入Framework7的JS文件--> <script type="text/javascript" src="path/to/framework7.min.js"></script> <!--9:引入自定义的JS文件--> <script type="text/javascript" src="path/to/my-app.js"></script> </body> </html>
三：IOS主题的App布局文件
<!DOCTYPE html> <html> <head> <!-- 1:meta标签--> <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"> <!-- 2:应用标题--> <title>My App</title> <!-- 3:引入IOS样式文件 --> <link rel="stylesheet" href="path/to/framework7.ios.min.css"> <link rel="stylesheet" href="path/to/framework7.ios.colors.min.css"> <!-- 4:引入自定义样式文件--> <link rel="stylesheet" href="path/to/my-app.css"> </head> <body> <!-- 5:app状态栏 --> <div class="statusbar-overlay"></div> <!--6:创建视图 --> <div class="views"> <!-- 7:App主视图 --> <div class="view view-main"> <!-- 8:导航栏--> <div class="navbar"> <div class="navbar-inner"> <div class="center sliding">导航栏标题</div> </div> </div> <!--9:定义页面--> <div class="pages navbar-through toolbar-through"> <!-- 1）页面名称 --> <div data-page="名称" class="page"> <!-- 2）页面内容 --> <div class="page-content"> ... </div> </div> </div> <!-- 10:底部工具栏--> <div class="toolbar"> <div class="toolbar-inner"> <!-- 工具栏选项卡--> <a href="跳转的page文件" class="link">选项1</a> <a href="跳转的page文件" class="link">选项2</a> </div> </div> </div> </div> <!-- 11:引入Framework7的js文件--> <script type="text/javascript" src="path/to/framework7.min.js"></script> <!-- 12:引入自定义的样式文件--> <script type="text/javascript" src="path/to/my-app.js"></script> </body> </html>
四：Android Material样式主题
<!DOCTYPE html> <html> <head> <!-- 1:meta标签--> <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"> <!-- 2:应用标题--> <title>My App</title> <!-- 3:引入IOS样式文件 --> <link rel="stylesheet" href="path/to/framework7.material.min.css"> <link rel="stylesheet" href="path/to/framework7.material.colors.min.css"> <!-- 4:引入自定义样式文件--> <link rel="stylesheet" href="path/to/my-app.css"> </head> <body> <!-- 5:app状态栏 --> <div class="statusbar-overlay"></div> <!--6:创建视图 --> <div class="views"> <!-- 7:App主视图 --> <div class="view view-main"> <!-- 8:导航栏--> <div class="navbar"> <div class="navbar-inner"> <div class="center sliding">导航栏标题</div> </div> </div> <!--9:定义页面--> <div class="pages navbar-through toolbar-through"> <!-- 1）页面名称 --> <div data-page="名称" class="page"> <!-- 2）页面内容 --> <div class="page-content"> ... </div> </div> </div> <!-- 10:底部工具栏--> <div class="toolbar"> <div class="toolbar-inner"> <!-- 工具栏选项卡--> <a href="跳转的page文件" class="link">选项1</a> <a href="跳转的page文件" class="link">选项2</a> </div> </div> </div> </div> <!-- 11:引入Framework7的js文件--> <script type="text/javascript" src="path/to/framework7.min.js"></script> <!-- 12:引入自定义的样式文件--> <script type="text/javascript" src="path/to/my-app.js"></script> </body> </html>
