Ｈ5与客户端交互的方式有哪些? 怎么做?
Posted jiahuasir
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ｈ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注入顶级对象)
以上是关于Ｈ5与客户端交互的方式有哪些? 怎么做?的主要内容，如果未能解决你的问题，请参考以下文章