如何通过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);。

h5页面跳转到小程序的实现方法

h5页面跳转到小程序的实现方法H5页面跳转到小程序的实现方法有多种，具体的实现方式取决于小程序所在的平台和开发环境。

以下是一种常见的实现方法，包括如何在H5页面中触发跳转，以及如何在小程序中接收和处理跳转参数。

1. 获取小程序的AppID和路径在H5页面中，首先需要获取要跳转的小程序的AppID和路径。

AppID 是小程序的唯一标识符，而路径则是小程序的特定页面地址。

可以通过小程序的开发者工具或相关文档查找到这些信息。

```javascriptwx.configdebug: false,appId: 'yourAppId', // 替换为目标小程序的AppIDnonceStr: '', // 生成签名的随机串signature: '', // 签名});wx.ready(functio//初始化成功后可以进行相关操作，如跳转到小程序});wx.error(function(res)//初始化失败的处理});```3.在H5页面中触发跳转```javascriptdocument.getElementById('btn').onclick = functiowx.miniProgram.navigateToappId: 'yourAppId',path: '/pages/index/index', // 替换为目标小程序的具体页面路径success: functio//跳转成功后的处理},fail: functio//跳转失败的处理}});};```4.在小程序中接收和处理跳转参数在小程序中，可以通过获取跳转参数的方式来获取H5页面传递的数据。

在小程序的App或页面的`onLoad`方法中，可以通过`options`参数来获取跳转时传递的参数。

```javascriptonLoad: function(options)//获取跳转参数var data = options.data;//处理跳转参数```以上是一种常见的实现方法，具体的实现方式可能因不同平台和开发环境而有所差异。

H5嵌入APP后，原生APP与H5之间交互

H5嵌⼊APP后，原⽣APP与H5之间交互原⽣APP跳转到H5页⾯时，往往需要携带⼀些⽤户信息，之前做法是在跳转的地址中拼接H5页⾯需要的参数，现在通过window.WebViewJavascriptBridge悄悄的进⾏数据交互。

本⽂主要从H5的⾓度记录交互思路：1：安卓环境和ios环境稍微有点不同，需要根据erAgent判断⼀下当前环境2：仍然是APP环境不同，安卓需要进⾏兼容性判断，如果不存在window.WebViewJavascriptBridge变量，需要⼿动添加Dom的WebViewJavascriptBridgeReady事件监听；ios同样需要判断是否存在window.WebViewJavascriptBridge变量，如果不存在继续判断window.WVJBCallbacks变量，如果仍然不存在，则⼿动赋值为H5回调，然后document.createElement('iframe')插⼊document中，随即移除。

3：以上处理完成后，通过WebViewJavascriptBridge变量来注册【事件】以便APP能监听到并执⾏相应操作4:3中需要对安卓系统进⾏init处理，如果是安卓系统，注册事件之前需要先调⽤WebViewJavascriptBridge.init()⽅法（注意：⼀个页⾯整个⽣命周期过程中，只能进⾏⼀次init（）否则会报错，我的做法是通过⼀个全局变量来判断是否初始化过）以下是具体代码：//针对安卓和ios系统，对window.WebViewJavascriptBridge进⾏兼容性处理function setupWebViewJavascriptBridge(callback) {var u = erAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端if (isAndroid) {if (window.WebViewJavascriptBridge) {callback(WebViewJavascriptBridge)} else {//添加dom事件document.addEventListener('WebViewJavascriptBridgeReady',function () {callback(WebViewJavascriptBridge)},false);}}if (isiOS) {console.log('isiOS')if (window.WebViewJavascriptBridge) {return callback(WebViewJavascriptBridge);}if (window.WVJBCallbacks) {return window.WVJBCallbacks.push(callback);}window.WVJBCallbacks = [callback];var WVJBIframe = document.createElement('iframe');WVJBIframe.style.display = 'none';WVJBIframe.src = 'https://__bridge_loaded__';document.documentElement.appendChild(WVJBIframe);setTimeout(function () {document.documentElement.removeChild(WVJBIframe)}, 0)}}//封装⽅法，key:跟原⽣定义好的要捕获的名称， callback：原⽣捕获后执⾏的回调，此处可以写H5的后续执⾏⽅法，params：对象，要传给原⽣的参数var setupWebViewBridge = function (key, callback, params) {setupWebViewJavascriptBridge(function (bridge) {var u = erAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端//⾃⼰定义的全局变量，⽤来判断当前页⾯中安卓系统是否进⾏过⼀次初始化，页⾯卸载时取消赋值if (!window.hadCalledWindow_WebViewJavascriptBridge ) {if (isAndroid) {window.hadCalledWindow_WebViewJavascriptBridge = truebridge.init(function (message, responseCallback) {console.log('JS got a message', message);var data = {'Javascript Responds': '测试中⽂!'};if (responseCallback) {console.log('JS responding with', data);responseCallback(data);}});}}bridge.callHandler(key,//安卓系统必须传⼀个参数，否则捕获不到，因此，默认传⼊⼀个_x_变量JSON.stringify({...params,_x_: 1,}),callback);})}原⽣APP⾥，注册要捕获的⽅法：bridge.registerHandler('jsbridge_showMessage', function (data, responseCallback) {showResponse(data);});移动端混合开发，需要原⽣与h5交互。

