如何通过H5(浏览器WebView其他)唤起本地APP(二)

合集下载

移动端H5唤起APP的写法实例（IOS、android）

移动端H5唤起APP的写法实例（IOS、android）IOS1.url scheme这个⽅案基本上就是针对微信、qq内置浏览器，qq浏览器等之外的其余浏览器，从native那边要⼀个scheme ，然后放在a标签⾥或者location.href跳⼀下就⾏了⽤⼀个iframe去做的⼀个跳页，有的话唤起scheme没有的话，会触发定时器跳到下载地址。

但是这个⽅式在ios⾥⾯，在没有app的时候会遇到两次提⽰，var openApp = function (src) {// 通过iframe的⽅式试图打开APP，如果能正常打开，会直接切换到APP，并⾃动阻⽌a标签的默认⾏为// 否则打开a标签的href链接const ifr = document.createElement('iframe');ifr.src = src;ifr.style.display = 'none';document.body.appendChild(ifr);var poenTime = +new Date()window.setTimeout(() => {document.body.removeChild(ifr);if ((+new Date()-openTime>2500)){window.location = 'APP Store下载的地址 '}}, 600);};2.Universal Link（ios）这是iOS9推出的⼀项功能，如果你的应⽤⽀持Universal Links(通⽤链接)，那么就能够⽅便的通过传统的HTTP链接来启动APP(如果iOS设备上已经安装了你的app，不需要额外做任何判断等)，或者打开⽹页(iOS设备上没有安装你的app)。

或许可以更简单点来说明，在iOS9之前，对于从各种从浏览器，Safari、UIWebView或者 WKWebView中唤醒APP的需求，我们通常只能使⽤scheme。

微信浏览器中H5使用wx-open-launch-app打开第三方APP

微信浏览器中H5使⽤wx-open-launch-app打开第三⽅APP1、在微信开放平台配置关联相关APP、微信⼩程序、微信公众号；2、在微信公众号中设置安全域名；3、在开放者平台中的APP配置关联JS⽹页安全域名；4、把相关Html页⾯代码放到对应域名下；<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><title>Demo</title></head><body><div id="app"><wx-open-launch-weapp path="pages/index/index" id="launch-wxapp" username="gh_12"><template><style>.btn {padding: 12px}</style><button class="btn-download">点击打开⼩程序</button></template></wx-open-launch-weapp><wx-open-launch-app id="launch-btn" appid="wx12" extinfo='{"PageType":1001}'><script type="text/wxtag-template"><style>.btn {padding: 12px}</style><button class="btn">点击打开APP</button></script></wx-open-launch-app></div></body><script type="text/javascript" src="js/jquery-1.11.1.min.js"></script><script type="text/javascript" src="https:///open/js/jweixin-1.6.0.js "></script><script>getAppList()function getAppList() {var link = location.href;let _params = {url: link};$.ajax({url: "https:///WeiXinService.svc/GetWxInfo",type: "POST",contentType: "application/json",data: JSON.stringify(_params),success: function (data) {const result = data;wx.config({debug: false, // 开启调试模式,调⽤的所有api的返回值会在客户端alert出来，若要查看传⼊的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

h5 调用方式

h5 调用方式摘要：1.H5 调用方式概述2.H5 调用方式的具体方法3.H5 调用方式的优点与应用场景正文：一、H5 调用方式概述H5 调用方式是指在网页中使用HTML5 技术进行编程，以便实现各种功能的方法。

HTML5 是一种标记语言，它可以用于创建网页的结构和内容。

通过使用HTML5，开发人员可以创建具有丰富多媒体和交互功能的网站。

二、H5 调用方式的具体方法1.创建HTML 文件要使用H5 调用方式，首先需要创建一个HTML 文件。

在这个文件中，可以使用HTML5 标记语言来定义网页的结构和内容。

例如，可以使用`<!DOCTYPE html>`声明来定义网页的文档类型，并使用`<html>`元素来包裹网页的内容。

2.使用HTML5 元素和属性HTML5 提供了许多新的元素和属性，可以帮助开发人员创建具有丰富功能的网页。

例如，可以使用`<video>`元素来嵌入视频，或者使用`<canvas>`元素来创建图形和动画。

3.使用JavaScript 编程除了HTML5 元素和属性，开发人员还可以使用JavaScript 编程语言来实现网页的交互功能。

例如，可以使用JavaScript 来响应用户的鼠标点击事件，或者来动态修改网页的内容。

三、H5 调用方式的优点与应用场景1.优点H5 调用方式具有许多优点，包括：- 可以在多种设备上使用：由于HTML5 是一种标记语言，它可以在各种设备上使用，包括电脑、平板电脑和智能手机。

- 可以实现丰富的多媒体和交互功能：HTML5 提供了许多新的元素和属性，可以帮助开发人员创建具有丰富功能的网页。

- 可以提高网页的性能：HTML5 可以帮助开发人员创建更加高效和优化的网页，从而提高网页的性能。

2.应用场景H5 调用方式可以用于多种应用场景，包括：- 网站开发：使用HTML5 可以帮助开发人员创建具有丰富多媒体和交互功能的网站。

最全面的h5唤起app技术deeplink方案

最全⾯的h5唤起app技术deeplink⽅案前⾔唤醒⽅式：1、URL Schemes2、android appLink3、chrome intent1、DeepLink实践URL Schemes⽅式a、需要在AndroidManifest.xml⽂件进⾏配置<activityandroid:name=".ui.activity.SplashActivity"android:exported="true"android:screenOrientation="portrait"android:theme="@style/NormalSplash"><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="UNCHER" /></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" /><dataandroid:host=""android:scheme="pxwxstudent" /></intent-filter></activity>注意：App可以配置多个⽀持唤起的ActivityActivity可以⽀持被多个URL唤起若⼀个App配置了多个⽀持唤起的Activity，它们的scheme和host⼀般⼀致，然后通过path、pathPrefix等进⾏定向区分b、被唤起后解析URL数据Uri数据的解析可以在Activity中通过getIntent().getData()实现@Overridepublic void onCreate(Bundle savesInstanceState){super.onCreate(savedInstanceState);setContentView(yout.activity_splash);// 尝试获取WebApp页⾯上过来的URLUri uri = getIntent().getData();if (uri != null) {// scheme部分String scheme=data.getScheme();// host部分String host=data.getHost();// 访问路径String path=data.getPath();//参数Set<String> paramKeySet=data.getQueryParameterNames();}}c、在h5页⾯上，通过如下⽅式使⽤：<iframe src="pxwxstudent://"></iframe>window.location.href= "pxwxstudent://";d、在原⽣App中唤起通过Intent⽅式Intent intent = new Intent();intent.setData(Uri.parse("pxwxstudent:///"));intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);startActivity(intent);2、DeepLink实践Android AppLink⽅式a、Android AppLink介绍Android M以上版本可以通过AppLinks，让⽤户在点击⼀个链接时跳转到App的指定页⾯;前提是这个App已经安装并经过验证。

android与H5网页交互_互相调用_混合开发

APP与H5交互规则Android手机中内置了一款高性能webkit内核，该内核完美封装到了WebView组件中，从js中直接调用java方法和在java中直接调用js方法，是可行的方案。

下面这个介绍了怎样在js和java中双向调用方法。

1、Android中调用JS。

假定H5页面中有一段通过JS函数changeTitle()改变网页标题的操作。

<div id="title">这是标题</div>functionchangeTitle(title) {document.getElementById('title').innerHTML= title;}安卓中的调用方式如下：步骤一：启动支持JS。

WebSettings settings = getSettings();settings.setJavaScriptEnabled(true);步骤二：加载网页。

webView.loadUrl(url);步骤三：调用网页中的JS，注意函数名要与JS中一致。

webView.loadUrl("javascript:changeTitle('Android原生改变了他')");通过以上三个步骤，原生APP可以操作H5中的交互。

2、JS调用Android。

假定点击H5网页上的一个按钮，跳转到Android的一个原生Activity。

步骤一：启动支持JS。

WebSettings settings = getSettings();settings.setJavaScriptEnabled(true);步骤二：给webView添加JS接口类，封装原生的操作。

第二个参数是JS中的实体类。

webView.addJavascriptInterface(new JsInterface(), "js2android");Ｈ５页面中见到js2android就会到JsInterface()类中找相应的方法。

h5页面唤起app如果没安装就跳转下载（iOS和Android）

h5页⾯唤起app如果没安装就跳转下载（iOS和Android）h5页⾯唤起app如果没安装就跳转下载(iOS和Android)浏览器和app没有通信协议，所以h5不知道⽤户的⼿机释放安装了app。

因此只能是h5去尝试唤起app，若不能唤起，引导⽤户去下载我们的app。

微信⾥屏蔽了 schema 协议,如果在微信中打开h5，则会提⽰⽤户在浏览器中打开。

<!doctype html><html><head><title></title><meta charset="utf-8"><meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no;" name="viewport" /><script>// 检查是否安装appfunction openApp(e){var u = erAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);if(isAndroid){android();}if(isiOS){ios();}}function android(){var _clickTime = new Date().getTime();window.location.href = ''; /***打开app的协议，有安卓同事提供***///启动间隔20ms运⾏的定时器，并检测累计消耗时间是否超过3000ms，超过则结束var _count = 0, intHandle;intHandle = setInterval(function(){_count++;var elsTime = new Date().getTime() - _clickTime;if (_count>=100 || elsTime > 3000 ) {console.log(_count)console.log(elsTime)clearInterval(intHandle);//检查app是否打开if ( document.hidden || document.webkitHidden) {// 打开了window.close();} else {// 没打开alert('没打开')// window.location.href = "";//下载链接}}}, 20);}function ios(){var _clickTime = +(new Date());var ifr = document.createElement("iframe");ifr.src = ""; /***打开app的协议，有ios同事提供***/ifr.style.display = "none";document.body.appendChild(ifr);//启动间隔20ms运⾏的定时器，并检测累计消耗时间是否超过3000ms，超过则结束var _count = 0, intHandle;intHandle = setInterval(function(){_count++;var elsTime = +(new Date()) - _clickTime;console.log(_count,elsTime,+(new Date()),_clickTime)if (_count>=100 || elsTime > 3000 ) {clearInterval(intHandle);document.body.removeChild(ifr);//检查app是否打开if ( document.hidden || document.webkitHidden) {// 打开了window.close();} else {// 没打开alert('没打开')// window.location.href = "";//下载链接}}},20);}var objbtn=document.getElementById('btn');objbtn.onclick=function(){openApp()}</script></head><body style="background-color: #fff;" ><div id="btn" style="font-size: 40px;background: blue;color: #fff;height: 56px;text-align: center;">btn</div></body></html> 重要的是安装了app打开app，但是不能让⽤户在点击确定的时候，跳转到下载页。

京东在html5页面中打开本地app的解决方案

京东在html5页⾯中打开本地app的解决⽅案从html5打开本地的app–如果本地没有app就跳转到下载页⾯，⼤家都会认为这是⼀项很简单的操作。

⽹上的教程也很多，但是可⾏性都不⾼。

因为⼿机系统和浏览器型号各不相同，所以兼容性会是让各个前端⼯程师头疼的问题。

我们不妨看⼀下京东是如何解决的。

京东的原代码已经混淆过了，我只能⼀点点反混淆并注释。

⽹上的⽂章千篇⼀律都是采⽤window.location.href的⽅式打开的，但是这种⽅法的兼容性⾮常的渣。

在ios的safari浏览器中⽆法使⽤，会出现还未打开app就⾃动跳转到下载页⾯的情况，影响⽤户的使⽤。

那么我们来看⼀下京东是如何解决兼容性的问题。

下⾯附上我的代码翻译和注释。

1 (function(){2// 判断浏览器3var Navigator = erAgent;4var ifChrome = Navigator.match(/Chrome/i) != null && Navigator.match(/Version\/\d+\.\d+(\.\d+)?\sChrome\//i) == null ? true : false;5var ifAndroid = (Navigator.match(/(Android);?[\s\/]+([\d.]+)?/)) ? true : false;6var ifiPad = (Navigator.match(/(iPad).*OS\s([\d_]+)/)) ? true : false;7var ifiPhone = (!ifiPad && Navigator.match(/(iPhone\sOS)\s([\d_]+)/)) ? true : false;8var ifSafari = (ifiPhone || ifiPad) && Navigator.match(/Safari/);9var version = 0;10 ifSafari && (version = Navigator.match(/Version\/([\d\.]+)/));1112 version = parseFloat(version[1], 10);13// 是否从微信打开14var ifWeixin = erAgent.indexOf("MicroMessenger") >= 0; // weixin15var j = false;16var iframe = "plugIn_downloadAppPlugIn_loadIframe";17var t = false;18var i = 0;19var B = {};20var b = {};21var selector = null;22var Hquery = {};23// 判断当前使⽤的js框架是zepto还是jquery24var Query = window.Zepto || window.jQuery ? true : false;25var g = [];26// 是否存在html5的localStorage 存储27var v = window.localStorage ? true : false;28var o = "mdownloadAppPlugInskip";29var p = null;3031 function m() { // 打印时间例如:2016-5-1832var M = new Date();33var N = M.getFullYear();34var O = M.getMonth() + 1;35var L = M.getDate();36 strDate = N + "-" + O + "-" + L;37return strDate38 }39// 微信相关操作40 function r() { // weixin api41 WeixinJSBridge.invoke("getInstallState", {42 packageName: "com.jingdong.app.mall",43 packageUrl: "openApp.jdMobile://"44 }, function(M) {45var N = M.err_msg,46 L = 0;47if (N.indexOf("get_install_state:yes") > -1) {48 j = true49 }50 })51 }52// 根据是否存在js框架进⾏dom和时间的绑定53 function bind(dom, event, fun) { // bind event54if (Query) {55 selector("#" + dom).bind(event, fun)56 } else {57 selector("#" + dom).addEventListener(event, fun, !1)58 }59 }6061 function z(L) {62var M = (L || "mGen") + (++i);63return M64 }65// 微信操作66if (ifWeixin) { // if navigitor is weixin67if (window.WeixinJSBridge && WeixinJSBridge.invoke) {68 r()69 } else {70 document.addEventListener("WeixinJSBridgeReady", r, !1)71 }72 }7374// 如果存在js框架75if (Query) {76 selector = window.$;77 Hquery = window.$78 } else {79 selector = function(obj) {80if (typeof obj == "object") {81return obj82 }83return document.querySelector(obj);84 };85if (!window.$) {86 window.$ = Hquery = selector87 } else {88 Hquery = window.$89 }90 }91 window.onblur = function() {92for (var L = 0; L < g.length; L++) {93 clearTimeout(g[L])94 }95 };96// 设置cookie。

H5手机移动端调起浏览器（qq浏览器，uc浏览器）自带分享功能实例

H5⼿机移动端调起浏览器（qq浏览器，uc浏览器）⾃带分享功能实例H5⼿机移动端调起浏览器（qq浏览器，uc浏览器）⾃带分享功能实例html：<span class="viewshare wx" data-mshare="2"></span><span class="viewshare wxline" data-mshare="1"></span><span class="viewshare QQ" data-mshare="3"></span><span class="viewshare wb" data-mshare="4"></span>js：// 引⼊JS⽂件<script src="js/mshare.js"></script>var u = navigator.appVersion;var uc = u.split('UCBrowser/').length > 1 ? 1 : 0;var qq = u.split('MQQBrowser/').length > 1 ? 2 : 0;var wx = ((u.match(/MicroMessenger/i)) && (u.match(/MicroMessenger/i).toString().toLowerCase() == 'micromessenger'));// 绑定单击事件$('.wx,.wxline,.QQ,.wb').on("click", function () {if(uc||(qq && !wx)){mshare.init(+$(this).data('mshare'));}}mshare.js/*** mshare.js* 此插件主要作⽤是在UC和QQ两个主流浏览器* 上⾯触发微信分享到朋友圈或发送给朋友的功能* 代码编写过程中参考:* /wap/module/share/201501261608/js/addShare.js* 此外，JefferyWang的项⽬对我也有⼀定启⽰：* https:///JefferyWang/nativeShare.js**/!(function(global) {'use strict';var UA, uc, qq, wx, tc, qqVs, ucVs, os,qqBridgeDone;UA = navigator.appVersion;// 是否是 UC 浏览器uc = UA.split('UCBrowser/').length > 1 ? 1 : 0;// 判断 qq 浏览器// 然⽽qq浏览器分⾼低版本 2代表⾼版本 1代表低版本qq = UA.split('MQQBrowser/').length > 1 ? 2 : 0;// 是否是微信wx = ((UA.match(/MicroMessenger/i)) && (UA.match(/MicroMessenger/i).toString().toLowerCase() == 'micromessenger'));// 浏览器版本qqVs = qq ? parseFloat(UA.split('MQQBrowser/')[1]) : 0;ucVs = uc ? parseFloat(UA.split('UCBrowser/')[1]) : 0;//获取操作系统信息 iPhone(1) Android(2)os = (function () {var ua = erAgent;if (/iphone|ipod/i.test(ua)) {return1;} else if(/android/i.test(ua)){return2;} else {return0;}}());// qq浏览器下⾯是否加载好了相应的api⽂件qqBridgeDone = false;// 进⼀步细化版本和平台判断// 参考: https:///JefferyWang/nativeShare.js///wap/module/share/201501261608/js/addShare.jsif ((qq && qqVs < 5.4 && os == 1) || (qq && qqVs < 5.3 && os == 1)) {qq = 0;} else {if (qq && qqVs < 5.4 && os == 2) {qq = 1;} else {if (uc && ( (ucVs < 10.2 && os == 1) || (ucVs < 9.7 && os == 2) )) {uc = 0;}}}/*** qq浏览器下⾯根据不同版本加载对应的bridge* @method loadqqApi* @param {Function} cb 回调函数*/function loadqqApi(cb) {if (!qq) { // qq == 0return cb && cb();}var qqApiScript = document.createElement('script');//需要等加载过qq的接⼝⽂档之后，再去初始化分享组件qqApiScript.onload = function () {cb && cb();};qqApiScript.onerror = function () {};// qq == 1 低版本// qq == 2 ⾼版本qqApiScript.src = (qq == 1 ) ? '/html5/js/qb.js' : '/get?api=app.share'; document.body.appendChild(qqApiScript);}/*** UC浏览器分享* @method ucShare*/function ucShare(config) {// ['title', 'content', 'url', 'platform', 'disablePlatform', 'source', 'htmlID']// 关于platform// ios: kWeixin || kWeixinFriend;// android: WechatFriends || WechatTimeline// uc 分享会直接使⽤截图var platform = '', shareInfo;// 指定了分享类型if (config.type) {if (os == 2) {if(config.type==1){platform = 'WechatTimeline';}else if(config.type==2){platform = 'WechatFriends';}else if(config.type==3){platform = 'QQ';}else if(config.type==4){platform = 'SinaWeibo';}else if(config.type==0){platform = 'undefined';}} else if (os == 1) {if(config.type==1){platform = 'kWeixinFriend';}else if(config.type==2){platform = 'kWeixin';}else if(config.type==3){platform = 'kQQ';}else if(config.type==4){platform = 'kSinaWeibo';}else if(config.type==0){platform = 'undefined';}}}shareInfo = [ config.title, config.desc, config.url, platform, '', '', '' ];// androidif (window.ucweb) {ucweb.startRequest && ucweb.startRequest('shell.page_share', shareInfo);}else if (window.ucbrowser) {ucbrowser.web_share && ucbrowser.web_share.apply(null, shareInfo);}};/*** qq浏览器分享函数* @method qqShare*/function qqShare(config) {var type = '';//微信好友1, 微信朋友圈8,QQ 4if(config.type==1){type = 8;}else if(config.type==2){type = 1;}else if(config.type==3){type = 4;}else if(config.type==4){type = 11;}else if(config.type==0){type = 'undefined';}var share = function () {var shareInfo = {'url': config.url,'title': config.title,'description': config.desc,'img_url': config.img,'img_title': config.title,'to_app': type,'cus_txt': ''};if (window.browser) {browser.app && browser.app.share(shareInfo);} else if (window.qb) {qb.share && qb.share(shareInfo);}};if (qqBridgeDone) {share();} else {loadqqApi(share);}};/*** 对外暴露的接⼝函数* @method mShare* @param {Object} config 配置对象参数见⽰例* var config = {* title : 'Lorem ipsum dolor sit.'* , url : ''* , desc : 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat inventore minima voluptates.' * , img : '/cn/s/c/2015/loading.gif'* , type : type // 1 ==> 朋友圈 2 ==> 朋友 0 ==> 直接弹出原⽣ 3==>QQ* }*/function mShare(config) {this.check = function (succssFn, wxFn, failFn) {if (uc) {succssFn();} else if (qq && !wx) {succssFn();} else if (wx) {wxFn();} else {failFn();}}this.config = config;this.init = function (type) {if (typeof type != 'undefined') this.config.type = type;try {if (uc) {ucShare(this.config);} else if (qq && !wx) {qqShare(this.config);} catch (e) {}}}// 预加载 qq bridgeloadqqApi(function () {qqBridgeDone = true; });// ⽅法暴露给全局变量global.mShare = mShare; })(this);。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

如何通过H5（浏览器WebView其他）唤起本地APP(二)
上篇文章小编给大家分享了通过H5(浏览器/WebView/其他)唤起本地APP的一种方式，本篇文章小编再给大家分享另一种方式，下面和小编一起来看一下吧。

第二种方式：
既然通过在href配置schema协议不行，那就只能通过js代码来实现了，只有这样才能根据判断实现app有的时候就打开，没有的时候就跳转到下载链接下载。

我们知道，js是无法判断手机是否安装了某款app的，所以我们只能够曲线救国了，我们可以获取时间如果，长时间不能呼起app则默认为没有安装这款app，然后跳转到下载页。

当然这不是我想出来的，是网上的各位大佬的想法。

在这里又要细分为两种情况了。

1、直接唤醒
说明：通过h5可换醒app，如访问一个URL，点击按钮，打开应用，如果该应用APP没有安装，那么直接跳转到App Store的APP下载页面，通过点击的方式兼容性较好，如果安装了app，在手机各大浏览器(360浏览器、uc浏览器、搜狗浏览器、QQ浏览器、百度浏览器)和QQ客户端中，能唤醒。

微信、新浪微博客户端、腾讯微博客户端无法唤醒。

代码如下：
<html xmlns=/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<head>
<script src="/jquery/1.9.0/jquery.js"></script> <title>点击唤醒demo</title>
</head>
<body>
<style>
#zjmobliestart{font-size:40px;}
</style>
<!--
说明：通过h5可换醒app，如访问一个URL，点击按钮，打开应用，如果该应用APP没有安装，那么直接跳转到App Store的APP下载页面，通过点击的方式。

兼容性较好，如果安装了app，在手机各大浏览器(360浏览器 uc浏览器搜狗浏览器 QQ浏览器百度浏览器 )和QQ客户端中，能唤醒。

微信新浪微博客户端腾讯微博客户端无法唤醒。

-->
<a href="zjmobile://platformapi/startapp" id="zjmobliestart"
target="_blank">唤醒浙江移动手机营业厅！</a>
<script type="text/javascript">
function applink(){
return function(){
var clickedAt = +new Date;
setTimeout(function(){
!window.document.webkitHidden && setTimeout(function(){ if (+new Date - clickedAt < 2000){
window.location =
'https:///us/app/zhe-jiang-yi-dong-shou-ji/id89824356 6#';
}
}, 500);
}, 500)
};
}
document.getElementById("zjmobliestart").onclick = applink();
</script>
</body>
</html>
2、点击唤醒
说明：通过h5可换醒app，如访问一个URL就能直接打开应用，如果该应用APP没有安装，那么直接跳转到App Store的APP下载页面。

兼容性一般：在手机各大浏览器(360浏览器、uc浏览器、搜狗浏览器QQ浏览器、百度浏览器)能唤醒。

微信、QQ客户端、新浪微博客户端、腾讯微博客户端无法唤醒。

代码如下：
<!Doctype html>
<html xmlns=/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<head>
<script src="/jquery/1.9.0/jquery.js"></script> <title>直接唤醒demo</title>
</head>
<body>
<style>
#zjmobliestart{font-size:40px;}
</style>
<!--
说明：通过h5可换醒app，如访问一个URL就能直接打开应用，如果该应用APP 没有安装，那么直接跳转到App Store的APP下载页面
兼容性一般：在手机各大浏览器(360浏览器 uc浏览器搜狗浏览器 QQ浏览器百度浏览器 )能唤醒。

微信 QQ客户端新浪微博客户端腾讯微博客户端无法唤醒。

-->
<p id="zjmobliestart">唤醒浙江移动手机营业厅！</p>
<script type="text/javascript">
function applink(){
window.location = 'zjmobile://platformapi/startapp';
var clickedAt = +new Date;
setTimeout(function(){
!window.document.webkitHidden && setTimeout(function(){ if (+new Date - clickedAt < 2000){
window.location =
'https:///us/app/zhe-jiang-yi-dong-shou-ji/id89824356 6#';
}
}, 500);
}, 500)
}
applink();
</script>
</body>
</html>
还有的就是以为我是要在app里面通过加载webview的形式来唤起本地的app，这里也记录一下，代码如下：
webView.setWebViewClient(new WebViewClient(){
@Override public boolean shouldOverrideUrlLoading(WebView view, String url) {
Uri uri=Uri.parse(url);
if(uri.getScheme().equals("abraham")&&uri.getHost().equals("jingewenk ")){
String
arg0=uri.getQueryParameter("arg0");
String arg1=uri.getQueryParameter("arg1"); }else{
view.loadUrl(url);
} return true;
}});
以上就是HTML5在线学习小编给大家分享的通过H5(浏览器/WebView/其他)唤起本地APP 的方法，希望对小伙伴们有所帮助。