百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> H5启动APP原生页面的实例办法-
分享文章到:

H5启动APP原生页面的实例办法-

发布时间:08/01 来源:未知 浏览: 关键词:
好久没有写博客了,比来有个H5启动APP原生页面的需求,中间赶上一些坑,看了些网上的实现方案,特地来总结下一、需要推断客户端的平台以及可否在微信阅读器中拜访1、客户端推断在启动APP时,Android和IOS系统处置的方式是不同的,Android这边因为开放,可以在阅读器中通过<a>标签以及meta标签的方式,让阅读器app猎取手机打开利用的权限进而启动APP。而在IOS这边 好久没有写博客了,比来有个H5启动APP原生页面的需求,中间赶上一些坑,看了些网上的实现方案,特地来总结下

一、需要推断客户端的平台以及可否在微信阅读器中拜访

1、客户端推断

在启动APP时,Android和IOS系统处置的方式是不同的,Android这边因为开放,可以在阅读器中通过标签以及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,主如果添加第二个

                                    

比方此处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标签即可

这个标注当页面刷新即去拜访这个链接,进而启动APP。但是存在一个题目,要是是iphone系统的Safari阅读器的话,拜访有这个meta的头,会给出差错提醒,所以这个头部可以在后端进行页面渲染时通过客户端的

总类在加上去。

2、通过点击事件唤起APP

最简略的方法固然是直接运用a标签,如下

open Android app

但是在现实运用时,是需要对客户端的平台类型还有可否在微信内置阅读器中进行推断的,所以这样的做法确定是不过关的。

接下来谈谈在开发历程中,碰到的一个题目,记载下。由于这边挪移端运用的工具库库是zepto,采纳的点击事件是tap,但是在用tap进行处置是时常要点许多下,才干唤起APP


    打赏
    



    

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有152人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板