网页跳转APP

Posted 2021-01-06 喻聪

需求：
1 从原生APP打开一个H5活动页，点击活动页上的商品图标，可以回到APP上的商品详情；
2 从原生APP打开一个H5活动页，分享到微信朋友圈后，在朋友圈打开后，H5页面要提示去下载APP；
3 分享一个H5链接（比如发送短信附上一个URL），点击链接可以进入APP，未下载APP可以跳转到APP下载页面。

代码实现：

 1 //移动终端浏览器版本信息
 2 var browser = {
 3     versions: function () {
 4         var u = navigator.userAgent;
 5         return { 
 6             android: u.indexOf(\'Android\') > -1 || u.indexOf(\'Linux\') > -1, //android终端或uc浏览器
 7             ios: !!u.match(/\\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
 8             iPhone: u.indexOf(\'iPhone\') > -1, //是否为iPhone或者QQHD浏览器
 9             iPad: u.indexOf(\'iPad\') > -1, //是否iPad
10             mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
11             webKit: u.indexOf(\'AppleWebKit\') > -1, //苹果、谷歌内核
12             trident: u.indexOf(\'Trident\') > -1, //IE内核
13             presto: u.indexOf(\'Presto\') > -1, //opera内核
14             gecko: u.indexOf(\'Gecko\') > -1 && u.indexOf(\'Khtml\') == -1, //火狐内核
15             webApp: u.indexOf(\'Safari\') == -1 //是否web应该程序，没有头部与底部
16         };
17     }()
18 };
19 
20 //加载绑定事件
21 function active(){
22     var urldata = GetUrlParam();
23     var activeId = +urldata.id || 1;
24     console.log("activity id is " + activeId);
25     console.log(browser.versions);
26     if (browser.versions.iPhone || browser.versions.iPad || browser.versions.ios) {
27         $("body").on("click", "#app ul li a", function () {
28             var id = $(this).attr("data-id");
29             window.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 () {
33             var id = $(this).attr("data-id");
34             window.android.activeToast(id,activeId);
35         });
36     } else {
37         console.log("showBottom,not opon in webview");
38         var html="<div id=\'bottom\'><a href=\'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=\'../../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=\'../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

JS function的定义方法，及function对象的理解。
https://www.cnblogs.com/pingchuanxin/p/5722139.html