前言

現(xiàn)在單頁面應用的開發(fā)已經(jīng)越來越多，要做一款用戶體驗較好的混合應用，實現(xiàn)快速開發(fā)，其中Framework7就是一款免費開源的UI框架魂毁，完美兼容iOS主題，給人帶來原生般的體驗出嘹。

簡單介紹

Framework7所給你帶來的用戶體驗是jqm不能比擬的席楚，組件做得很精致，其中一個最主要的特色就頁面右滑返回上一頁面疚漆，這個特性就基本跟原生iOS一模一樣酣胀。Framework7不依賴任何第三方庫，這個是特別好的娶聘，在你創(chuàng)作應用的時候不需要引入一堆庫，也不會因為第三方庫的更新而使你的應用變動很大甚脉，它有自己的一個dom庫丸升，叫做dom7。
獲取dom7變量

var $$ = Framework7.$;

其中的$$是為了跟jquery區(qū)別開來牺氨，dom7的接口幾乎跟jquery一樣狡耻，所用使用起來簡單墩剖，容易入手。
需要介紹另一個就是Template7-javascript模版引擎夷狰，如果你使用過 Handlebars的話岭皂，那么是使用Template7就會很容易，可以簡單介紹一下Template7沼头，你只需要在html文件里面引入一個template爷绘，然后就可以在你的js文件里面，進行應用Template7.compile进倍，附上你的數(shù)據(jù)土至，就可以快速繪制出你想要的html，實際上猾昆，個人使用起來陶因，Template7的使用要比Handlebars方便很多，其中有很多常用的helpers垂蜗，Template7就有提供楷扬，但是在Handlebars就需要自己去自定義helpers。Template7已經(jīng)包含在Framework7里面贴见，不需要你另外下載烘苹。
最后只需引入Framework7的相關js和css文件，再加上你的html蝇刀，js和css就可以進行應用的創(chuàng)建了螟加。
Template7的簡單使用：
在html上面寫上你要加載的模版

<script id="template" type="text/template7">
    <p>Hello, my name is {{firstName}} {{lastName}}</p>
</script>

在js上調(diào)用Template7的語法，并且附上你要加載的數(shù)據(jù)

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就是你要繪制的內(nèi)容吞琐。

快速入手

首先捆探，你要初始化Framework7，

 var myApp = new Framework7();

myApp是Framework7一個實例變量站粟，在你后面使用Framework7的相關組件或者操作的時候可以使用黍图。還要初始化view-main:

var mainView = app.views.create('.view-main');

這個在你后面頁面的跳轉(zhuǎn)起作用。
介紹兩個重要的點：
1)路由奴烙，可以在初始化Framework7的時候助被，設置全局的route，參數(shù)中的name是路由的名稱切诀，path是路由的路徑揩环，在點擊路由匹配的鏈接時，將會加載這個路由路徑對應路徑的文件幅虑，還有一個url丰滑，通過調(diào)用 Ajax 加載頁面。
這面路由的加載方式?jīng)]有用到倒庵，本人是直接使用下面的方式來加載頁面

mainView.router.load({
            url:'xxx.html'
});

路由有很多好用的api褒墨，其中常用的說一下炫刷，router.navigate，導航到某一個頁面郁妈，參數(shù)url就是你跳轉(zhuǎn)的頁面浑玛；router.back，就是返回哪一個頁面噩咪，不指定url的話就是默認返回上一頁面顾彰，options里面的force是從dom中否移除之前所有的頁面；router.refreshPage()剧腻，刷新頁面拘央，在某些場景中就需要用到刷新的操作，這條api就可以幫助你快速刷新頁面书在。

2)頁面灰伟，頁面是應用中最最基本的組件，page里面有page-content儒旬，這個是頁面的主內(nèi)容栏账，我們所添加的div等等都放在page-content里面，用來繪制出我們想要的內(nèi)容栈源，另一個就是頁面的事件挡爵，數(shù)據(jù)就是綁定在頁面的事件當中，所以我們需要了解頁面的不同狀態(tài)時機所觸發(fā)的不同事件甚垦，這個對于我們的數(shù)據(jù)綁定和操作十分重要茶鹃，例如，頁面的init事件艰亮，beforein事件闭翩，afterin事件等等。當然迄埃，我們可以通過獲取page疗韵，從而得到一些page的數(shù)據(jù)，例如page name侄非，page的上一頁面等等蕉汪。
程序在瀏覽器跑起來的時候，我們可以通過檢查元素來查看頁面跳轉(zhuǎn)的時候標簽的變化逞怨。chrome中最多就只有2個頁面在切換者疤，當前頁面會自動添加上page-current class，而上一個頁面就會添加上page-previous class叠赦，也就是說如果需要獲取當前頁面宛渐，可以通過這個類來獲取。需要指出的是眯搭，程序來到主頁面的時候窥翩，如果此時沒有跳轉(zhuǎn)，那么此時只有一個page鳞仙，并且這個page的init事件會觸發(fā)寇蚊，但是afterin事件不會觸發(fā)，所以數(shù)據(jù)的綁定可以在init事件棍好，但是跳轉(zhuǎn)到其他頁面仗岸，我們此時需要在頁面每次出現(xiàn)的時候操作一些數(shù)據(jù)的話，那么我們可以在afterin事件中操作借笙，但是需要注意第一頁afterin不會觸發(fā)扒怖，這個是從字面上頁也好理解：程序第一次加載第一個頁面，init事件會觸發(fā)业稼，after in就不會觸發(fā)盗痒，只有從其他頁面返回第一頁面，第一頁面的afterin才會觸發(fā)低散。

