日韩欧美情趣中出,日本二区二区

參考：
Framework7+Vue.js Spotify播放器 - 實例詳解（1）
Framework7+Vue.js Spotify播放器 - 實例詳解（2）
Framework7+Vue.js Spotify播放器 - 實例詳解（3）

回顧一下：

用Template模板初始化
添加 Font Awesome Icon 圖標(biāo)庫
Framework7 View和Page概念
更新main視圖
自定義樣式文件CSS
初始化App應(yīng)用，關(guān)聯(lián)slider和顯示的數(shù)值
調(diào)用Spotify API，處理返回數(shù)據(jù)
新的List頁面（搜索結(jié)果）
media頁面（歌曲詳情）
更多Mobile App元素：側(cè)邊欄Sidebar和元素左滑右滑Swipeout

11. 讓你的App更有原生體驗

從兩個方面：外觀、操作

外觀CSS Tips
- 去除點擊高亮：手機上，點擊按鈕本身就有反饋，不需要像網(wǎng)頁一樣高亮，所以去除

 -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設(shè)計）

Paste_Image.png

-webkit-appearance: none;

去除長按鏈接顯示的菜單

Paste_Image.png

 -webkit-touch-callout: none

使用原生滾動Native Scrolling，不顯示滾動條，能感應(yīng)滑動速度

-webkit-overflow-scrolling: touch;

使用手機系統(tǒng)字體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

幸運的是，所有以上，F(xiàn)ramework7默認都幫我們實現(xiàn)了！
你是在開玩笑么？NO！理解這些平臺間差異，對于開發(fā)Hybrid App是非常重要的！

體驗一下：
使用 Safari Developer tools (iOS device) 或Chrome Developer tools (Android device) ，遠端調(diào)試remote debugging你的設(shè)備，然后手動修改一下Safari / Chrome里的CSS，體驗一下，如果沒有這些細節(jié)，體驗會多么差！

操作性能
對于不同分辨率，提供不同尺寸的圖片。使用SVG，會更好，因為它跟尺寸無關(guān)
對于長列表中的圖片，使用懶加載Lazy load: <img data-src="" width="64px" class="lazy">，注意是data-src。這樣，不在當(dāng)前視圖里的圖片，不會預(yù)先加載，只會顯示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緩存：盡可能先從內(nèi)存里讀頁面
iOS建議使用插件：super fast WKWebView -guide here

12. App參數(shù)調(diào)整

Webview Bounce Effect / DisallowOverscroll
用phonegap開發(fā)的app，會存在ios下面整個頁面能夠被上下拖動的情況，這個只需要在config.xml中加入如下一行配置解決，整體拖不動(包括Navbar, Toolbar)，但是頁面還是可以上下拖動的

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

關(guān)閉iOS Backup Storage (不然會存到iCloud)

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

以上，F(xiàn)ramework7也默認幫你設(shè)置好了

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>

應(yīng)用圖標(biāo)和Splash Screen
復(fù)制icon.png到/src/static/文件夾，點這里下載。

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

Bonus:
Ionic有個實用的工具：Ionic Resources來自動生成各種尺寸的icon和Splash。你只要準(zhǔn)備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頁面，右滑的分享按鈕，添加監(jiān)聽事件：

# \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頁面，右下角，分享按鈕，添加監(jiān)聽事件：
跟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. 處理網(wǎng)絡(luò)Offline

對于手機應(yīng)用來講，網(wǎng)絡(luò)通斷是經(jīng)常發(fā)生的。
如果能夠提醒用戶網(wǎng)絡(luò)斷了的話，對提升用戶友好度有很大幫助

Paste_Image.png

插件文檔：Cordova Network Information Plugin Docs

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

使用：

在mounted: {} 里添加事件監(jiān)聽

# /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. 調(diào)試App

在真機上調(diào)試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調(diào)試功能)
Android Studio or Android Tools (打包Apk時才會用到)

Paste_Image.png

PhoneGap Developer App via Weinre
GapDebug

結(jié)語

現(xiàn)在，你已經(jīng)完成一個簡單的App，并走完了整個開發(fā)流程。
最終代碼：https://github.com/kevinqqnj/spotifyApp

下面，開發(fā)你自己的實用App吧！

另外，你也可以參考這些：
Next Steps

測試和性能評估(Testing, Profiling)
browser-perf- a node based tool
Remote Debugging on Android
Debugging with Safari Web Inspector
安全(Securing your App)
Tommy Williams PhoneGap Day 2016 Workshop
統(tǒng)計(Analytics)
你的App是怎么被使用的，哪些功能用得最多，哪些是痛點
Adding Analytics to your PhoneGap Apps
useful guide to App Submission
更新(Updating your App)
Code Push Plugin (using MS CodePush Service)
Hot Code Cordova Push Pluginandassociated CLI
Learn how exFM did it(read the section titledLoading Assets).
Ionic Deployservice
A/B Testing
Optimizely Cordova Plugin
Leanplum Cordova Plugin
推送服務(wù)(Push Notification)
Simon’s MacDonald’s PhoneGap Day Push Notification Workshop
插件開發(fā)(Plugin)
Jesse MacFadyen’s PhoneGap Day 2016 Slides
Developer Guides
Managing Click Delay
Plugin Architecture
Single Page Architecture
性能(Performance Tips)
Using CSS Sprite Sheets
Hardware Acceleration
Paint Before Animate
Scrolling Tips
Minimize Reflows
Serve Images at Resolution

參考：
PhoneGap Hybrid APP 開發(fā)實戰(zhàn)(2)：Framework7 + Vue.js模板
 Phonegap踩過的坑 | IT癮
 PhoneGap Day EU Workshop

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Framework7+Vue.js Spotify播放器 - 實例詳解（4）

Framework7+Vue.js Spotify播放器 - 實例詳解（4）

11. 讓你的App更有原生體驗

12. App參數(shù)調(diào)整

13. 添加原生分享功能

14. 處理網(wǎng)絡(luò)Offline

15. 調(diào)試App

結(jié)語

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Framework7+Vue.js Spotify播放器 - 實例詳解（4）

11. 讓你的App更有原生體驗

12. App參數(shù)調(diào)整

13. 添加原生分享功能

14. 處理網(wǎng)絡(luò)Offline

15. 調(diào)試App

結(jié)語

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av