通过页面调用APP【H5与APP互通】
2014-08-29 15:47
281 查看
比如用hybrid获取地理位置和短信信息,这当然需要框架封装好,比如利用框架的bridge.js(下一篇文章会详细讲这个内容)
场景2
最简单的比如用H5调用App然后再判断是否有安装此应用,如果有则直接打开应用,则安装如果没有则去itunes或者google市场安装。
比如淘宝上的立即打开功能
首先场景2的功能,我们需要了解他的几个流程
1.判断程序系统环境
2.判断有应用开启应用
3.判断无应用则跳到相应的链接区执行
我们就从淘宝的手机此功能来分析一下吧
1.js判断环境
这个环境是很好判断的
通过useragent即可
varua=navigator.userAgent;
if(ua.match(/iPhone|iPod/i)!=null){
//iphone代码
}
elseif(ua.match(/Android/i)!=null){
//android代码
}
elseif(ua.match(/iPad/i)!=null){
//ipad代码
}
用浏览器模仿很容易看到识别手机这个的信息
这里我模仿googleNesux4的值是
navigator.userAgent;
"Mozilla/5.0(Linux;Android4.2.1;en-us;Nexus4Build/JOP40D)AppleWebKit/535.19(KHTML,likeGecko)Chrome/18.0.1025.166MobileSafari/535.19"
其他
这里再稍微介绍一下关于下载这种渠道的运营,
通过不同的渠道是要进行返利的,所以这一部分得作为统计,推广都是要砸钱啊~
那么淘宝的渠道就是利用TTID在淘宝平台上注册一下
TTID是用于统计无线客户端用户访问情况的统计代码,
看淘宝的这个
1.里面居然带console
2.里面居然只有android手机才会统计频道里的数据…
2.认识了环境之后可以愉快的调用了吧?
这个跟握手规则很接近,不是你想调就能掉,
首先应用得定义自己的规范(schema规则)定义自己的链接,根据定制的链接才能掉。当应用定义这个规则以后不仅可以应用和页面之间调用,而且应用可以和应用之间调用。
ios中需要在info.plist
在Info.plist中,增加一个字段,名称为CFBundleURLTypes(URLTypes)。
里面的内容为数组形式,其中定义好一个
CFBundleURLName后将
以CFBundleURLSchemes为可以的array才是我们可以调用的内容
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLName</key>
<string>packagename(com.cnblogs.www)</string>
<key>CFBundleURLSchemes</key>
<array>
<string>cloud</string>
</array>
</dict>
</array>
比如定义了上面这句后就可以用
iOSDevTips://的schame调用了
具体用法可见
ios预留了以下schema
//打开Mail
[[UIApplicationsharedApplication]openURL:[NSURLURLWithString:@"mailto://info@iphonedevelopertips.com"]]
//打开电话
[[UIApplicationsharedApplication]openURL:[NSURLURLWithString:@"tel://8004664411"]];
//打开SMS
[[UIApplicationsharedApplication]openURL:[NSURLURLWithString:@"sms:55555"]];
//打开AppStore
NSURL*appStoreUrl=[NSURLURLWithString:@"http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=291586600&mt=8"];
[[UIApplicationsharedApplication]openURL:appStoreUrl];
详情参见
Androidandroid通过intent来调用
首先得在android配置文件manifest里面为相关需要调用的页面配置intent
<activityandroid:name=".MyUriActivity">
<intent-filter>
<actionandroid:name="android.intent.action.VIEW"/>
<categoryandroid:name="android.intent.category.DEFAULT"/>
<categoryandroid:name="android.intent.category.BROWSABLE"/>
<dataandroid:scheme="myapp"android:host="path"/>
</intent-filter>
</activity>
androidintent配合比较复杂,而且也可以用于在内部的调用,甚至在页面切换的时候也是必不可少的,对于调用比iphone的相对更宽泛些。全局的调用是用broadCast广播的方式进行,而页面之间的传输是在页面下定义
此外如果android要用intent调用别的app或者其他什么的还需要加相关的permission
详见
呐在H5中我们就这样调用就好
intent://
我们来看看淘宝是怎么做到的
在里面有个
intent的链接
剩下的不言自明
ok所以剩下的功能变的非常简单
3.调用App
varua=navigator.userAgent;if(ua.match(/iPhone|iPod/i)!=null){
document.location='chblogs://';}
elseif(ua.match(/Android/i)!=null){
document.location=intent:com.cnblogs.cn.client.android;end';}
elseif(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的通信。
相关文章推荐
- 通过页面调用APP【H5与APP互通】
- iOS与H5交互 H5与App原生交互,一般会是前端页面中的JavaScript与App使用的原生开发语言的交互。技术方案应能达到以下要求: 在js与原生进行交互的时候能保证正常的正向调用逻辑返回
- 在APP中嵌套H5页面,点击页面上的按钮调用app的组件方法
- JavaScript调用App原生代码(iOS、Android)通用解决方案 实际场景 场景:现在有一个H5活动页面,上面有一个登陆按钮,要求点击登陆按钮以后,唤出App内部的登录界面,当登录成功
- Android通过Chrome Inspect调试WebView的H5 App出现空白页面的解决方法(不需要FQ)
- 微信通过页面(H5)直接打开本地app的解决方法
- app内h5页面调用app功能
- 微信中通过页面(H5)直接打开本地app的解决方案
- 通用页面调用APP 互通
- 微信中通过页面(H5)直接打开本地app的解决方案
- android应用程序跳转到系统的各个设置页面和通过Intent action 跳转到系统页面,调用系统功能以及action
- 通过JSP 页面调用servlet方法?
- 最近接触到的一些js调用window窗体的属性及通过JavaScript获取页面大小
- 前台页面通过JS调用Servlet访问到后台类
- 通过AJAX调用页面后台代码方法实现省级三级联动效果 (简单练习)前台
- jsp页面中调用某个新写的或者修改的方法,虽然函数没任何问题,但是编译不通过
- android 通过Intent action 跳转到系统页面,调用系统功能以及action动...
- 前台页面通过JS调用Servlet访问到后台类
- Firefox和IE,通过JavaScript调用iframe中页面的函数
- android 通过Intent action 跳转到系统页面,调用系统功能以及action动...