Framework7 框架实战，解决奇怪问题
简介
现在web越来越偏向手机端，手机端html布局越来越重要，最近开发手机端网页项目越来越多，急需要一款好用的手机端框架，这时遇到了Framework7,界面漂亮，APP化，对于常用的部件都有，果断入门，经过一周的苦苦挣扎，终于稳定运行，期间遇到了各种奇葩问题，经过苦苦寻找，各种奇怪思路，一遍遍的试终于解决，对于这个框架，网上的各种入门教程，基本就是照搬官方教程，看了等于没看，都是说大体怎么回事，界面怎么布局，可是真正放在项目里面去使用会遇到各种让人炸脑袋的问题，很多问题只能自己解决，网上没有，所以对于入门的小白，这篇就是实战，解决方法。备注，此教程只是纯用framework7，并没有逻辑框架类似加入vue，业务逻辑使用jquery解决。
版本问题
这个问题，如果你已经在学习这个框架，遇到一些奇葩问题，请再三看自己导入的js，css版本，现在最新是2.2版本，之前是1.5，网上有些教程是1.5，在写html标签的时候，这个框架对html标签，有很严格的写法，你不能太自由，否则就会出现各种奇葩问题，此教程是2.2版，当然是用新版比较爽一点，所以直接新版。
当初我就遇到了很多奇葩问题：
1.返回链接back，点击后无反应，搞了一天各种改就是不行，特别苦恼，几乎要放弃。程序员就是在折磨中度过啊。
2.路由问题，这个框架路由使用了一个js去配置，虽然这个框架主要是ui部分，对于经验少点的前端，类似我其实是写后台的，接受这个，并使用也被折磨了一会，不正确配置路由，也会点击链接无反应。
3.自定义样式，不知如何写自定义样式。这个框架写好了样式，文件很大，但是真正写项目，需要很多自定义样式。
解决问题1，界面布局
这个界面是很基本的手机端界面，有下面的3个页面，有列表，有滑动的菜单栏，有链接。
<body>
<div id="app">
<div class="statusbar"></div>
<div class="panel panel-left panel-cover">
<div class="page">
<div class="page-content">
<div class="block-title">Left Panel</div>
<div class="block">
<p>This is a left side panel. You can close it by clicking outsite or on this link: <a href="#" class="panel-close">close me</a>. You can put here anything, even another isolated view like in <a href="#" data-panel="right" class="panel-open">Right Panel</a></p>
</div>
<div class="block-title">Main View Navigation</div>
<div class="list links-list">
<ul>
<li>
<a href="/wenwen/" class="panel-close">wenwen</a>
</li>
</ul>
</div>
<div class="block">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus met aliquam. Integer et neque sed libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.</p>
<p>Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit libero.</p>
</div>
</div>
</div>
</div>
<div class="panel panel-right panel-reveal">
<div class="view view-init view-right" name="right" data-url="/">
<div class="page">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="title">Right Panel</div>
</div>
</div>
<div class="page-content">
<div class="block">
<p>This is a right side panel. You can close it by clicking outsite or on this link: <a href="#" class="panel-close">close me</a>. You can put here anything, even another isolated view.</p>
</div>
<div class="block-title">Panel Navigation</div>
<div class="list links-list">
<ul>
<li><a href="/panel-right-1/">Right panel page 1</a></li>
<li><a href="/panel-right-2/">Right panel page 2</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="page">
<!--主显示区域-->
<div class="views tabs toolbar-through">
<!--工具栏-->
<div class="toolbar tabbar tabbar-labels">
<div class="toolbar-inner navbar-current">
<a href="#view-3" class="tab-link">
<i class="icon icon-fill f7-icons ios-only">chats<span class="badge color-green">5</span></i>
<i class="icon material-icons">chat<span class="badge color-green">5</span></i>
<span class="tabbar-label">挂号</span>
</a>
<a href="#view-1" class="tab-link tab-link-active">
<i class="icon icon-fill f7-icons ios-only">email_fill<span class="badge color-green">5</span></i>
<i class="icon material-icons">email<span class="badge color-green">5</span></i>
<span class="tabbar-label">病友圈</span>
</a>
<a href="#view-4" class="tab-link">
<i class="icon icon-fill f7-icons ios-only">cloud_fill<span class="badge color-red">7</span></i>
<i class="icon material-icons">email<span class="badge color-red">7</span></i>
<span class="tabbar-label">我的</span>
</a>
</div>
</div>
<div id="view-1" class="view view-main tab tab-active " data-url="/">
<div data-page="index" class="page navbar-fixed toolbar-fixed">
<!--导航栏-->
<div class="navbar navbar-current">
<div class="navbar-inner ">
<div class="left">
<a href="#" class="link icon-only panel-open" data-panel="left">
<i class="icon f7-icons ios-only">menu</i>
<i class="icon material-icons md-only">menu</i>
</a>
</div>
<div class="title quan-title">病友圈</div>
<div class="right">
<a class="link icon-only searchbar-enable" data-searchbar=".searchbar-components">
<i class="icon f7-icons ios-only">navigation</i>
<i class="icon material-icons md-only">navigation</i>
</a>
</div>
<form data-search-container=".components-list" data-search-in="a" class="searchbar searchbar-expandable searchbar-components searchbar-init">
<div class="searchbar-inner">
<div class="searchbar-input-wrap">
<input type="search" placeholder="Search components"/>
<i class="searchbar-icon"></i>
<span class="input-clear-button"></span>
</div>
<span class="searchbar-disable-button">Cancel</span>
</div>
</form>
</div>
</div>
<div class="subnavbar">
<div class="subnavbar-inner">
<div class="segmented segmented-raised">
<a class="button tab-link tab-link-active" href="#tab1">推荐</a>
<a class="button tab-link" href="#tab2">关注</a>
<a class="button tab-link" href="#tab3">圈子</a>
</div>
</div>
</div>
<!--内容-->
<div class="page-content ptr-content" data-ptr-distance="55"">
<div class="tabs">
<div class="tab tab-active" id="tab1">
<div class="ptr-preloader">
<div class="preloader"></div>
<div class="ptr-arrow"></div>
</div>
<a href="/about/">
<div class="card demo-facebook-card">
<div class="card-header">
<div class="demo-facebook-avatar"><img src="/Public/images/doc/guchunxia.jpg"/></div>
<div class="demo-facebook-name"></div>
<div class="demo-facebook-date">星期二 at 2:15 PM</div>
<div class="quan-name"><label class="quan-jing"># </label><label class="quan-word">怀孕</label></div>
</div>
<div class="card-content card-content-padding">
<div class="card-content-title"><div class="card-content-title-nei"><p>a nice photo</p></div></div>
<div class="card-content-con"><div class="card-content-con-nei"><p>What a nice photo i took yesterday!</p></div></div>
<div class="big-block">
<div class="img-block"><img src="/Public/images/lock.jpg" width="100%"/></div>
</div>
</div>大体布局非常重要，刚入门的开发者，千万不要看看就写自己的项目，一定要遵照2.2版的官方教程，跟它一模一样的样式写，否则就会出现很多奇葩问题，点击返回无反应，类似我，折磨两天才找到原因。
看官方文档也会有点晕，因为会介绍好几个布局方式，刚开始不知道用哪种方式，在这里我就只介绍我的，实战后的样式。
div body最外层，这个不用说
div app 这个body 里 第一层，就是你的应用的意思
对于这个class="app" ,需要在你自定义app.js 中初始化
var myApp = new Framework7({
theme:'ios',
root:'#app'
});初始化后框架才能正常使用。
app是第一层，这里面就是块级的布局，包括滑动菜单，左面的，右面的，工具栏，view，这些都在这里面。
<div id="app"> 第一层
<div class="panel panel-left panel-cover"> 左滑出菜单，这里简单的写最外的div，里面的看官方文档照着写就好
</div>
<div class="panel panel-right panel-reveal"> 右边菜单
</div>
<div class="page"> 这个page就是你的最主要界面，包含views，这个page非常非常重要，
<div class="views tabs toolbar-through"> views就是包含view的,包含工具栏
<div class="toolbar tabbar tabbar-labels"> 这个是工具栏，就是上面配图下面的三个页面按钮
<a href="#view-1" class="tab-link tab-link-active"></a> tab1链接view-1
<a href="#view-3" class="tab-link"></a> tab2链接view-2<div id="view-1" class="view view-main tab tab-active " data-url="/"> 这个是每一个工具栏对应的页面
</div>
<div id="view-2" > 页面2
<div>
</div>
</div>
基本的布局就是上面这样，官方文档，还有其他布局，但是真正项目的时候布局不会官方那么简单，基本的就照这个写就可以了。
page最外层，panel和page是平级的，page里面是views，views里面，工具栏和view-1,view-2是平级的，一定要按这个布局来，否则就会出现很多奇葩问题，点击无反应啊，界面不对啊。
在这里要说一下page这个div，刚开始我说的奇葩问题，点击back就是无反应，在路由正确配置下，依然无反应，搜网上，也有发这个问题的，但是没有人回答，这里无反应，终于解决了，就是因为这个page，1.5版本的官方教程里面，有个布局介绍里面说page外再写个pages包住，刚开始我就写了个pages，怎么搞就是不能点击返回，去掉pages，立马好了，真是蛋疼啊，点击链接后，点back也能返回了，之间就是不能返回，很奇葩，href写#，不能返回，写#加个字母就能返回，界面写对后，只要#就能正常返回。
js篇
关于app.js
再次确认你的版本，重要事情说三遍
var $$ = Dom7; 类似jquery
// Theme
var theme = 'ios'; 主题，
var app = new Framework7({ 实例化
//id: 'io.framework7.testapp',
root: '#app',
theme: theme,
routes: routes,}); 路由这样实例化，界面写对，项目就会正常显示。这里逐个说一下
Dom7属于内置的jquery，你也可以自己导入jquery，很多方法这两个都是一样的，也有不一样的。
主题，这个框架专门针对ios，安卓的，只有这两个可以跑，所以有两个主题，可以设置使用哪种主题，在我做项目的时候，加载界面会花时间长，因为css很大，里面包含两种主题，我比较喜欢ios界面，但是界面里面div有的会使用安卓的样式，如果要减少css体积，可以只导入ios.css，然后在界面里面大的div 加上 ios-only样式，不加，界面会错乱。
var view1=app.views.create('#view-1', {
// Because we use fixed-through navbar we can enable dynamic navbar
dynamicNavbar: true,
routes: [
{
path: '/',
url: '/index.php/SickTalk/sickacc',
name: 'index',
},});我在上面的布局中使用了views,里面有view-1,view2,这个要单独写js，官方文档中有的没有写，只是简单的一个页面，但是真实项目界面肯定多，不能像官方那么简单。
1.5的时候界面实例化是 var mainView = app.addView('.view-main');
是addView(); 到了2.2版本变成了 var view1=app.views.create('#view-1');
app.views.create(); 这个很重要，不要搞错，我就搞错了， 导致一直失败，最后才发现，所以一定要看2.2的官方文档，不要漏任何细节，漏一点就会各种错误，还找不到原因，我遇到的很多问题都是，老老实实，不相信自己的聪明，看文档才解决。
路由，上面文件中是引入的单独的路由文件，没接触过前端路由这样配置的，可以不使用这种单独文件导入的方式，他这个路由还是有点复杂的，一个页面里所有链接，都要在js文件都配置出来，点击才会有反应，不然无反应，这么鸡肋，不知道有多大作用。
var view1=app.views.create('#view-1', {
// Because we use fixed-through navbar we can enable dynamic navbar
dynamicNavbar: true,
routes: [
{
path: '/',
url: '/index.php/SickTalk/sickacc',
name: 'index',
},
{
path:'/grid/',
url:'/Public/pages/grid.html',
name:'grid',
},
{
path: '/about/',
url: '/Public/pages/about.html',
options: {
animate: true,
}
},如果是小白，可以像上面这样写，在view页面实例化中直接写路由，这个是我配置失败各种试之后，在网上找到的，有人这样配置，简单一点，这个页面就是底下这些链接，不会像单独的routes.js文件中层层套，那么复杂。
这里有个奇葩问题，在滑出的菜单栏中的链接点击有效，只能在当前view 加了 view-main的样式的时候才能点击，在其他页面点击菜单里链接不好使，无反应，但是view-main只能标注一个页，这个问题没有解决。
组件
这个部分是我最最喜欢这个框架的地方，组件使用是最爽的，按钮啊，弹出的popup，dialog，只要照着官方文档，复制html 放在界面中，然后在自定义js，也就是app.js中，再复制官方js，就能使用，非常爽。这个比较容易，就不介绍了。
自定义样式
在项目中，会改很多样式，包括框架固定的样式，但是如何改呢，
#app .item-title{color:#4c4c4c;}
在界面中有写<div class="app"> 所以在css中可以写#app class名，来自定义样式，这样官方固定的样式就会失效，如果不加#app 你写不起作用的，如果你自己写的样式就不用加#app。
结尾
教程到此结束，这篇教程侧重点是遇到的奇怪问题，还要结合一些入门的教程，一起看，才能完全掌握，这个框架还是很好用的，样式漂亮，结构化。