通过页面调用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://[email protected]"]]

//打开电话
[[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&amp;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的通信。

时间: 2024-11-09 17:31:18

通过页面调用APP【H5与APP互通】的相关文章

H5唤起app

H5唤起app 1.判断是否在微信中打开 无论是在哪个平台的客户端Android/IOS,在微信的平台上访问都有一个问题,那就是无法启动客户端,这是微信为了安全性考虑的限制,android这边屏蔽schema协议,除非公司是微信的伙伴加入了白名单才能使用,IOS系统可以去访问app对应appstore的下载页,但是微信经常屏蔽appstore的这个网址,进而访问不到.比较方便的做法就是在微信浏览器中,无论是IOS还是android都去应用宝的下载(IOS 这边最后会到appstore中)页面打开

怎样微信扫描二维码跳转页面,H5页面在微信中下载APP的实现方式

使用微信推广的用户经常都会遇到推广链接被拦截导致无法下载app的情况,此时用户在微信中打开会提示“ 已停止访问该网页 ”.这对于使用微信营销的商家来说就很不友好且损失非常大,因为用户是不知道为什么打不开的,商家不知道链接已被微信拦截,造成的结果就是用户大量流失,商家利益大量受损. 那么针对这个问题到底要怎么解决呢,其实只需要一个能实现微信内直接打开链接或跳转手机默认浏览器打开链接的功能,该功能实现后,如果你的链接含app文件则直接下载,如果不含则正常打开指定h5页面. 方案及实现效果 首先我们需

小程序和H5、app、公众号、有什么区别?

小程序和H5.app.公众号.有什么区别?下面木鱼小铺就和大家分享一下四者之间的区别.一.小程序和app的不同之处 1.开发 app需要适配市场上很多款的主流手机,开发成本大. 小程序一次开发就可以自动适配所有手机. 2.开发周期 一款完善的双平台app平均的开发周期约3个月: 小程序平均开发周期约2周内,仅为app的六分之一. 3.发布 app需要向十几个应用商店提交审核,且每个应用商店要求的资料都不一样,非常繁琐:小程序只需要提交到公众平台审核. 4.下载 app从应用商店里下载. 小程序通

【转帖】H5 手机 App 开发入门:概念篇

H5 手机 App 开发入门:概念篇 http://www.ruanyifeng.com/blog/2019/12/hybrid-app-concepts.html 作者: 阮一峰 日期: 2019年12月10日 感谢 腾讯课堂NEXT学院 赞助本站,腾讯官方的前端课程 免费试学. 手机现在是互联网的最大入口.根据<中国互联网报告>,手机网民已经超过8亿,人均每天上网三个多小时. 毫不奇怪,手机应用软件(mobile application,简称 mobile App)的开发工程师供不应求,一

“H5跨平台APP开发”APICloud从入门到精通

"H5跨平台APP开发"APICloud从入门到精通 课程学习地址:http://www.xuetuwuyou.com/course/164 课程出自学途无忧网:http://www.xuetuwuyou.com 课程介绍:               一.课程使用到的软件 APICloud Studuio(或Sublime.WebStorm加上APICloud插件) Google Chrome浏览器 海马玩手机模拟器(或真机) 二.课程目的:     随着IOS.Android等原生

Mobile Safari调用本地App, 否则进入App Store下载

需求: 如何让用户通过手机浏览器(Mobile Safari),访问一个URL就能直接打开ios上的App应用,如果该应用没有安装,那么直接跳转到App Store的App下载页面. 准备工作 ios SDK的OpenURL函数和URL Scheme JavaScript的window.location和setTimeout函数 代码实现 下面以打开暖岛app为例子,JS实现部分如下 window.location = 'nuandao://web2app'; setTimeout(functi

phonegap(cordova)从手机app跳转到web页面在跳转回APP本地页面思路

项目中需要用到 WAP支付宝支付. 但是 使用PHONEGAP开发 跳转到支付宝支付,然后跳转回来 就回不到APP的本地页面, 就是使用WAP的第三方登录也是一样的.很难从WAP页面在跳转到 app本地的本地页面 可以看下我的实现思路. 我是使用phongeap +jqmobi 做的 下面是 点击去支付跳转到 打开IFRAME的页面 <!-----第三方登录-------> <div id="qi_disanfang" class="panel paddin

关于调用百度和高德APP

由于需要,要调用高德和百度地图的APP. 1.判断是否存在高德和百度地图,但是又没有用到它们的SDK包,方式就是检测手机上有没有安装APP.首先要知道APP的包名.然后通过以下代码判断: private boolean isInstallByread(String packageName) { return new File("/data/data/" + packageName).exists(); } 2.调用APP.通过Intent.但是可以指定和不指定具体包名.(百度:com.

html5页面js判断是否安装app,以及判断是否在app内部打开html5页面

一.html5页面js判断是否安装app 目前还不能通过浏览器直接判断是否安装app 通过谷歌参考别人的方式和测试 我们知道安装了某个app后通过scheme跳转协议(引荐:http://www.jianshu.com/p/eed01a661186)进入到app 没有安装时点击链接是无效的 所以通过点击链接后到执行进入app之间的时间差来判断是否安装app 1.下面只是处理了安卓系统时 if (navigator.userAgent.match(/android/i) ){ var nowTim