前端学习笔记：经过H5页面调用不一样客户端的原生页面

时间 2019-12-01

原文原文链接

前言

昨天遇到一个很是有趣的需求场景，背景以下：咱们是一家电商平台，常常会作一些商品的促销专题活动。昨天我司产品经理找到我和APP的开发工程师，但愿咱们解决一个问题：在APP端点击专题活动中的商品，打开的页面是H5页面，而不是客户端的原生页面。产品经理但愿打开原生页面，以让用户得到更好的体验。见下图，左图是在APP中打H5页面，右图是在APP中打开APP原生页面。javascript

缘由

发现了问题之后，我初步了解了致使这个问题的缘由。原来，APP端展现的专题活动页面和小程序同样，采用的是webview的解决方案，即APP指定一个对象（我以为是路径，不过据我司APP开发工程师介绍，APP中只有对象的说法，没有路径的说法），接收H5页面的连接，并将连接中的HTML铺到APP的对象（路径）中。用户点击专题中的商品连接也是一样的方式，所以最后展现出来的商品详情页就是H5页面，而不是客户端的原生页面。前端

小程序、安卓、苹果各不相同

小程序的处理逻辑

我目前在公司主要是负责小程序端的。在此以前，我接触太小程序相似的业务场景。在小程序中若是想要实现相似的逻辑，须要在H5页面的头部引入一段JS代码。这段JS代码的主要做用，是在window对象中加入一个新的名为wx的属性。这个属性是一个对象，有本身的属性和方法。经过调用wx.miniProgram.getEnv()方法，并传入一个回调函数，即java

wx.miniProgram.getEnv(res => {
    if(res.miniProgram) {
        //小程序环境
        let url;
        wx.miniProgram.navigateTo({url: url});
    } else {
        //微信中打开内置浏览器
    }
})
复制代码

以上判断完成以后，就完成了在小程序端跳转到原生页面的逻辑。android

安卓客户端的处理逻辑

由于有这个基础，我下意识认为APP端若是想要实现相似的逻辑，也须要先引入一段相似的JS代码。但和APP工程师沟通后发现，客户端的API已经支持了这段JS代码须要实现的功能。我司APP工程师还给我展现了一段以前使用的代码：ios

if(window.android) { //判断android对象是否存在
   window.android.navigateTo(url); //调用android分享
} else {
   //调用ios支付方法！
   window.webkit.messageHandlers.navigateTo.postMessage(url);
}
复制代码

个人猜测是这样的：客户端（Android、iOS）中APP工程师经过API提供的方法，给JS的执行环境window增长了对应的属性：Android客户端增长的属性是android，iOS客户端增长的属性是webkit。这两个属性都是对象，在给这两个属性增长对应的方法之后，就能够直接在JS代码中引用了。为了证实个人猜测，我特地百度了一下“经过js调用android原生方法”，发现了如下这段代码。web

//设置webview
myWebView = (WebView) findViewById(R.id.myWebView);
myWebView.getSettings().setJavaScriptEnabled(true);
myWebView.addJavascriptInterface(new JavaScriptinterface(this),"android");
myWebView.setWebViewClient(new myWebViewClient());

//建立JavaScriptinterface类
public class JavaScriptinterface {
    Context context;
    public JavaScriptinterface(Context c) {
        context= c;
    }

    /**
     * 与js交互时用到的方法，在js里直接调用的
     */
    @JavascriptInterface
    public void showToast(String ssss) {

        Toast.makeText(mContext, ssss, Toast.LENGTH_LONG).show();
    }
}

//在JS中调用android原生方法
<script type="text/javascript">   
function showToast() {       
    android.showToast("哈哈啊哈 ");
     }
</script>

</head>
<body>
<input type="button" value="调用"
     onClick="showToast()"/>
</body>
复制代码

虽然没有学过客户端的相关知识，但这个逻辑仍是一目了然的。从这段代码也能够看出，安卓客户端除了能够指定方法的名称外，还能够指定设置在window对象下的属性的名称，也就是上一行代码中的window.android。你能够改为window.Android、window.app，由app工程师指定。小程序

确认该属性的名称后，再为这个属性添加方法，这个方法由H5页面的前端工程师和app开发工程师约定名字。app开发工程师实现逻辑跳转，前端工程师直接引用，便可实现跳转到app的原生页面。浏览器

苹果客户端的解决逻辑

与安卓客户端的实现逻辑同样，苹果客户端也是在window对象下添加指定的属性，在该属性下面添加方法，便可跳转到指定的app原生页面。不过须要注意的是，因为客户端API版本的不一样，可能引用的方式也不一样。目前我已经接触到了如下两个引用方式：bash

//第一种引用方式
window.webkit.messageHandlers.shareLink.postMessage(shareData);
//第二种引用方式
window.RequiredSkill.shareLink(shareData)
复制代码

总结

因为以前主要工做在小程序端，因此初次接触该问题时，习惯性的用了小程序的处理思路。也是第一次接触到和客户端的JS交互方式，感受比较有意思，因此记录下来。微信

另一个收获是，之前一直觉得window对象就是指浏览器中的window；但经过解决这个问题发现，小程序、APP端也有相应的window对象，并且小程序和APP端的window对象还有独有的属性。想一想确实是这个道理，不一样的浏览器window对象的属性都不一样，更况且不一样的客户端？