通過頁面調用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://[e-mail]"]]

//打開電話
[[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的通信。