- 用Template模板初始化
- 添加 Font Awesome Icon 圖標庫
- Framework7 View和Page概念
- 更新main視圖
- 自定義樣式文件CSS
- 初始化App應用怨愤，關聯(lián)slider和顯示的數(shù)值
7. 調用Spotify API挣饥，處理返回數(shù)據(jù)
App的主界面已經(jīng)寫好经宏，下面開始處理數(shù)據(jù)充石。
Spotify是國外流行的一個歌曲搜索平臺灭袁，提供API訪問瘦馍。
- 給Button添加一個@click方法歹撒，以ajax訪問API，然后處理返回數(shù)據(jù)
- 給搜索框v-model綁定搜索條件
- 通過window.f7.alert捍壤，輕松顯示提示框（太方便了骤视，就跟原生
js alert('abc');一樣，一行就實現(xiàn)了＞榫酢） - 通過window.Dom7.ajax专酗，輕松實現(xiàn)Ajax訪問 -- 開始體會到F7的強大了吧？盗扇！
- TODO: ajax訪問時祷肯，顯示旋轉的等待圖案，你來試一試疗隶。（ref: http://framework7.io/docs/modal.html#preloader）
# \spotifyApp\src\main.vue
<template>
佑笋。。斑鼻。
<f7-input type="text" placeholder="Search for..." v-model="term" />
蒋纬。。坚弱。
<f7-button id="btnSearch" class="button button-big button-fill color-green" @click="onSubmit">Submit</f7-button>
蜀备。。荒叶。
</template>
<script>
export default {
name: 'Index',
data() {
return {
sliderVal: 20,
term: '',
}
},
mounted() {
window.Dom7(document).on('deviceready', () => {
console.log("Device is ready!");
});
},
methods: {
onSubmit() {
if (this.term.length == 0) {
window.f7.alert("請輸入搜索內容");
} else {
var mediaType = "track";
var url = "https://api.spotify.com/v1/search?q=" + this.term + "&type=" + mediaType + "&limit=" + this.sliderVal;
window.Dom7.ajax({
dataType: 'json',
url: url,
success: function(resp) {
window.f7.alert("Number of results " + resp.tracks.items.length);
},
error: function(xhr) {
console.log("Error on ajax call " + xhr);
}
});
}
}
}
}
</script>
保存碾阁，刷新一下Chrome瀏覽器，點擊“Submit”:
Paste_Image.png
輸入一個關鍵字些楣，再點擊“Submit”:
Paste_Image.png
OK脂凶，數(shù)據(jù)順利取回了，下面愁茁，我們創(chuàng)建一個新的Page蚕钦，來顯示返回的數(shù)據(jù)
8. 新的List Page（搜索結果）
創(chuàng)建新的List.vue文件，用v-for優(yōu)雅地展示搜索結果數(shù)據(jù)鹅很。
- 子頁面里冠桃，f7-navbar是在
f7-page內部！保證了整體navbar-through的效果 - 使用store.js道宅，在page之間傳送數(shù)據(jù)（大型應用建議用vuex）
- f7-searchbar輕松創(chuàng)建搜索框食听，對f7-list.searchbar-found里的數(shù)據(jù)胸蛛，能夠自動實現(xiàn)搜索功能
- f7-list-item.swipeout對于每一條結果，實現(xiàn)左滑樱报、右滑（功能后面實現(xiàn)）
- v-for 請?zhí)砑?:key="item.id"葬项，不然vue會告警
- Tips: Chrome瀏覽器模擬手機訪問時，有時頁面不能刷新迹蛤，需要關掉Chrome重開民珍。建議Chrome瀏覽器保持以網(wǎng)頁模式訪問
# \spotifyApp\src\assets\vue\List.vue
<template>
<f7-page name="list" id="list">
<f7-navbar>
<f7-nav-left back-link="Back" sliding></f7-nav-left>
<f7-nav-center sliding>Results</f7-nav-center>
<f7-nav-right>
<f7-link icon="icon-bars" open-panel=""></f7-link>
</f7-nav-right>
</f7-navbar>
<!-- Search bar -->
<f7-searchbar cancel-link="Cancel" search-list="#mediaList" placeholder="Search in items" :clear-button="true">
</f7-searchbar>
<!-- Will be visible if there is no any results found, defined by "searchbar-not-found" class -->
<f7-list class="searchbar-not-found">
<f7-list-item title="Nothing found"></f7-list-item>
</f7-list>
<!-- Search-through list -->
<f7-list class="searchbar-found" media-list id="mediaList">
<f7-list-item swipeout v-for="(item, index) in searchTracks" :key="item.id" link="#" :media="''" :title="item.name" :subtitle="item.artists[0].name" :text="item.album.name">
<f7-swipeout-actions right>
<f7-swipeout-button>
<a class="bg-orange favorite" :data-item="index"><i class="icon fa fa-star fa-2x"></i></a>
<a href="#" class="bg-blue share" :data-item="index"><i class="icon fa fa-share fa-2x"></i></a>
</f7-swipeout-button>
</f7-swipeout-actions>
<f7-swipeout-actions left>
<f7-swipeout-button>
<a href="#" class="bg-green preview" :data-item="index"><i class="icon fa fa-play fa-2x"></i></a>
</f7-swipeout-button>
</f7-swipeout-actions>
</f7-list-item>
</f7-list>
</f7-page>
</template>
<script>
import store from '../../store.js'
export default {
name: 'list',
data() {
return {
searchTracks: [],
}
},
mounted() {
window.Dom7(document).on('deviceready', () => {
console.log("List Page is ready!");
this.searchTracks = store.searchTracks;
});
}
}
</script>
數(shù)據(jù)中轉文件store.js，保存搜索結果：
# \spotifyApp\src\store.js
const store = {
searchTracks: [],
};
export default store;
把List.vue加入路由routes.js:
# \spotifyApp\src\routes.js
export default [
{
path: '/list/',
component: require('./assets/vue/List.vue')
}
]
主頁面main.vue盗飒，點擊Submit后
- 先把返回數(shù)據(jù)存入store:
store.searchTracks = resp.tracks.items; - 通過F7路由嚷量，加載List.vue。路由跳轉：
window.f7.mainView.router.load()
# \spotifyApp\src\main.vue
methods: {
onSubmit() {
if (this.term.length == 0) {
window.f7.alert("請輸入搜索內容");
} else {
var mediaType = "track";
var url = "https://api.spotify.com/v1/search?q=" + this.term + "&type=" + mediaType + "&limit=" + this.sliderVal;;
window.Dom7.ajax({
dataType: 'json',
url: url,
success: function(resp) {
// window.f7.alert("Number of results " + resp.tracks.items.length);
console.log(resp.tracks.items);
store.searchTracks = resp.tracks.items;
window.f7.mainView.router.load({
url: '/list/',
context: resp.tracks.items
});
},
error: function(xhr) {
console.log("Error on ajax call " + xhr);
}
});
}
}
OK逆趣，數(shù)據(jù)展示頁面好了蝶溶，你應該能看到如下搜索結果圖：
Paste_Image.png
而且，不用寫一行js代碼宣渗，你的搜索框就已經(jīng)工作了：
Paste_Image.png
9. media頁面（歌曲詳情）
當我們點擊搜索結果里某一首歌曲抖所，需要打開歌曲詳情頁面，并且能夠播放
--> 請看詳解（3）