Html5跳转到APP指定页面的实现

Html5跳转到APP指定页⾯的实现1.设置urlschemesurlschemes尽量设⼀个唯⼀的字符串，例如可以设为：iOS+公司英⽂名+ 项⽬⼯程名⽐如我的设为iOSTencentTest，在浏览器中输⼊地址iOSTencentTest://即可跳转到我的app2.跳转到指定页⾯在使⽤iOSTencentTest://打开app会调⽤AppDelegate的代理⽅法-(BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options 跳转指定页⾯在该⽅法中操作iOSTencentTest://后⾯是可以添加参数的，例如iOSTencentTest://goodsDetails?id=xxxxxgoodsDetails可直接通过url.host获取id=xxxxx 参数可直接通过url.query获取可以根据⾃⾝需求去设置不同的host和参数。

h5那边只需要执⾏：window.location.href = 'iOSTencentTest://goodsDetails?id=xxxxx'附：//获取Window当前显⽰的ViewController- (UIViewController*)currentViewController{//获得当前活动窗⼝的根视图UIViewController* vc = [UIApplication sharedApplication].keyWindow.rootViewController;while (1){//根据不同的页⾯切换⽅式，逐步取得最上层的viewControllerif ([vc isKindOfClass:[UITabBarController class]]) {vc = ((UITabBarController*)vc).selectedViewController;}if ([vc isKindOfClass:[UINavigationController class]]) {vc = ((UINavigationController*)vc).visibleViewController;}if (vc.presentedViewController) {vc = vc.presentedViewController;}else{break;}}return vc;}//NSString类别⽅法//通过url.query获取参数字符再分成字典-(NSMutableDictionary *)getURLParameters{if (!self.length) {return nil;}NSMutableDictionary *params = [NSMutableDictionary dictionary];if ([self containsString:@"&"]) {NSArray *urlComponents = [self componentsSeparatedByString:@"&"];for(NSString *keyValuePair in urlComponents) {//⽣成key/valueNSArray *pairComponents = [keyValuePair componentsSeparatedByString:@"="];NSString *key = [pairComponents.firstObject stringByRemovingPercentEncoding];NSString*value = [stObject stringByRemovingPercentEncoding];//key不能为nilif(key==nil|| value ==nil) continue;id existValue = [params valueForKey:key];if(existValue !=nil) {//已存在的值，⽣成数组。

h5页面跳转到小程序的实现方法

H5页面跳转到小程序的实现方法1. 什么是H5页面跳转到小程序？在移动互联网时代，H5页面跳转到小程序指的是用户在手机浏览器中访问一个基于HTML5技术开发的网页，通过点击页面中的链接或按钮，可以直接跳转到手机上已安装的某个小程序中。

H5页面跳转到小程序的实现方法主要包括两个方面：一是在H5页面上设置跳转链接，二是在小程序中实现对应的页面和业务逻辑。

2. H5页面跳转到小程序的基本原理H5页面跳转到小程序的基本原理是通过URL Scheme实现的。

URL Scheme是一种用于在不同应用程序之间进行通信的机制，它可以通过在URL中使用特定的协议头和参数来唤起其他应用程序。

