html5启动原生APP总结


Posted in HTML / CSS onJuly 03, 2020

许久没有写博客了,最近有个H5启动APP原生页面的需求,中间遇上一些坑,看了些网上的实现方案,特意来总结下

一、需要判断客户端的平台以及是否在微信浏览器中访问

1、客户端判断

在启动APP时,Android和IOS系统处理的方式是不一样的,Android这边由于开放,可以在浏览器中通过<a>标签以及meta标签的方式,让浏览器app获取手机打开应用的权限进而启动APP。

而在IOS这边,IOS9以后的系统,则可以在APP开发过程中加入配置和逻辑代码编写,系统在浏览器即将访问到某个域名前就把这个域名对应的APP打开,这个有点闪,封闭还是有封闭的好处。

所以首先要在客户端判断,是Android系统还是IOS系统,判断代码如下

function isInIos(){
    var userAgentInfo = navigator.userAgent ,
        Agents = ["iPhone" , "iPad", "iPod"];
    for(var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          return true;
        }
    }
    return false;
}

2、是否在微信内置浏览器中

无论是在哪个平台的客户端Android/IOS,在微信的平台上访问都有一个问题,那就是无法启动客户端,这是微信为了安全性考虑的限制,android这边屏蔽schema协议,除非公司是微信的伙伴加入了白名单才能

使用,IOS系统可以去访问app对应appstore的下载页,但是微信经常屏蔽appstore的这个网址,进而访问不到。比较方便的做法就是在微信浏览器中,无论是IOS还是android都去应用宝的下载(IOS 这边最后会到

appstore中)页面打开。我这边的需求是提示用户点击“...”用默认浏览器打开。

判断是否是在微信中,代码如下:

function isInWx(){
    var agent = window.navigator.userAgent.toLowerCase();
    return agent.match(/MicroMessenger/i) == 'micromessenger';
}

二、原理

首先无论是andorid还是IOS端,在浏览器中通过JS都是无法判断该手机是否装有某APP的,即使这个浏览器有权限读取手机应用列表,也没有一个固定的对外API让咱们进行查询。而H5启动APP本质上是通过

URL scheme打开APP,一个APP可以设置一个或多个打开自己的URL scheme,浏览器去访问某一个APP的URL scheme,然后若系统安装有这个APP,则会请求权限去打开这个APP。其实也算是浏览器app

打开另一个app,iOS就可以使用 UIApplication 的 canOpenUrl 方法来检测URL scheme 是否能打开对应的APP,而android也是类似的方式。当然如果JS跳转URL scheme没有反应,也意味着这个手机没有

装这个app。

三、android平台

首先编辑AndroidManifest.xml,主要是增加第二个<intent-filter>

<activity android:name=".activity.LoadingActivity"
      android:label="${APP_NAME}"
      android:screenOrientation="portrait"
      android:theme="@style/FirstActivityTheme">
      <intent-filter>
          <action android:name="android.intent.action.MAIN" />


<category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
      <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:host="android"
                android:scheme="wushang" />
      </intent-filter>
</activity>

比如此处wushang就是scheme,这个最好是app的唯一标识符,要不然在H5唤醒时,会出现一个选择框,选择启动哪一个APP。而host表示启动该页面,其实这个更应该用com.android.sky这样的包名来替代更好。

这样的情况完整的URL就是wushang://android?data=sky,后面是参数传递。在Activity中可以用如下代码获取参数

public void onCreate(Bundle savedInstanceState) {             
     Uri uridata = this.getIntent().getData();             
     String mydata = uridata.getQueryParameter("data");            
}

之后在进行字符串截取还是什么鬼的都随意啦。

接下来来谈谈前端代码,这里有两种情况

1、页面在刷新进入时,请求权限唤起APP

这个比较简单,就只用在页面的顶部head中加入meta标签即可

<meta http-equiv="refresh" content="0;url=wushang://android?data=sky">

这个标注当页面刷新即去访问这个链接,进而启动APP。但是存在一个问题,如果是苹果系统的Safari浏览器的话,访问有这个meta的头,会给出错误提示,所以这个头部可以在后端进行页面渲染时通过客户端的

总类在加上去。

2、通过点击事件唤起APP

最简单的办法当然是直接使用a标签,如下

<a href="wushang://android">open Android app</a>

但是在实际使用时,是需要对客户端的平台类型还有是否在微信内置浏览器中进行判断的,所以这样的做法肯定是不行的。

