- 用Template模板初始化
- 添加 Font Awesome Icon 图标库
- Framework7 View和Page概念
- 更新main视图
- 自定义样式文件CSS
- 初始化App应用，关联slider和显示的数值
7. 调用Spotify API，处理返回数据
App的主界面已经写好，下面开始处理数据。
Spotify是国外流行的一个歌曲搜索平台，提供API访问。
- 给Button添加一个@click方法，以ajax访问API，然后处理返回数据
- 给搜索框v-model绑定搜索条件
- 通过window.f7.alert，轻松显示提示框（太方便了，就跟原生
js alert('abc');一样，一行就实现了！） - 通过window.Dom7.ajax，轻松实现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，数据顺利取回了，下面，我们创建一个新的Page，来显示返回的数据
8. 新的List Page（搜索结果）
创建新的List.vue文件，用v-for优雅地展示搜索结果数据。
- 子页面里，f7-navbar是在
f7-page内部！保证了整体navbar-through的效果 - 使用store.js，在page之间传送数据（大型应用建议用vuex）
- f7-searchbar轻松创建搜索框，对f7-list.searchbar-found里的数据，能够自动实现搜索功能
- f7-list-item.swipeout对于每一条结果，实现左滑、右滑（功能后面实现）
- v-for 请添加 :key="item.id"，不然vue会告警
- Tips: Chrome浏览器模拟手机访问时，有时页面不能刷新，需要关掉Chrome重开。建议Chrome浏览器保持以网页模式访问
# \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>
数据中转文件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后
- 先把返回数据存入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，数据展示页面好了，你应该能看到如下搜索结果图：
Paste_Image.png
而且，不用写一行js代码，你的搜索框就已经工作了：
Paste_Image.png
9. media页面（歌曲详情）
当我们点击搜索结果里某一首歌曲，需要打开歌曲详情页面，并且能够播放
--> 请看详解（3）