在H5页面中，可以通过设置特定的URL Scheme来实现跳转到小程序。

而在小程序中，可以通过监听URL Scheme的唤起事件来获取参数，并根据参数进行相应的页面跳转和业务处理。

3. H5页面设置跳转链接的方法在H5页面中设置跳转链接的方法主要有两种：一是使用a标签的href属性，二是使用JavaScript的window.location.href方法。

3.1 使用a标签的href属性在H5页面中，可以通过在a标签的href属性中设置特定的URL Scheme来实现跳转到小程序。

例如：<a href="weixin://dl/business/?appid=wx1234567890">跳转到小程序</a>上述代码中，weixin是微信小程序的URL Scheme，dl/business是小程序的页面路径，appid是小程序的唯一标识符。

3.2 使用JavaScript的window.location.href方法在H5页面中，也可以通过JavaScript的window.location.href方法来实现跳转到小程序。

例如：window.location.href = 'weixin://dl/business/?appid=wx1234567890';上述代码中，weixin是微信小程序的URL Scheme，dl/business是小程序的页面路径，appid是小程序的唯一标识符。

h5页面跳转到小程序的实现方法

h5页面跳转到小程序的实现方法近年来，随着移动互联网的快速发展，小程序成为了一种重要的移动应用形式。

小程序具有体积小、下载快、功能丰富等特点，受到了许多用户的喜爱。

而在H5页面中引导用户跳转到小程序也是很多企业的需求。

接下来，我们将介绍一种实现方法，以帮助您在H5页面中跳转到小程序。

首先，我们需要明确一个概念，即小程序的跳转是通过微信的接口实现的。

因此，在实现H5页面跳转到小程序之前，我们需要确保用户已经在微信中打开了当前页面。

这是因为只有在微信环境中才能正常跳转到小程序。

接下来，我们可以通过以下步骤来实现H5页面跳转到小程序：步骤一：在H5页面中引入微信JS-SDK。

微信提供了一个叫做“微信JS-SDK”的工具包，用于在H5页面中调用微信的接口。

我们可以在头部引入该工具包的相关代码，具体用法可以参考微信官方提供的文档。

步骤二：配置微信开放平台。

在跳转到小程序之前，我们需要确保小程序已经接入了微信开放平台，并且配置了相关的参数。

这些参数可以在微信开放平台的后台中获取。

步骤三：调用微信的接口进行跳转。

在H5页面中，我们可以通过代码调用微信提供的接口实现跳转到小程序。

具体的接口名称为wx.miniProgram.navigateTo。

在调用该接口之前，我们需要传入一些参数，包括小程序的AppID、路径等。

这些参数可以在微信开放平台的后台中获取。

具体的使用方法可以参考微信官方提供的文档。

值得注意的是，如果用户没有安装对应的小程序，也可以跳转到小程序的下载页，以便用户下载并安装小程序。

这个功能需要我们在调用接口时设置相应的配置参数。

最后，我们需要做一些测试来确保跳转功能的正常运行。

可以先在微信环境中打开H5页面，然后点击跳转按钮，观察是否能够成功跳转到小程序。

如果一切顺利，恭喜您成功实现了H5页面跳转到小程序的功能。

总结起来，实现H5页面跳转到小程序可以分为三个步骤，包括引入微信JS-SDK、配置微信开放平台、调用微信的接口进行跳转。

h5页面跳转小程序的几种实现方式

h5页面跳转小程序的几种实现方式
标题，H5页面跳转小程序的几种实现方式。

在移动互联网时代，小程序已经成为了人们生活中不可或缺的一部分。

而H5页面作为一种传统的网页形式，如何与小程序进行有效的结合，成为了许多开发者和企业关注的焦点。

本文将介绍H5页面跳转小程序的几种实现方式，希望对大家有所帮助。

1. 小程序跳转链接。

最简单的方式是在H5页面上直接添加小程序的跳转链接。

用户在点击链接时，可以直接跳转到对应的小程序页面。

这种方式适用于简单的跳转需求，但缺点是用户需要提前安装对应的小程序才能打开。

2. 使用小程序码。

在H5页面中可以嵌入小程序的二维码，用户扫描二维码即可跳转到小程序页面。

