經過頁面調用APP【H5與APP互通】

如今H5和App原生的內容原來越互通，所涉及的業務也愈來愈複雜和融合，因此如何互相之間方便的調用纔是王道。

場景1

   好比用hybrid獲取地理位置和短信信息，這固然須要框架封裝好，好比利用框架的bridge.js（下一篇文章會詳細講這個內容）

場景2

   最簡單的好比用H5調用App而後再判斷是否有安裝此應用，若是有則直接打開應用，則安裝若是沒有則去itunes或者google市場安裝。

  好比淘寶上的當即打開功能

首先場景2的功能，咱們須要瞭解他的幾個流程

   1.判斷程序系統環境

   2.判斷有應用開啓應用

   3.判斷無應用則跳到相應的連接區執行

 

咱們就從淘寶的手機此功能來分析一下吧

1.js判斷環境

   這個環境是很好判斷的

  經過useragent便可

var ua = navigator.userAgent;

if(ua.match(/iPhone|iPod/i) != null){
//iphone代碼
}
else if(ua.match(/Android/i) != null){
//android代碼
}
else if(ua.match(/iPad/i) != null){
//ipad代碼
}

用瀏覽器模仿很容易看到識別手機這個的信息

這裏我模仿google Nesux4的值是

navigator.userAgent;
"Mozilla/5.0 (Linux; Android 4.2.1; en-us; Nexus 4 Build/JOP40D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19"

其餘

這裏再稍微介紹一下關於下載這種渠道的運營，

經過不一樣的渠道是要進行返利的，因此這一部分得做爲統計,推廣都是要砸錢啊~

那麼淘寶的渠道就是利用TTID在淘寶平臺上註冊一下 http://open.taobao.com/index.htm

TTID 是用於統計無線客戶端用戶訪問狀況的統計代碼，

看淘寶的這個http://m.taobao.com/channel/act/sale/tbdl1.html?代碼有點凌亂

1.裏面竟然帶console

2.裏面竟然只有android手機纔會統計頻道里的數據…

2.認識了環境以後能夠愉快的調用了吧？

   這個跟握手規則很接近，不是你想調就能掉，

   首先應用得定義本身的規範（schema規則）定義本身的連接，根據定製的連接才能掉。當應用定義這個規則之後不只能夠應用和頁面之間調用，並且應用能夠和應用之間調用。

  ios中須要在info.plist

在Info.plist中，增長一個字段，名稱爲CFBundleURLTypes（URL Types）。

裏面的內容爲數組形式，其中定義好一個CFBundleURLName後將

以CFBundleURLSchemes爲能夠的array纔是咱們能夠調用的內容

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLName</key>
        <string>package name(com.cnblogs.www)</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>cloud</string>
        </array>
    </dict>
</array>

好比定義了上面這句後就能夠用

iOSDevTips://的schame調用了

 

具體用法可見

http://iosdevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html

  ios預留了如下schema

//打開Mail
[[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"mailto://info@iphonedevelopertips.com"]]

//打開電話
[[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"tel://8004664411"]];

//打開SMS
[[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"sms:55555"]];

//打開AppStore
NSURL *appStoreUrl = [NSURL URLWithString:@"http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=291586600&mt=8"];
[[UIApplication sharedApplication] openURL:appStoreUrl];

詳情參見 https://developer.apple.com/library/ios/featuredarticles/iPhoneURLScheme_Reference/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007899-CH1-SW1

 

Android android經過intent來調用

首先得在android配置文件manifest裏面爲相關須要調用的頁面配置intent

<activity android:name=".MyUriActivity">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="myapp" android:host="path" />
    </intent-filter>
</activity>

android intent配合比較複雜，並且也能夠用於在內部的調用，甚至在頁面切換的時候也是必不可少的，對於調用比iphone的相對更寬泛些。全局的調用是用broadCast廣播的方式進行，而頁面之間的傳輸是在頁面下定義

此外若是android要用intent調用別的app或者其餘什麼的還須要加相關的permission

詳見http://developer.android.com/reference/android/content/Intent.html

吶在H5中咱們就這樣調用就好

intent://

咱們來看看淘寶是怎麼作到的

在裏面有個intent的連接

剩下的不言自明

ok因此剩下的功能變的很是簡單

3.調用App

var ua = navigator.userAgent;if(ua.match(/iPhone|iPod/i) != null){
  document.location = 'chblogs://'; }
else if(ua.match(/Android/i) != null){
  document.location = intent:com.cnblogs.cn.client.android;end'; }
else if(ua.match(/iPad/i) != null){
  document.location = 'chblogs://'; 

}

大部分工做完成了，坑坑也該現身了

如今要考慮的是若是app不在那麼咱們應該去下載頁面下載

系統不會那麼聰明幫你辦好這件事。

這裏的邏輯很簡單，當沒有成功打開app的時候

新頁面不會彈出則頁面邏輯可言進行，若是進入了新頁面，則頁面邏輯便終止了

因此咱們能夠另開一個延時的線程來判斷這個事情

if(...){
document.location = '';
setTimeout(function(){
   //此處若是執行則表示沒有app
},200);
}

好了，這樣就完成了，坑坑就是andorid若是判斷沒有此程序會打開未找到頁面

那咱們在請求的時候就應該對android作一個檢索intent://scan/#Intent;scheme=這樣的話就ok了

因此咱們之間能夠這樣完成了咱們能夠直接取itunes或者google市場下載了

看淘寶的代碼

 

下次有時間了會繼續研究一下hybrid和webapp的通訊。