标签:pad url cti 网页 方法 pre jsb 等于 bsp
先解释一个名词吧 Hybrid, 相信能看到这篇文章的同学对这个词都不会感到陌生, 可能爱恨交叉的感觉会更强烈一些...
回到正题, Hybrid翻译过来叫混合,混合物,在前端世界里有一个词语叫混合开发便是它,大白话点就是将网页内嵌在原生app中,然后产生一系列的交互
常用的交互方式
双方约定协议(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注入顶级对象)
标签:pad url cti 网页 方法 pre jsb 等于 bsp
原文地址:https://www.cnblogs.com/jiahuasir/p/10564580.html