參考：原文PhoneGap Day Intermediate Workshop 2016是Framework7+傳統(tǒng)js，這里一邊講解F7的基本概念柿祈，一邊改為大家熟悉的Vue.js哈误。最后酣难，引入一些Phonegap打包App的一些小技巧。
前言
Framework7框架和Vue.js黑滴，就跟Ionic+Angular一樣，有著深層次的配合紧索！開發(fā)起來很多輪子都已經(jīng)造好袁辈，事半功倍！
雖然這個在線音樂播放器App比較簡單珠漂，但涵蓋了F7+Phonegap基本的方方面面晚缩。
F7+Vue的教程很少，所以從簡單實例入手很合適媳危，大家最好手動碼代碼荞彼，不多，但絕對能加深理解待笑。細(xì)細(xì)體會一下它有哪些便捷的地方鸣皂，以及哪些要注意的，避免入坑暮蹂。原文是用javascript寞缝，我們通過比較，也可以體會到Vue的簡潔和強(qiáng)大仰泻！
要點(diǎn)：
- F7接近原生的各種組件
- 自帶router荆陆，不需要vue-router了
- 自帶Dom7.ajax，不需要vue-resouce了
- 大型項目建議使用vuex集侯，本實例簡單地使用store.js
- Phonegap打包Hybrid App的一些技巧
- 源碼：https://github.com/kevinqqnj/spotifyApp
本實例完成圖：
1. 用template模板初始化
注意uglify-js要單獨(dú)安裝
npm install phonegap -g
phonegap create spotifyApp --template cordova-template-framework7-vue-webpack
cd spotifyApp
npm install
npm install uglify-js@^2.8.0
phonegap platform add browser android
phonegap run browser -- --lr
這時被啼，應(yīng)該會彈出瀏覽器窗口，顯示demo頁面棠枉。
2. 添加Font Awesome Icon圖標(biāo)庫
Framework7有內(nèi)置的圖標(biāo)浓体，但只是基本的，9個术健。
icon-back, icon-forward, icon-bars, icon-camera, icon-f7, icon-next, icon-prev, icon-plus
F7支持額外的圖標(biāo)庫汹碱，比如Framework7 Icons、Material Icons荞估、 FontAwesome咳促、Ionicons等等。
這里以FontAwesome為例：下載 http://fontawesome.io/assets/font-awesome-4.7.0.zip 勘伺，然后解壓css跪腹、fonts目錄到：\spotifyApp\src\assets\\。
然后飞醉，在main.js引入即可：
# \spotifyApp\src\main.js
import './assets/css/font-awesome.min.css'
下面冲茸，你就可以在template里隨意引用fa Icon了：
<i class="icon icon-bars"></i> // F7內(nèi)置的圖標(biāo)
<i class="icon fa fa-star"></i> // FontAwesome圖標(biāo)
3. Framework7 View和Page概念
詳細(xì)文檔：Framework7 docs - views
F7把常用的Mobile App視圖功能都包裝好了屯阀，大家先理解一下View和Page，這是最重要的基本概念轴术，跟內(nèi)置路由有密切聯(lián)系:
- Views - 所有的可見view的容器难衰。只允許有一個views
- View - 一個App，可以有多個單獨(dú)的逗栽、可見的view盖袭，它有獨(dú)立的settings、navigation彼宠、history鳄虱。默認(rèn)的主view帶有class “.view-main”。最常見的多view場景凭峡，是iPad橫屏應(yīng)用：左邊是導(dǎo)航view拙已，右邊是內(nèi)容展示view
- Pages - 一個view下，所有page的容器
- Page - 每個page摧冀，代表一個web page倍踪。單個view下，可以有多個page索昂，但同一時間只能顯示一個page（由路由控制）
本實例的view+page:
由上可知惭适，我們設(shè)置了一個view，它包含多個pages楼镐。主頁面page是Index癞志，帶導(dǎo)航欄Navbar、工具欄Toolbar
4. 更新main視圖：
修改layout為黑色：
# \spotifyApp\src\index.html
<body class="layout-dark">
修改main.vue框产，添加主page：
先刪除template div#app之間的所有元素
# \spotifyApp\src\main.vue
<template>
<!-- App -->
<div id="app">
</div>
</template>
然后添加views - view - pages - page：
- f7-pages.navbar-through.toolbar-through 所有頁面共享Navbar凄杯、Toolbar效果
- f7-navbar是在f7-view和
f7-pages中間，因為使用了navbar-through（注：其它子頁面秉宿，f7-navbar是在f7-page內(nèi)部＝渫弧） - f7-list-item media，用于添加圖標(biāo)
- 注意f7-toolbar描睦、text input, range input元素的使用
- 相比較原來F7的HTML膊存，F(xiàn)7-vue節(jié)省了一半以上的代碼哦
# \spotifyApp\src\main.vue
<template>
<!-- App -->
<div id="app">
<f7-views>
<!-- Main view-->
<f7-view main dynamicNavbar>
<!-- Top Navigation Bar-->
<f7-navbar>
<f7-nav-left>
<f7-link icon="icon-bars" open-panel="left"></f7-link>
</f7-nav-left>
<f7-nav-center>Spotify Browser</f7-nav-center>
</f7-navbar>
<!-- Pages -->
<f7-pages navbar-through toolbar-through>
<!-- Page, data-page contains page name-->
<f7-page name="index">
<!-- Scrollable page content-->
<f7-block-title>Criteria</f7-block-title>
<f7-list form>
<f7-list-item media="<i class='icon fa fa-music'></i>">
<f7-label>Songs</f7-label>
<f7-input type="text" placeholder="Search for..." value="" />
</f7-list-item>
<f7-list-item media="<i class='icon fa fa-list-ol'></i>">
<f7-label>Max Results</f7-label>
<f7-input type="range" id="numResults" min="0" max="50" step="1" value="20" />
<f7-input type="text" id="sliderVal" disabled value="20" />
</f7-list-item>
</f7-list>
<f7-block>
<div class="row">
<div class="col-100">
<f7-button id="btnSearch" class="button button-big button-fill color-green">Submit</f7-button>
</div>
</div>
</f7-block>
</f7-page>
</f7-pages>
<!-- Bottom Toolbar on every view unless no-toolbar class specified (see item template)-->
<f7-toolbar>
<f7-link class="link external">
<i class="icon icon-spotify"></i>
<p class="color-white"> Spotify</p>
</f7-link>
<f7-link class="link external">
<i class="icon icon-f7"></i>
</f7-link>
</f7-toolbar>
</f7-view>
</f7-views>
</div>
</template>
5. 自定義樣式文件CSS:
以上的工具欄里，使用了自定義class忱叭，引用圖片來作為icon隔崎。對于自己的CSS，建議統(tǒng)一放在main.css韵丑。
- 復(fù)制這個圖片：spotify.png 到
\spotifyApp\src\assets\images\\目錄 - 創(chuàng)建自己的css文件
main.css（如果你想用sass爵卒，則不需要新建，用默認(rèn)的main.scss就行）
# \spotifyApp\src\assets\css\main.css
i.icon.icon-spotify {
width: 29px; height: 29px; background-image: url("../images/spotify.png"); margin-right: 3px;
}
不要忘了在 main.js里引用樣式文件：
# \spotifyApp\src\main.js
import './assets/css/main.css'
6. 初始化App應(yīng)用撵彻，關(guān)聯(lián)slider和顯示的數(shù)值
Framework7-vue初始化是在main.js钓株，你可以對應(yīng)用的全局參數(shù)自行定義实牡，這里是所有的全局參數(shù)。
另外轴合，在Vue組件內(nèi)创坞，你可以通過this.f7、this.$device受葛、this.$theme摆霉、this.Dom7來對Framework7的instance，進(jìn)行全面的操控奔坟。
- material: 設(shè)為true的話，界面會變成Google Material Design樣式搭盾。本文用默認(rèn)的iOS配色
- modalTitle: 設(shè)置所有Alert/Notify/Modal的標(biāo)題
# \spotifyApp\src\main.js
// Init App
new Vue({
el: '#app',
template: '<app/>',
// Init Framework7 by passing parameters here
framework7: {
root: '#app',
/* Uncomment to enable Material theme: */
// material: true,
routes: Routes,
modalTitle: "Spotify Browser", // 用于所有Alert/Notify/Modal的標(biāo)題
},
// Register App Component
components: {
app: App
}
})
關(guān)聯(lián)range-input數(shù)據(jù)咳秉，這是Vue的強(qiáng)項，不用寫一行代碼鸯隅，用v-model數(shù)據(jù)綁定實現(xiàn)了：
# \spotifyApp\src\main.vue
<template>
澜建。。蝌以。
<f7-input type="range" id="numResults" min="0" max="50" step="1" v-model="sliderVal" />
<f7-input type="text" id="sliderVal" disabled :value="sliderVal" />
炕舵。。跟畅。
</template>
<script>
export default {
name: 'Index',
data() {
return {
sliderVal: 20,
}
},
mounted() {
window.Dom7(document).on('deviceready', () => {
console.log("Device is ready!");
});
},
}
</script>
7. 調(diào)用Spotify API咽筋，處理返回數(shù)據(jù)
App的主界面已經(jīng)寫好，下面開始處理數(shù)據(jù)徊件。
--> 請看詳解（2）