这种方式适用于线下推广和分享，用户体验较好，但需要用户主动扫描二维码。

3. 嵌入小程序组件。

小程序提供了一些可以在H5页面中嵌入的组件，比如小程序卡片、小程序插件等。

通过在H5页面中嵌入这些组件，可以让用户直接在H5页面上体验小程序的功能，从而提升用户的使用体验。

4. 使用小程序云开发。

小程序云开发提供了一种在H5页面中直接调用小程序云函数的方式。

通过这种方式，可以在H5页面中直接调用小程序的后端接口，实现一些复杂的功能，比如数据查询、用户认证等。

总的来说，H5页面跳转小程序有多种实现方式，开发者可以根据自己的需求和场景选择合适的方式。

希望本文对大家有所帮助，也希望小程序和H5页面能够更好地结合，为用户带来更好的体验。

使用html5开发手机软件的技巧

使用html5开发手机软件的技巧使用html5开发手机软件的技巧大全在日常生活中，大家一定都或多或少地了解过电脑操作的相关知识，下面是店铺为大家收集的使用html5开发手机软件的技巧，仅供参考，希望能够帮助到大家。

使用HTML5开发手机APP分享使用HTML5开发手机APP经验分享一、浅谈HTML5发展 (2)二、HTML5开发手机APP过去的劣势与当前的优势 (2)三、认识Hbuilder开发工具及MUI框架 (3)a)性能........................................................................................................................... . (3)b)工具........................................................................................................................... . (3)c)能力........................................................................................................................... . (3)d)最接近原生体验的高性能框架 (4)四、开发案例........................................................................................................................... .. (5)五、HTML5开发手机APP心得 (8)一、浅谈HTML5发展未来App的市场呈现一片光明景象，而对于移动开发商来说，不同平台的应用则需要开发不同的App来支持，无论在更新及维护上都需要一定的成本。

微信中通过页面（H5）直接打开本地app的解决方案

微信中通过页⾯（H5）直接打开本地app的解决⽅案简述微信中通过页⾯直接打开app分为安卓版和IOS版，两个的实现⽅式是完全不同的。

安卓版实现：使⽤腾讯的应⽤宝，只要配置了“微下载”之后，打开链接腾讯会帮你判断本地是否已经安装了app，如果本地安装就直接打开，没有安装的话就是腾讯微下载的页⾯进⾏app下载，当然微下载的页⾯腾讯提供了⼏个模板，可以⾃⼰选择和修改。

IOS实现：ios像直接点击链接打开本地app就难了，有两种⽅式可供我们选择： 1.腾讯深度合作的公司，微信可以帮你打开app； 2.使⽤IOS9+的新功能“Universal Links”（通⽤链接）；很显然，第⼆种⽅式更适合我们普通的公司。

效果展⽰实现步骤1.配置https（必须是https）⽹站⽀持；{"applinks": {"apps": [],"details": [{"appID": "*****.com.gangguwang.yewugo","paths": [ "/app/*" ]}]}}其中appId是你的Prefix + ID，如图：2.配置苹果证书，开启“Associated Domains”，如下图：3.配置你的App的Universal Links（通⽤链接）如果你是普通的ios项⽬的的话，配置如下：项⽬ targets->Capabilities->Associated Domains，如图填写你的链接域名域名的格式必须为：applinks:你的域名（ex:applinks:）,可以配置多个;如果你是Xamarin项⽬的话，需要选择Entitlements.plist配置关联域，如图：这样配置完之后，打包即可测试你的应⽤咯。

