logo头像

博学广问,自律静思

网页添加链接调用APP与跳转下载网址

在京东、百度糯米等网站的手机端网页上,常常有有个悬浮提示“点击打开客户端”,如果用户在手机上安装了客户端,将会自动调用客户端打开与当前网页内容一致的客户端页面;如果用户没有安装这些APP,浏览器将会跳转到下载网址,让用户下载客户端。在王柏元的博客客户端中也实现了这一功能。 之前在《安卓实现打开指定链接调用其他应用程序》介绍了如果让客户端点击特定链接(APPLINK)时自动调用客户端软件,在此再次重复一遍: 在打开指定链接需要跳转到的Activity的AndroidManifest.xml清单文件中中加入一条intent-filter标签,并如下面的例子设置scheme、HOST等属性。



















怎样链接到客户端指定页面

通过

category android:name=”android.intent.category.BROWSABLE” />

这一Intent调用Activity不仅能在applink被点击时启动该APP,还支持类似HTTP的GET传值,这就是跳转到网页对应的客户端页面的前提。 比如:王柏元的博客客户端注册了android:scheme=”wbyblog” android:host=”wangbaiyuan.cn” android:pathPrefix=”/post” 的Intent的postActivity,在浏览器打开链接:”wbyblog://wangbaiyuan.cn/post?postid=1234&title=网页添加链接调用APP与跳转下载网址 “时,将把postid:1234和title:网页添加链接调用APP与跳转下载网址 传入postActivity;在postActivity中通过下列代码实现获取传入的值。

Intent intent=getIntent();
String action = intent.getAction();
if(Intent.ACTION_VIEW.equals(action)){
Uri uri = intent.getData();
if(uri != null){
String title = uri.getQueryParameter(“title”);
postid= uri.getQueryParameter(“postid”);

}

这样你就可以根据传值显示特定的app页面了

网页端实现已安装客户端则调用、无则下载

在服务端我们需要动态生成当前网页对应的APPLINK,并通过一个悬浮固定的div显示applink,以便醒目吸引用户点击。比如极客人实现的在手机网页、文章页面,生成有该链接的div(电脑不予显示): 博客app自动链接调用下载 博客app自动链接调用下载

<?php
function addOpenAPPlink(){
if (wp_is_mobile()&&is_single()){
global $post;
$postid=$post->ID;
$posttitle=$post->post_title;
echo ‘

王柏元的博客客户端已发布
点击打开
‘;

echo 
  '<script type="text/javascript">
  function isInstalled(){
   var the_href="http://mobile.baidu.com/#/item?docid=8613180";//获得下载链接
   window.location="wbyblog://wangbaiyuan.cn/post?postid='.$postid.'&title='.$posttitle.'";//打开某手机上的某个app应用

   setTimeout(function(){
       window.location=the_href;//如果超时就跳转到app下载页
   },1000);
   }
   $("#openapp").click(function(){
       isInstalled();
   }
   );
   </script>

   '; 

}

}

add_action ( ‘wp_footer’, ‘addOpenAPPlink’ );
?>

其中关键部分为下面的js代码:

js实现了让浏览器打开applink从而自动调用你的app(当然前提是你安装了),并在1000m后跳转到app下载页面,其它并不能判断你的手机上是否安装了你的APP,但是展现的效果是一样的!

@极客人
极客人 commented at 2018-01-04

你好,I am using Wordpress CMS with a theme named "Tinection".

@宅配
宅配 commented at 2017-12-29

Hi there 比臉大牛排 sharing which blog platform you're using? I'm looking to start my own blog soon but I'm having a tough time making a decision between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your design and style seems different then most blogs and I'm looking for something completely unique. P.S Sorry for getting off-topic but I had to ask!

@好文推荐
好文推荐 commented at 2016-01-15

关注一下