Web前端之路程序员Vue.js专区

Framework7+Vue.js Spotify播放器 - 实

2017-05-16  本文已影响1449人  非梦nj

参考：
Framework7+Vue.js Spotify播放器 - 实例详解（1）
Framework7+Vue.js Spotify播放器 - 实例详解（2）
Framework7+Vue.js Spotify播放器 - 实例详解（3）

回顾一下：

  1. 用Template模板初始化
  2. 添加 Font Awesome Icon 图标库
  3. Framework7 View和Page概念
  4. 更新main视图
  5. 自定义样式文件CSS
  6. 初始化App应用，关联slider和显示的数值
  7. 调用Spotify API，处理返回数据
  8. 新的List页面（搜索结果）
  9. media页面（歌曲详情）
  10. 更多Mobile App元素：侧边栏Sidebar和元素左滑右滑Swipeout

11. 让你的App更有原生体验

从两个方面：外观、操作

 -webkit-tap-highlight-color: rgba(0,0,0,0);
 -webkit-tap-highlight-color: transparent;
Paste_Image.png 
-webkit-user-select: none;  
# for IE:
 <meta name="msapplication-tap-highlight" content="no">

文本输入框还是需要的：Keep -webkit-user-select: text; for text input fields

-webkit-appearance: none;

 -webkit-touch-callout: none

-webkit-overflow-scrolling: touch; 

iOS: font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
Android: font-family: 'RobotoRegular', 'Droid Sans', sans-serif;
Windows Phone: font-family: 'Segoe UI', Segoe, Tahoma, Geneva, sans-serif;

幸运的是，所有以上，Framework7默认都帮我们实现了！
你是在开玩笑么？NO！理解这些平台间差异，对于开发Hybrid App是非常重要的！

体验一下：
使用 Safari Developer tools (iOS device) 或Chrome Developer tools (Android device) ，远端调试remote debugging你的设备，然后手动修改一下Safari / Chrome里的CSS，体验一下，如果没有这些细节，体验会多么差！

Paste_Image.png 
 .page-on-left {
     opacity: .9;
     -webkit-transform: translate3d(-20%, 0, 0);
     transform: translate3d(-20%, 0, 0)
 }
 .page-on-center .swipeback-page-shadow {
     opacity: 1
 }
 .page-on-right {
     -webkit-transform: translate3d(100%, 0, 0);
     transform: translate3d(100%, 0, 0)
 }

Cordova的插件：Native Transitions Plugin，能很好地帮你加速过场。在过场动画时，它会先保存截屏，等待后台渲染好新页面时，再切换。

12. App参数调整

<preference name="DisallowOverscroll" value="true" />

 <preference name="BackupWebStorage" value="none" />

以上，Framework7也默认帮你设置好了

CSP用于保护你的App，免受cross-site scripting (XSS)的攻击。默认已安装插件Cordova Whitelist Plugin

# \spotifyApp\src\index.html
 <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; script-src * 'unsafe-eval'; style-src 'self'; media-src *; frame-src *;  img-src * data:; connect-src * 'unsafe-eval'">

# \spotifyApp\config.xml
 <platform name="android">
         <preference name="android-minSdkVersion" value="14" />
         <allow-intent href="market:*" />
         <allow-navigation href="http://*/*" />
 </platform>

# \spotifyApp\config.xml
  <content src="index.html"/>
  <icon src="www/static/icon.png" />

Android可以使用Cordova Splash Screen plugin插件，在config.xml里定义SplashScreen:

# \spotifyApp\config.xml
 <preference name="SplashScreen" value="screen"/>
 <preference name="SplashScreenDelay" value="3000"/>

最终的config.xml，包含了各种尺寸的icon/SplashScreen，参考这里：
https://github.com/hollyschinsky/spotify-browser/blob/master/config.xml

列一下，目前为止，我们使用到的插件：

# \spotifyApp\config.xml
    <plugin name="cordova-plugin-statusbar" spec="~1.0.1" />
    <plugin name="cordova-plugin-console" spec="~1.0.1" />
    <plugin name="cordova-plugin-whitelist" spec="~1.2.1" />
    <plugin name="cordova-plugin-media" spec="~2.1.0" />
    <plugin name="cordova-plugin-file" spec="~4.1.0" />
    <plugin name="cordova-plugin-splashscreen" spec="~3.1.0" />

13. 添加原生分享功能

手机上分享，是非常常用的功能。对于某一歌曲，点击分享到。。。


Paste_Image.png 
# \spotifyApp\src\assets\vue\List.vue
...
          <f7-swipeout-button class="bg-blue">
            <a href="#" class="bg-blue share" @click="share(index)"><i class="icon fa fa-share fa-2x"></i></a>
          </f7-swipeout-button>
...
   methods: {
    share(index) {
      var item = this.searchTracks[index];
      if (window.plugins && window.plugins.socialsharing) {
        window.plugins.socialsharing.share("Hey! My new favorite song is " + item.name + " check it out!",
          'Check this out', item.album.images[2].url, item.preview_url,
          function() {
            console.log("Share Success")
          },
          function(error) {
            console.log("Share fail " + error)
          });
      } else window.f7.alert("Share plugin not found");
    }
  }

# \spotifyApp\src\assets\vue\Media.vue
...
      <f7-list-item class="bottom">
        <a class="share item-media link" @click="share"><i class="icon fa fa-external-link fa-2x"></i></a>
      </f7-list-item>
...
   methods: {
    share(index) {
      var item = this.searchTracks[this.mediaId];
      if (window.plugins && window.plugins.socialsharing) {
        window.plugins.socialsharing.share("Hey! My new favorite song is " + item.name + " check it out!",
          'Check this out', item.album.images[2].url, item.preview_url,
          function() {
            console.log("Share Success")
          },
          function(error) {
            console.log("Share fail " + error)
          });
      } else window.f7.alert("Share plugin not found");
    }
  }

测试了一下，对于Facebook、Twitter、邮件等支持很好，但不支持微信

14. 处理网络Offline

对于手机应用来讲，网络通断是经常发生的。
如果能够提醒用户网络断了的话，对提升用户友好度有很大帮助

Paste_Image.png

插件文档：Cordova Network Information Plugin Docs

安装：
phonegap plugin add cordova-plugin-network-information --save

使用：

# /src/main.vue
mounted() {
  document.addEventListener("offline", this.onOnlineOffline, false);
  document.addEventListener("online", this.onOnlineOffline, false);
}

# /src/main.vue
methods: {
   onOnlineOffline () {
     if (navigator.connection && navigator.connection.type == Connection.NONE) {
     // offline, set a flag to grey
     this.offline = true;
     windows.alert("network connection lost!");
    }
     else {
     // It's connected, set a flag and icon colors
        this.offline = false;
    } 
}

15. 调试App

在真机上调试App，必须要有顺手的工具，不然出了问题无从下手。

你可以从以下工具中选择：

Paste_Image.png Paste_Image.png

结语

现在，你已经完成一个简单的App，并走完了整个开发流程。
最终代码：https://github.com/kevinqqnj/spotifyApp

下面，开发你自己的实用App吧！

另外，你也可以参考这些：
Next Steps

参考：
PhoneGap Hybrid APP 开发实战(2)：Framework7 + Vue.js模板
Phonegap踩过的坑 | IT瘾
PhoneGap Day EU Workshop

上一篇下一篇

猜你喜欢

热点阅读