扩展知识（关于Xamarin）如果你要处理链接打开本地app并跳转到相应的详情页的话，需要这样实现：1.在你的xxx.iOS项⽬打开“AppDelegate.cs”⽂件；2.重写⽅法，代码如下：public override bool ContinueUserActivity(UIApplication application, NSUserActivity userActivity, UIApplicationRestorationHandler completionHandler) {if (userActivity.ActivityType == NSUserActivityType.BrowsingWeb){string url = userActivity.WebPageUrl.ToString(); //全地址if (!string.IsNullOrEmpty(url)){//你的业务处理}}return true;}注意事项1.配置的⽹站必须是https，不能为http；3.[重要]配置玩证书之后需要更新证书，才能内部打包和提测上传成功；4.通⽤链接可被屏蔽，点击右上⾓配置的链接之后，通⽤链接就失效了，解决⽅案详见：。

uni-app之web-view与h5通讯

uni-app之web-view与h5通讯已经很久没有更新我的博客了，差点要遗忘⾃⼰还有博客了，哈哈哈哈。

最近有接触过关于web-view的东西，⼤家也知道我⼀直在做uni-app的项⽬，也研究了很久，收获颇丰吧，今天就跟⼤家分享⼀下什么是web-view web-view是⼀个web浏览器组件，可以⽤来承担⽹页的容器，会⾃动铺满整个屏幕各⼩程序平台，web-view 加载的 url 需要在后台配置域名⽩名单，包括内部再次 iframe 内嵌的其他 url 。

具体的使⽤我就不⼀⼀介绍了，在官⽹上都有介绍---><---我说点需要注意的地⽅我以场景来介绍怎样APP --- vue页⾯与h5页⾯通讯src 指的是web-view需要引⼊的h5页⾯，vue页⾯模式下，嵌⼊的页⾯会⾃动铺满屏幕，不需要单独去设置页⾯宽⾼嵌⼊的h5项⽬或者页⾯不是uni-app项⽬搭建的话，需要在index.html页⾯或这是当前的HTML页⾯引⼊uni-app项⽬的API ,这样才能使⽤,才能相互通讯--->app端// 引⼊需要嵌⼊的h5 链接<template><view><web-view @message="message" src="https://uniapp.dcloud.io/static/web-view.html"></web-view></view></template>//在methods中接收h5发送的消息/*** @information message中接收到的是由h5项⽬通过uni.postMessage中传递出来的数据，以数组的形式接收每次的消息*/message(event){console.log('接收到消息'，event.detail.data)}h5 项⽬//引⼊uni-app的api之后，只需绑定事件，向APP传递消息<script type="text/javascript" src="https:///dev/uni-app/uni.webview.1.5.2.js"></script><script>document.addEventListener('UniAppJSBridgeReady', function() {uni.postMessage({data: {action: '这是我传送的消息'}});//传递的消息信息，必须写在 data 对象中。

H5唤起APP的解决方案

H5唤起APP的解决⽅案H5 页⾯唤起APP或跳转到下载APP的某个链接地址。

总结如下：在 IOS 中，系统版本在 8 以下时，可以监听页⾯的 pagehide / visibilitychange 事件。

系统版本⼤于 8 以后，可以使⽤ universal Link 或URL scheme 进⾏跳转。

// IOS 的唤起function vForIOS(urlScheme, storeURL, fallback, universalLink) {var tid = deferFallback(TIMEOUT_IOS, storeURL, fallback);if(parseInt(os.version, 10) < 8) {bindPagehideEvent(tid);} else{bindVisibilityChangeEvent(tid);}if(parseInt(os.version, 10) > 8 && == 'iOS') {// 通过universalLinkif(universalLink === undefined) {universalLink = urlScheme;} else{clearTimeout(tid);}vLocation(universalLink);} else{vIframe(urlScheme);}}function deferFallback(timeout, storeURL, fallback) {var clickedAt = new Date().getTime();return setTimeout(function() {var now = new Date().getTime();if(isPageVisible() && now - clickedAt < timeout + INTERVAL) {fallback(storeURL);}}, timeout);}安卓系统中，不同浏览器对唤起APP有严重的兼容性问题，主要处理⽅案有以下⼏种：1. 通过改变 window.location.href2. 通过创建 iframe 并为其 src 赋值3. 通过 intent4. 通过制造不可见 a 链接，并触发点击时间// 打开页⾯的⽅式可能// 1. 通过改变locationfunction vLocation(urlScheme) {window.location.href = urlScheme;}// 2. 通过ifreamefunction vIframe(urlScheme) {setTimeout(function() {var iframe = createHiddenIframe('appLauncher');iframe.src = urlScheme;}, 100);}// 3. 通过intentfunction vIntent(launchURI) {if( == 'Chrome') {move();} else{setTimeout(move, 100);}function move() {// window.top.location.href = launchURI;window.location.href = launchURI}}// 3. 通过添加出发alinkfunction vAlink(launchURI) {var aLink = document.createElement("a");aLink.setAttribute("href", launchURI);aLink.style.display = "none";document.body.appendChild(aLink);document.body.appendChild(aLink);var event = document.createEvent("HTMLEvents");event.initEvent("click", !1, !1);aLink.dispatchEvent(event)}// IOS 中的可见性事件function bindPagehideEvent(tid) {window.addEventListener('pagehide', function clear() {if(isPageVisible()) {clearTimeout(tid);window.removeEventListener('pagehide', clear);}});}function bindVisibilityChangeEvent(tid) {document.addEventListener('visibilitychange', function clear() {if(isPageVisible()) {clearTimeout(tid);document.removeEventListener('visibilitychange', clear);}});}function isPageVisible() {var attrNames = ['hidden', 'webkitHidden'];for(var i = 0, len = attrNames.length; i < len; i++) {if(typeof document[attrNames[i]] !== 'undefined') {return!document[attrNames[i]];}}return true;}已知的浏览器兼容问题：1. 上述 chrome 和 Android Browser 可以使⽤ intent 的⽅式拉起 app2. QQ 浏览器⽆法正确判断计时器是否变慢3. 微信浏览器和百度浏览器⽆法唤起 app 除⾮加⼊其⽩名单4. 安卓4.4.4以前的 UC浏览器⽆法正确识别为【安卓系统】需要单独设置判断条件另：研究京东唤起APP的代码时，其对百度浏览器做了如下操作，但我们对此的尝试并为成功，如下为其代码, 希望对后续研究此项的同学有帮助：function ai(aA) {var aD = ay(aA, true);var aB = aA.universalLinksUrl + "/ul/ul.action?"+ aD;if(erAgent.indexOf("baidubrowser") >= 0) {window.location.href = aB} else{var az = document.createElement("a");az.setAttribute("href", aB);az.style.display = "none";document.body.appendChild(az);var aC = document.createEvent("HTMLEvents");aC.initEvent("click", !1, !1);az.dispatchEvent(aC)}}。

h5链接调取第三方的原理

h5链接调取第三方的原理随着互联网的发展，我们越来越依赖于各种第三方服务来满足我们的需求。

而h5链接（即超文本链接）作为一种常见的网页链接形式，可以通过简单的点击实现页面跳转或调用第三方服务。

本文将介绍h5链接调取第三方的原理及其应用。

我们需要了解h5链接的基本原理。

h5链接是通过超文本传输协议（HTTP）来实现的，它是一种用于在网络上传输超文本的协议。

h5链接由两部分组成：协议部分和资源部分。

协议部分指定了要使用的协议，例如http或https；资源部分指定了要访问的资源的位置，可以是一个URL（统一资源定位符）或一个文件路径。

当我们在网页中点击一个h5链接时，浏览器会根据链接中的协议部分来确定要使用的协议。

如果是http协议，浏览器将会向链接中指定的URL发送一个HTTP请求，然后接收服务器返回的HTTP响应。

在这个过程中，浏览器会将链接中的资源部分作为请求的目标资源，并将其发送给服务器。

服务器在接收到请求后，会根据请求的资源来执行相应的操作，并将执行结果打包成HTTP响应返回给浏览器。

当我们需要调用第三方服务时，可以通过h5链接来实现。

例如，我们想要在网页中嵌入一个地图，可以使用h5链接调用第三方地图服务商的API。

通过在h5链接中指定地图服务商的URL和参数，浏览器会向该URL发送HTTP请求，请求地图服务。

地图服务商在接收到请求后，会根据参数来生成相应的地图，并将地图的图像数据打包成HTTP响应返回给浏览器。

浏览器接收到响应后，将会解析响应并将地图显示在网页中。

除了地图服务，h5链接还可以调用其他各种第三方服务。

例如，我们可以通过h5链接调用支付服务商的支付接口，实现在线支付功能；我们也可以通过h5链接调用音乐服务商的音乐播放接口，实现在线音乐播放功能。

通过h5链接调用第三方服务可以极大地扩展网页的功能，提升用户体验。

当然，使用h5链接调用第三方服务也存在一些注意事项。

首先，我们需要确保第三方服务的可用性和稳定性。

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 的方法，希望对小伙伴们有所帮助。