遇到的坑

1.searchbar俯邓，創(chuàng)建searchbar，這個組建做的跟原生iOS很相似熔号，但是其中的稽鞭，如果input框輸入第一個字符的話，search事件會相應三次事件引镊，可以打印log朦蕴，第一次是有值，第二次沒值弟头，第三次有值吩抓，這樣就存在了很大的問題了，一些綁定的事件會被重復調(diào)用亮瓷，只要不是輸入第一個字符琴拧，其他的情況都是正常的。還有就是clear嘱支，disable事件的觸發(fā)都會掉用search事件蚓胸。

2.virtual list，這個組建是為了加載大量的數(shù)據(jù)用的除师，但是有時候item的內(nèi)容很多沛膳，css比較復雜的話，那么滑動virtual list的時候汛聚，就會出現(xiàn)卡頓锹安；另一個就是virtual list里面不需要自己添加ul，創(chuàng)建的時候會幫你加上，你只需置空virtual list里面的內(nèi)容即可叹哭；virtual list必須包含在page-content class里面忍宋，否則你在create virtual list的時候程序會報錯。

3.infinite风罩，這個對于加載更多是必須的糠排，其中infinite的時候，需要控制好加載下一次的時機超升，可以在添加一個變量來控制數(shù)據(jù)的加載入宦。加載到?jīng)]有更多的時候，一定要destroy infinite室琢。

注意

1.上面文章介紹乾闰，framework7的頁面跳轉(zhuǎn)最多是2個頁面保存在dom中，如果需要多個頁面在dom中盈滴，不想其它頁面被移除涯肩，那么我們只需在創(chuàng)建mainview的時候設置2個變量為true，stackPages:是否允許previous pages在導航鏈中雹熬，不會從dom中移除宽菜；allowDuplicateUrls:是否允許相同url的新加載的頁面作為當前的活躍頁面。

2.在iOS主題中竿报，滑動返回手勢是默認開啟的铅乡，取消滑動返回手勢，可以在創(chuàng)建mianview的時候烈菌，設置iosSwipeBack為false阵幸；如果覺得觸發(fā)滑動返回的區(qū)域過小，那么可以設置iosSwipeBackActiveArea芽世，默認值是30挚赊；如果是需要在js中動態(tài)控制有些頁面有滑動返回手勢，有些頁面不具備济瓢，那么可以通過mainView.params.iosSwipeBack來設置荠割，一般就是在page:afterin中設置。
相關參數(shù)的設置：

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.在測試中發(fā)現(xiàn)framework7沒有給iphonex的底部繪制安全區(qū)域（本人使用的是framework7，2.2.1版本柬帕，iphonex模擬器）哟忍，這樣會導致底部元素被遮擋狡门，后面通過Safari的調(diào)試發(fā)現(xiàn)，可以給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真機調(diào)試其馏，模擬器調(diào)試：
1）Mac：safari-偏好設置-高級-勾選，在菜單欄中顯示“開發(fā)”菜單粗蔚。
2）iPhone：設置-safari-高級-選中“Javascript”和“Web檢查器”尝偎；iphone模擬器也是同樣設置。
最后通過數(shù)據(jù)線將iphone和mac鏈接在一起鹏控，運行iPhone上的web頁面，選擇safari-開發(fā)肤寝，即可進行web頁面的調(diào)試当辐。

總結

這個UI框架實際上做的很精致，大大提升了用戶體驗鲤看，但是其中有某些bug也是比較嚴重的缘揪，在GitHub上提供了相應的issue，作者也沒有回復义桂，所以更新的速度也是較慢找筝，如果你需要快速開發(fā)一款應用，而且注重用戶體驗的話慷吊，F(xiàn)ramework7是不錯的選擇袖裕。