经过页面调用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的通讯。