前言：
当前兄弟们对“h5和客户端交互”都比较看重，你们都需要知道一些“h5和客户端交互”的相关资讯。那么小编也在网络上收集了一些对于“h5和客户端交互””的相关文章，希望你们能喜欢，朋友们一起来了解一下吧！先解释一个名词吧 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注入顶级对象) 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #h5和客户端交互
