Ｈ5与客户端交互的方式有哪些? 怎么做?

先解释一个名词吧 Hybrid, 相信能看到这篇文章的同学对这个词都不会感到陌生, 可能爱恨交叉的感觉会更强烈一些...

回到正题, Hybrid翻译过来叫混合，混合物，在前端世界里有一个词语叫混合开发便是它，大白话点就是将网页内嵌在原生app中，然后产生一系列的交互

常用的交互方式

  • 双方约定协议(schema)

  • 双方约定函数

双方约定协议(schema)

这里以android 为例，android 中可以通过WebViewClient 的回调方法shouldOverrideUrlLoading ()拦截 url, 然后解析该 url 的协议, 如果检测到是预先约定好的协议，就调用相应方法

协议式的通信适用于单向交互, 客户端想要回传给我们参数比较复杂

代码理解

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button type="button" id="button1" onclick="callAndroid()">点击调用Android代码</button>
    <script>
        function callAndroid() {
            /*约定的url协议为：js://webview?arg1=111&arg2=222*/
            location.href = "js://webview?arg1=111&arg2=222";
        }
    </script>
</body>

</html>

双方约定函数

简单来说，就是客户端为我们做了一层关系映射, 也可以理解原生app端会向webview暴露一个顶层对象，就像js中的window，这个对象包含web需要但不具备因此由原生实现的一些方法

代码理解

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 点击按钮则调用jsbridge函数 -->
    <button type="button" id="button1" onclick="jsbridge()">Hello</button>

    <script>
        function jsbridge() {
            // 由于对象映射，所以调用test对象等于调用Android映射的对象
            test.hello("js调用了原生app暴漏出来jsbridge中的hello方法");
        }
    </script>
</body>

</html>

总结

  • 约定协议(native拦截http协议进行判读是否是定义好的协议)

  • 约定函数(native向webview注入顶级对象)

 

posted @ 2019-03-20 14:05  周家华  阅读(3674)  评论(0)  编辑  收藏  举报