前言
现在单页面应用的开发已经越来越多，要做一款用户体验较好的混合应用，实现快速开发，其中Framework7就是一款免费开源的UI框架，完美兼容iOS主题，给人带来原生般的体验。
简单介绍
Framework7所给你带来的用户体验是jqm不能比拟的，组件做得很精致，其中一个最主要的特色就页面右滑返回上一页面，这个特性就基本跟原生iOS一模一样。Framework7不依赖任何第三方库，这个是特别好的，在你创作应用的时候不需要引入一堆库，也不会因为第三方库的更新而使你的应用变动很大，它有自己的一个dom库，叫做dom7。
获取dom7变量
var $$ = Framework7.$;
其中的$$是为了跟jquery区别开来，dom7的接口几乎跟jquery一样，所用使用起来简单，容易入手。
需要介绍另一个就是Template7-javascript模版引擎，如果你使用过 Handlebars的话，那么是使用Template7就会很容易，可以简单介绍一下Template7，你只需要在html文件里面引入一个template，然后就可以在你的js文件里面，进行应用Template7.compile，附上你的数据，就可以快速绘制出你想要的html，实际上，个人使用起来，Template7的使用要比Handlebars方便很多，其中有很多常用的helpers，Template7就有提供，但是在Handlebars就需要自己去自定义helpers。Template7已经包含在Framework7里面，不需要你另外下载。
最后只需引入Framework7的相关js和css文件，再加上你的html，js和css就可以进行应用的创建了。
Template7的简单使用：
在html上面写上你要加载的模版
在js上调用Template7的语法，并且附上你要加载的数据
var template = $$('#template').html();
// compile it with Template7
var compiledTemplate = Template7.compile(template);
// Now we may render our compiled template by passing required context
var context = {
firstName: 'John',
lastName: 'Doe'
};
var html = compiledTemplate(context);
其中的html就是你要绘制的内容。
快速入手
首先，你要初始化Framework7，
var myApp = new Framework7();
myApp是Framework7一个实例变量，在你后面使用Framework7的相关组件或者操作的时候可以使用。还要初始化view-main:
var mainView = app.views.create('.view-main');
这个在你后面页面的跳转起作用。
介绍两个重要的点：
1)路由，可以在初始化Framework7的时候，设置全局的route，参数中的name是路由的名称，path是路由的路径，在点击路由匹配的链接时，将会加载这个路由路径对应路径的文件，还有一个url，通过调用 Ajax 加载页面。
这面路由的加载方式没有用到，本人是直接使用下面的方式来加载页面
mainView.router.load({
url:'xxx.html'
});
路由有很多好用的api，其中常用的说一下，router.navigate，导航到某一个页面，参数url就是你跳转的页面；router.back，就是返回哪一个页面，不指定url的话就是默认返回上一页面，options里面的force是从dom中否移除之前所有的页面；router.refreshPage()，刷新页面，在某些场景中就需要用到刷新的操作，这条api就可以帮助你快速刷新页面。
2)页面，页面是应用中最最基本的组件，page里面有page-content，这个是页面的主内容，我们所添加的div等等都放在page-content里面，用来绘制出我们想要的内容，另一个就是页面的事件，数据就是绑定在页面的事件当中，所以我们需要了解页面的不同状态时机所触发的不同事件，这个对于我们的数据绑定和操作十分重要，例如，页面的init事件，beforein事件，afterin事件等等。当然，我们可以通过获取page，从而得到一些page的数据，例如page name，page的上一页面等等。
程序在浏览器跑起来的时候，我们可以通过检查元素来查看页面跳转的时候标签的变化。chrome中最多就只有2个页面在切换，当前页面会自动添加上page-current class，而上一个页面就会添加上page-previous class，也就是说如果需要获取当前页面，可以通过这个类来获取。需要指出的是，程序来到主页面的时候，如果此时没有跳转，那么此时只有一个page，并且这个page的init事件会触发，但是afterin事件不会触发，所以数据的绑定可以在init事件，但是跳转到其他页面，我们此时需要在页面每次出现的时候操作一些数据的话，那么我们可以在afterin事件中操作，但是需要注意第一页afterin不会触发，这个是从字面上页也好理解：程序第一次加载第一个页面，init事件会触发，after in就不会触发，只有从其他页面返回第一页面，第一页面的afterin才会触发。
遇到的坑
1.searchbar，创建searchbar，这个组建做的跟原生iOS很相似，但是其中的，如果input框输入第一个字符的话，search事件会相应三次事件，可以打印log，第一次是有值，第二次没值，第三次有值，这样就存在了很大的问题了，一些绑定的事件会被重复调用，只要不是输入第一个字符，其他的情况都是正常的。还有就是clear，disable事件的触发都会掉用search事件。
2.virtual list，这个组建是为了加载大量的数据用的，但是有时候item的内容很多，css比较复杂的话，那么滑动virtual list的时候，就会出现卡顿；另一个就是virtual list里面不需要自己添加ul，创建的时候会帮你加上，你只需置空virtual list里面的内容即可；virtual list必须包含在page-content class里面，否则你在create virtual list的时候程序会报错。
3.infinite，这个对于加载更多是必须的，其中infinite的时候，需要控制好加载下一次的时机，可以在添加一个变量来控制数据的加载。加载到没有更多的时候，一定要destroy infinite。
注意
1.上面文章介绍，framework7的页面跳转最多是2个页面保存在dom中，如果需要多个页面在dom中，不想其它页面被移除，那么我们只需在创建mainview的时候设置2个变量为true，stackPages:是否允许previous pages在导航链中，不会从dom中移除；allowDuplicateUrls:是否允许相同url的新加载的页面作为当前的活跃页面。
2.在iOS主题中，滑动返回手势是默认开启的，取消滑动返回手势，可以在创建mianview的时候，设置iosSwipeBack为false；如果觉得触发滑动返回的区域过小，那么可以设置iosSwipeBackActiveArea，默认值是30；如果是需要在js中动态控制有些页面有滑动返回手势，有些页面不具备，那么可以通过mainView.params.iosSwipeBack来设置，一般就是在page:afterin中设置。
相关参数的设置：
var mainView = app.views.create('.view-main', {
stackPages:true,
allowDuplicateUrls: true,
iosSwipeBackActiveArea:100
});
3.framework7的导航栏最外层是navbar class，里面一层是navbar-inner class，在navbar-inner层绘制即可，如果需要二级导航栏，可以在navbar-inner class里面包含subnavbar。
4.在测试中发现framework7没有给iphonex的底部绘制安全区域（本人使用的是framework7，2.2.1版本，iphonex模拟器），这样会导致底部元素被遮挡，后面通过Safari的调试发现，可以给framework7-root class添加一个css样式。
html.with-statusbar.device-iphone-x .framework7-root{
padding-bottom: calc(constant(safe-area-inset-bottom));
padding-bottom: calc(env(safe-area-inset-bottom));
}
Safari真机调试，模拟器调试：
1）Mac：safari-偏好设置-高级-勾选，在菜单栏中显示“开发”菜单。
2）iPhone：设置-safari-高级-选中“Javascript”和“Web检查器”；iphone模拟器也是同样设置。
最后通过数据线将iphone和mac链接在一起，运行iPhone上的web页面，选择safari-开发，即可进行web页面的调试。
总结
这个UI框架实际上做的很精致，大大提升了用户体验，但是其中有某些bug也是比较严重的，在GitHub上提供了相应的issue，作者也没有回复，所以更新的速度也是较慢，如果你需要快速开发一款应用，而且注重用户体验的话，Framework7是不错的选择。