使用 Framework7+Vue.js 开发一个 Spotify 播放器 (有实例详解)

3,862 阅读5分钟
原文链接: www.jianshu.com

参考:原文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的一些技巧
  • 源码:github.com/kevinqqnj/s…

本实例完成图:


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 IconsMaterial IconsFontAwesomeIonicons等等。
这里以FontAwesome为例:下载 fontawesome.io/assets/font… ,然后解压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内置的图标
<i class="icon fa fa-star"></i>   // 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:


Paste_Image.png

由上可知,我们设置了一个view,它包含多个pages。主页面page是Index,带导航栏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内部!)
  • f7-list-item media,用于添加图标
  • 注意f7-toolbar、text input, range input元素的使用
  • 相比较原来F7的HTML,F7-vue节省了一半以上的代码哦
# \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 href="http://www.spotify.com" class="link external">
            <i class="icon icon-spotify"></i>
            <p class="color-white"> Spotify</p>
          </f7-link>
          <f7-link href="http://www.idangero.us/framework7" class="link external">
            <i class="icon icon-f7"></i>
          </f7-link>
        </f7-toolbar>
      </f7-view>
    </f7-views>
  </div>
</template>

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: '<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的标题
  },
  // Register App Component
  components: {
    app: App
  }
})

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

# \spotifyApp\src\main.vue
<template>
  。。。
  <f7-input type="range" id="numResults" min="0" max="50" step="1" v-model="sliderVal" />
  。。。
</template>
<script>
export default {
  name: 'Index',
  data() {
    return {
      sliderVal: 20,
    }
  },
  mounted() {
    window.Dom7(document).on('deviceready', () => {
      console.log("Device is ready!");
    });
  },
}
</script>

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

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

--> 请看详解(2)