接下来谈谈在开发过程中,遇到的一个问题,记录下。因为这边移动端使用的工具库库是zepto,采用的点击事件是tap,但是在用tap进行处理是经常要点很多下,才能唤起APP

<script type="text/javascript">
  $('#go').tap(function(){
      window.location.href = "wushang://android";
  });
</script>

具体原因不知,可能是tap事件采用的是轻点触碰。然后摸索了下,才用click事件,或者直接在a标签上标注处理函数就没有这问题

<a id="go" >
    open Android app
</a>
<a href="javascript:startApp()">
   open
</a>
<script src="../res/lib/zepto.min.js"></script>
<script src="../res/lib/public.js"></script>
<script>
    $('#go').click(function () {
       if(publicFun.isIos()){
          alert('it is IOS')
       }else{
          window.location.href = "wushang://android";
       }
    });

    function startApp(){
       if(publicFun.isIos()){
          alert('it is IOS')
       }else{
          window.location.href = "wushang://android";
       }
    }
</script>

所以决定以后遇到这类问题,就用这两种方式了。下面是实际的处理函数

window.startApp = function(){     //启动APP
     if(publicFun.isInWx()){     //微信中
        alert("请在浏览器中打开");
     }else{      //非微信中
        if(publicFun.isIos()){
//IOS系统,直接去itunes中,既可以下载也可以打开
            window.location.href = "https://itunes.apple.com/cn/app/[name]/id[id]";
        }else{      //android系统,通过定时器的方式,判断是否安装有APP
            var hasApp = true , t = 1000;
            setTimeout(function () {  //没有安装APP则跳转至应用宝下载,延时时间设置为2秒
              if(!hasApp) window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=[name]";
            } , 2000);
            var t1 = Date.now();
            window.location.href = "wushang://android";
            setTimeout(function () {    //t的时间就是出发APP启动的时间,若APP启动了,再次返回页面时t2这行代码执行,hasApp即为true。反之若APP没有启动即为false
              var t2 = Date.now();
              hasApp = !(!t1 || t2 - t1 < t + 150);
            } , t);
        }
     }
  }

其实有个非常简单的办法,就是直接跳转应用宝。无论是在android还是IOS,以及微信非微信。应用宝的下载页面都有下载和打开两个功能(如果是在IOS平台,它是通过连接app store的方式)

 四、IOS平台

针对ios9及以上的打不开问题,实际上ios9提供了更好的解决方案————通用链接。

这是iOS9推出的一项功能,如果你的应用支持Universal Links(通用链接),那么就能够方便的通过传统的HTTP链接来启动APP(如果iOS设备上已经安装了你的app,不需要额外做任何判断等),或者打开网页(iOS设备上没有安装你的app)。或许可以更简单点来说明,在iOS9之前,对于从各种从浏览器,Safari、UIWebView或者 WKWebView中唤醒APP的需求,我们通常只能使用scheme。

以上来自网上关于通用链接的介绍,对于前端简单点讲就是你访问一个http的url,如果这个url带有你提交给开发平台的配置文件中匹配规则的内容,ios系统会去尝试打开你的app,如果打不开,系统就会在浏览器中转向你要访问的链接。很好的一个属性,因为通过这个属性在ios9上我们能够绕过微信的拦截从而打开app。

所以上面的点击事件,仅仅是去访问app store,因为若app已安装,在浏览器访问时,就已经去到APP中了。

这些都是IOS配置上的东西,就不多写了。至于传参,以及页面定向,其实也就是相当于在UIWebView中获取当前连接的URL,然后进行字符串拆分以及校验,即可判断去哪个页,以及获取参数值。

到此这篇关于html5启动原生APP总结的文章就介绍到这了,更多相关html5启动原生APP内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3自定义滚动条样式的示例代码
Aug 21 HTML / CSS
CSS3使用transition属性实现过渡效果
Apr 18 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 HTML / CSS
css3 实现滚动条美化效果的实例代码
Jan 06 HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 #HTML / CSS
HTML5公共页面提取作为公用代码的方法
Jun 30 #HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 #HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 #HTML / CSS
HTML5播放实现rtmp流直播
Jun 16 #HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 #HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 #HTML / CSS
You might like
php+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
php阳历转农历优化版
2016/08/08 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
JQuery toggle使用分析
2009/11/16 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
python PyTorch预训练示例
2018/02/11 Python
Python切片索引用法示例
2018/05/15 Python
python统计中文字符数量的两种方法
2019/01/31 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
Python实现爬取并分析电商评论
2020/06/19 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
司法建议书范文
2014/05/13 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL