WebApp JS 打开 app

Posted 2020-08-25 攻城狮

产品需求：分享出去的链接比如到微信朋友圈，微博的H5页面，添加一个按钮 open App 用来打开并启动自己公司的APP (如果当前手机已经安装自己公司的APP)

废话少说直接上代码：

<input type="button" value="从APP打开" onClick="openApp();s">

<script language="javascript">
function openApp(){
var schemeUrl = ‘app里即有的协议如：  apps custom url schemes ‘;
    if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
       var loadDateTime = new Date();
       window.setTimeout(function() {
           var timeOutDateTime = new Date();
	   if (timeOutDateTime - loadDateTime < 5000) {
　　           window.location = ‘没安装APP时要跳转的链接‘;
	    } else {
	       alert(‘无法打开‘);
	    }
         },25);
        window.location = schemeUrl;
    } else if (navigator.userAgent.match(/android/i)) {
       var state = null;
       try {
	  state = window.open(schemeUrl, ‘_blank‘);
       } catch(e) {}
	  if (state) {
               alert(‘无法打开‘);
	       window.close();
	  } else {
	       window.location = ‘没安装APP时要跳转的链接‘;
	  }
      }
 } 

</script>

　　

apps custom url schemes 是什么呢？
其实就是你与APP约定的一个协议URL，你的ios同事或Android同事在写程序的时候会设置一个URL Scheme，

例如设置： URL Scheme ：app
然后其他的程序就可以通过   URLString ＝ app:// 调用该应用。

还可以传参数，如：app://reaction/?uid=1
原理：500ms内，本机有应用程序能解析这个协议并打开程序，调用该应用；如果本机没有应用程序能解析该协议或者500ms内没有打开这个程序，则执行setTimeout里面的function，就是跳转到你想跳转的页面。