Framework7 框架实战，解决奇怪问题

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个页面，有列表，有滑动的菜单栏，有链接。

  

    

    

      

        

          
Left Panel
          

            
This is a left side panel. You can close it by clicking outsite or on this link: close me. You can put here anything, even another isolated view like in Right Panel
          
          
Main View Navigation
          

            

             

                wenwen
              
            
          
          

            
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.
            
Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit libero.
          
        
      
    
    

      

        

          

            

              
Right Panel
            
          
          

            

              
This is a right side panel. You can close it by clicking outsite or on this link: close me. You can put here anything, even another isolated view.
            
            
Panel Navigation
            

              

                
Right panel page 1
                
Right panel page 2
              
            
          
        
      
    
	

	
	


	  		 
	

    

	
	
	
        
   chats5
chat5
			挂号
        
		
		
		
        
		email_fill5
email5
			病友圈
        
       
        
           cloud_fill7
email7
			我的
			
        
    
	
	
	
    

		 
	
	
      

	  
        

          

            

              
                menu
                menu
              
            
            
病友圈
            

              
                navigation
                navigation
              
            
            

              

                

                  
                  
                  
                
                Cancel
              
            
			
			
		
			
			 
          
		  	
		 
        
				
			

        

          

            推荐
            关注
            圈子
          
        
      
			
        

		  
		 

		
      

	  

    

    

  
  	
	 

      

        

        

        
星期二 at 2:15 PM
		
#  怀孕
      
      

	  
a nice photo
	  
What a nice photo i took yesterday!
        

		

		
        
      

大体布局非常重要，刚入门的开发者，千万不要看看就写自己的项目，一定要遵照2.2版的官方教程，跟它一模一样的样式写，否则就会出现很多奇葩问题，点击返回无反应，类似我，折磨两天才找到原因。

看官方文档也会有点晕，因为会介绍好几个布局方式，刚开始不知道用哪种方式，在这里我就只介绍我的，实战后的样式。

div body最外层，这个不用说

div app 这个body 里 第一层，就是你的应用的意思

对于这个class="app" ,需要在你自定义app.js 中初始化

var myApp = new Framework7({
	theme:'ios',
	root:'#app'
});

初始化后框架才能正常使用。

app是第一层，这里面就是块级的布局，包括滑动菜单，左面的，右面的，工具栏，view，这些都在这里面。

  
  第一层
  
 左滑出菜单，这里简单的写最外的div，里面的看官方文档照着写就好
    

  
  右边菜单
    

    这个page就是你的最主要界面，包含views，这个page非常非常重要，

  views就是包含view的,包含工具栏

    
  这个是工具栏，就是上面配图下面的三个页面按钮

   tab1链接view-1

              tab2链接view-2

    

     

这个是每一个工具栏对应的页面
    

  

页面2
      

基本的布局就是上面这样，官方文档，还有其他布局，但是真正项目的时候布局不会官方那么简单，基本的就照这个写就可以了。

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;}

在界面中有写

  所以在css中可以写#app class名，来自定义样式，这样官方固定的样式就会失效，如果不加#app 你写不起作用的，如果你自己写的样式就不用加#app。

结尾

教程到此结束，这篇教程侧重点是遇到的奇怪问题，还要结合一些入门的教程，一起看，才能完全掌握，这个框架还是很好用的，样式漂亮，结构化。