h5与app交互,点击h5的链接跳转app原生界面（h5部分）

作为打杂的后端，第一次遇到h5与原生app交互的功能，在此记录下，方便后面查阅。

需求描述：

如图，在h5活动页添加“点击查看详情”链接，根据点击的链接来跳转到不同的原生界面。

代码实现（仅h5部分）：

<script>
    // 定义函数，自动判断点击操作来自安卓还是苹果
    apiMethod = function(jsonObj){
        // JSON.stringify把对象格式化为json字符串
        var jsonString = JSON.stringify(jsonObj);
        console.log(jsonString)

        // 调用app端定义好的interactiveMethod方法
        if(window.webkit){
            // IOS               
           window.webkit.messageHandlers.interactiveMethod.postMessage(jsonString);
        }else{
            // Android,JsMethodApi为安卓定义好的类名
            JsMethodApi.interactiveMethod(jsonString);
        }

    }

    /***
     * 效果：点击后跳转到课程详情页
     * 因为一个活动可以添加多个课程，所以这里用getElementsByClassName。如果只添加一次，简单点 
     * 可以使用getElmentById。
    */
    var 
    coursePackageRedirect=document.getElementsByClassName("coursePackageRedirect");
    // 判断是否存在该元素
    if(coursePackageRedirect !=null){
         // 遍历对象，因为是用getElementsByClassName
         for(var z=0;z<coursePackageRedirect.length;z++){
            // 监听具体哪个链接被点击了
            coursePackageRedirect[z].addEventListener('click',function(e){
                 // 获取课程id参数。因为这里用了p标签，无法用getAttributes直接获取value值， 
                 // 所以使用了e.target.attributes["value"].value方式。
                 var pid=e.target.attributes["value"].value;
                 // 传递给app需要的参数
                 var jsonObj = {"type":"course_package","pid":pid};
                 // 调用封装好的函数
                      apiMethod(jsonObj);
                 });
            }
    }
</script>

参考链接：

Android进阶之路 - 通过WebView与H5前端进行完美交互_webview调用h5-CSDN博客

WKWebView 与H5 通信 - 掘金

获取p的value值_获取p标签的值-CSDN博客

getElementsByClassName()不能添加事件监听-CSDN博客