锐客网

  1. 首页 > 生活百科 > it技术 > >

网页跳转APP

IT知识网页跳转

须知少年凌云志，曾许人间第一流。这篇文章主要讲述网页跳转APP相关的知识，希望能为你提供帮助。
需求：
1 从原生APP打开一个H5活动页，点击活动页上的商品图标，可以回到APP上的商品详情；
2 从原生APP打开一个H5活动页，分享到微信朋友圈后，在朋友圈打开后，H5页面要提示去下载APP；
3 分享一个H5链接（比如发送短信附上一个URL），点击链接可以进入APP，未下载APP可以跳转到APP下载页面。
代码实现：

1 //移动终端浏览器版本信息 2 var browser = { 3versions: function () { 4var u = navigator.userAgent; 5return { 6android: u.indexOf(\'Android\') > -1 || u.indexOf(\'Linux\') > -1, //android终端或uc浏览器 7ios: !!u.match(/\\(i[^; ]+; ( U; )? CPU.+Mac OS X/), //ios终端 8iPhone: u.indexOf(\'iPhone\') > -1, //是否为iPhone或者QQHD浏览器 9iPad: u.indexOf(\'iPad\') > -1, //是否iPad 10mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端 11webKit: u.indexOf(\'AppleWebKit\') > -1, //苹果、谷歌内核 12trident: u.indexOf(\'Trident\') > -1, //IE内核 13presto: u.indexOf(\'Presto\') > -1, //opera内核 14gecko: u.indexOf(\'Gecko\') > -1 & & u.indexOf(\'Khtml\') == -1, //火狐内核 15webApp: u.indexOf(\'Safari\') == -1 //是否web应该程序，没有头部与底部 16}; 17}() 18 }; 19 20 //加载绑定事件 21 function active(){ 22var urldata = https://www.songbingjia.com/android/GetUrlParam(); 23var activeId = +urldata.id || 1; 24console.log("activity id is " + activeId); 25console.log(browser.versions); 26if (browser.versions.iPhone || browser.versions.iPad || browser.versions.ios) { 27$("body").on("click", "#app ul li a", function () { 28var id = $(this).attr("data-id"); 29window.webkit.messageHandlers.activeToast.postMessage({ body: \'id=\' + id , active:\'activeId=\'+activeId}); 30}); 31} else if(browser.versions.android) { 32$("body").on("click", "#app ul li a", function () { 33var id = $(this).attr("data-id"); 34window.android.activeToast(id,activeId); 35}); 36} else { 37console.log("showBottom,not opon in webview"); 38var html="< div id=\'bottom\'> < a href=https://www.songbingjia.com/'http://a.app.qq.com/o/simple.jsp?pkgname=com.i_banmei.yym\'> < div class=\'tLoad clear\'> < img class=\'fl\' style=\'margin:15px; \' width=\'50px\' src=https://www.songbingjia.com/'../../images/default_logo_512.png\' alt=\'\'> < div class=\'con\'> < p class=\'content\'> 伴美整形APP< /p> < p class=\'content\'> 让求美者找到好医生< /p> < /div> < div class=\'con con1\'> < img src=https://www.songbingjia.com/'../images/down.png\' style=\'width:75px; margin:0; \'> < /div> < /div> < /a> < /div> " 39$("body").append(html); 40} 41 } 42 active();

 
  完整代码：https://download.csdn.net/download/u013864585/10672590
 
 
 
 
参考:
简书：通过JS页面唤醒app（安卓+ios）
https://www.jianshu.com/p/0180e3ee8108

OC与JS交互之WKWebView
https://www.cnblogs.com/markstray/p/5757264.html

JS传递值给android/相互传值
https://blog.csdn.net/meijuanyou/article/details/54973556
 
附加：
JS对象的方法定义了一个函数，并作为对象的属性存储。
https://www.cnblogs.com/lcs-java/p/8468642.html
【网页跳转APP】JS function的定义方法，及function对象的理解。
https://www.cnblogs.com/pingchuanxin/p/5722139.html
 

    推荐阅读


    上一篇：Android EditText单击触发onclick事件处理

    下一篇：Android SDK + Appium 环境搭建