Framework7+Vue.js Spotify播放器

参考：原文PhoneGap Day Intermediate Workshop 2016是Framework7+传统js，这里一边讲解F7的基本概念，一边改为大家熟悉的Vue.js。最后，引入一些Phonegap打包App的一些小技巧。

前言

Framework7框架和Vue.js，就跟Ionic+Angular一样，有着深层次的配合！开发起来很多轮子都已经造好，事半功倍！

虽然这个在线音乐播放器App比较简单，但涵盖了F7+Phonegap基本的方方面面。

F7+Vue的教程很少，所以从简单实例入手很合适，大家最好手动码代码，不多，但绝对能加深理解。细细体会一下它有哪些便捷的地方，以及哪些要注意的，避免入坑。原文是用javascript，我们通过比较，也可以体会到Vue的简洁和强大！

要点：

F7接近原生的各种组件
自带router，不需要vue-router了
自带Dom7.ajax，不需要vue-resouce了
大型项目建议使用vuex，本实例简单地使用store.js
Phonegap打包Hybrid App的一些技巧
源码：https://github.com/kevinqqnj/spotifyApp

本实例完成图：

Framework7+Vue.js Spotify播放器 - 实例详解（1）_第1张图片

Paste_Image.png

1. 用template模板初始化

注意uglify-js要单独安装

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

这时，应该会弹出浏览器窗口，显示demo页面。

2. 添加Font Awesome Icon图标库

Framework7有内置的图标，但只是基本的，9个。
icon-back, icon-forward, icon-bars, icon-camera, icon-f7, icon-next, icon-prev, icon-plus

F7支持额外的图标库，比如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了：

  // F7内置的图标
   // FontAwesome图标

3. Framework7 View和Page概念

详细文档：Framework7 docs - views

F7把常用的Mobile App视图功能都包装好了，大家先理解一下View和Page，这是最重要的基本概念，跟内置路由有密切联系:

Views - 所有的可见view的容器。只允许有一个views
View - 一个App，可以有多个单独的、可见的view，它有独立的settings、navigation、history。默认的主view带有class “.view-main”。最常见的多view场景，是iPad横屏应用：左边是导航view，右边是内容展示view
Pages - 一个view下，所有page的容器
Page - 每个page，代表一个web page。单个view下，可以有多个page，但同一时间只能显示一个page（由路由控制）

本实例的view+page:

Framework7+Vue.js Spotify播放器 - 实例详解（1）_第2张图片

Paste_Image.png

由上可知，我们设置了一个view，它包含多个pages。主页面page是Index，带导航栏Navbar、工具栏Toolbar

4. 更新main视图：

修改layout为黑色：

# \spotifyApp\src\index.html

修改main.vue，添加主page：
先删除template div#app之间的所有元素

# \spotifyApp\src\main.vue

然后添加views - view - pages - page：

f7-pages.navbar-through.toolbar-through 所有页面共享Navbar、Toolbar效果
f7-navbar是在f7-view和f7-pages中间，因为使用了navbar-through（注：其它子页面，f7-navbar是在f7-page内部！）
f7-list-item media，用于添加图标
注意f7-toolbar、text input, range input元素的使用
相比较原来F7的HTML，F7-vue节省了一半以上的代码哦

# \spotifyApp\src\main.vue

5. 自定义样式文件CSS:

以上的工具栏里，使用了自定义class，引用图片来作为icon。对于自己的CSS，建议统一放在main.css。

复制这个图片：spotify.png 到\spotifyApp\src\assets\images\\目录
创建自己的css文件 main.css（如果你想用sass，则不需要新建，用默认的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应用，关联slider和显示的数值

Framework7-vue初始化是在main.js，你可以对应用的全局参数自行定义，这里是所有的全局参数。
另外，在Vue组件内，你可以通过this.f7、this.$device、this.$theme、this.Dom7来对Framework7的instance，进行全面的操控。

material: 设为true的话，界面会变成Google Material Design样式。本文用默认的iOS配色
modalTitle: 设置所有Alert/Notify/Modal的标题

# \spotifyApp\src\main.js
// Init App
new Vue({
  el: '#app',
  template: '',
  // Init Framework7 by passing parameters here
  framework7: {
    root: '#app',
    /* Uncomment to enable Material theme: */
    // material: true,
    routes: Routes,
    modalTitle: "Spotify Browser",  // 用于所有Alert/Notify/Modal的标题
  },
  // Register App Component
  components: {
    app: App
  }
})

关联range-input数据，这是Vue的强项，不用写一行代码，用v-model数据绑定实现了：

# \spotifyApp\src\main.vue

7. 调用Spotify API，处理返回数据

App的主界面已经写好，下面开始处理数据。

--> 请看详解（2）

Framework7+Vue.js Spotify播放器 - 实例详解（1）

前言