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

参考：
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更有原生体验

从两个方面：外观、操作

  • 外观CSS Tips
    • 去除点击高亮：手机上，点击按钮本身就有反馈，不需要像网页一样高亮，所以去除
 -webkit-tap-highlight-color: rgba(0,0,0,0);
 -webkit-tap-highlight-color: transparent;
Paste_Image.png

  • 去除长按选择文字的功能：手机上一般不需要


    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

  • 去除控件光滑显示（iOS使用的是扁平化Flat设计）


    Paste_Image.png
-webkit-appearance: none;

  • 去除长按链接显示的菜单


    Paste_Image.png
 -webkit-touch-callout: none
  • 使用原生滚动Native Scrolling，不显示滚动条，能感应滑动速度
-webkit-overflow-scrolling: touch;
  • 使用手机系统字体System Fonts
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;
  • 确保使用了FastClick，来处理手机tap delay

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

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

  • 操作性能
  • 对于不同分辨率，提供不同尺寸的图片。使用SVG，会更好，因为它跟尺寸无关
  • 对于长列表中的图片，使用懒加载Lazy load: <img data-src="" width="64px" class="lazy">，注意是data-src。这样，不在当前视图里的图片，不会预先加载，只会显示width宽度的灰色方块。从而提升长列表加载的速度。
Paste_Image.png
  • 动画使用GPU加速
 .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，能很好地帮你加速过场。在过场动画时，它会先保存截屏，等待后台渲染好新页面时，再切换。

  • HTML Caching缓存：尽可能先从内存里读页面
  • iOS建议使用插件：super fast WKWebView -guide here

12. App参数调整

  • Webview Bounce Effect / DisallowOverscroll
    用phonegap开发的app，会存在ios下面整个页面能够被上下拖动的情况，这个只需要在config.xml中加入如下一行配置解决，整体拖不动(包括Navbar, Toolbar)，但是页面还是可以上下拖动的
<preference name="DisallowOverscroll" value="true" />
  • 关闭iOS Backup Storage (不然会存到iCloud)
 <preference name="BackupWebStorage" value="none" />

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

  • Content Security Policy

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>
  • 应用图标和Splash Screen
    复制icon.png到/src/static/文件夹，点这里下载。
# \spotifyApp\config.xml
  <content src="index.html"/>
  <icon src="www/static/icon.png" />
  • Bonus:
    Ionic有个实用的工具：Ionic Resources来自动生成各种尺寸的icon和Splash。你只要准备icon(192x192)、splash screen(2208x2208)就行。
    查看这里post，来使用他们的工具。

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

  • 安装分享插件：
    phonegap plugin add cordova-plugin-x-socialsharing --save

  • List页面，右滑的分享按钮，添加监听事件：

# \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");
    }
  }
  • Media页面，右下角，分享按钮，添加监听事件：
    跟List稍有不同，是通过this.mediaId取得索引
# \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

使用：

  • 在mounted: {} 里添加事件监听
# /src/main.vue
mounted() {
  document.addEventListener("offline", this.onOnlineOffline, false);
  document.addEventListener("online", this.onOnlineOffline, false);
}
  • 在methods: {}里添加处理事件
# /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，必须要有顺手的工具，不然出了问题无从下手。

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

  • iOS Remote Debugging via Safari
    Requirements
  • Mac OS X
  • USB Cable
  • Safari Version 6.0+
  • iOS Device or Simulator
Paste_Image.png
  • Android Device Debugging via Chrome
    Requirements
  • USB Cable
  • Chrome Version 32+
  • Android Device or Emulator (已打开USB调试功能)
  • Android Studio or Android Tools (打包Apk时才会用到)
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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,294评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,493评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,790评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,595评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,718评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,906评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,053评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,797评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,250评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,388评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,018评论 3赞 316
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2赞 350

推荐阅读更多精彩内容