jsbridge实战2:Swift和h5的jsbridge通信

\[toc\]

demo1: 文本通信

h5 -> app

思路:

  • h5 全局属性上挂一个变量
  • app 接收这个变量的内容
  • 关键API: navigation代理 + navigationAction.request.url?.absoluteString
js 复制代码
// 这个变量挂载在 request 的 url 上 ,在浏览器实际无法运行,因此不会影响到页面本身
window.location.href="test://hellowolrd"
// app 接收这个变量
navigationAction.request.url?.absoluteString
swift 复制代码
import UIKit
import WebKit
class ViewController: UIViewController, WKUIDelegate {
    var webView: WKWebView!
    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        // 【1】设置自己为webview的代理
        webView.uiDelegate = self
        webView.navigationDelegate = self
        view = webView        
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        let myURL = URL(string:"http://localhost:5173/") // ok
        let myRequest = URLRequest(url: myURL!)
        webView.load(myRequest)
        print("viewDidLoad...")
    }
}
extension ViewController: WKNavigationDelegate {
    //【2】通过 navigationAction.request.url?.absoluteString  获取 h5 传递的数据
    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        print("webView decidePolicyFor ...")
        print(navigationAction.request.url?.absoluteString)
        decisionHandler(.allow)
    }
}

app -> h5

思路

  • app调用js语法,将app的数据通过 html dom结构或者js方法 传递给h5
  • 关键API:webView.evaluateJavaScript
html 复制代码
<!-- h5页面 -->
<div id="someElement1">test data1</div>
<div id="someElement2"></div>
<script>
    window.getText=function(data){
        const reuslt = 'test data2:'+data;
        document.getElementById('someElement2').innerText = reuslt;
        return reuslt; 
    }
</script>
swift 复制代码
// app swift
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    print("webView didFinish 页面加载完成之后调用...")
    webView.evaluateJavaScript("document.getElementById('someElement1').innerText='test data1: app'") {
        (result, error) in
        if let result = result {
            print("someElement result: \(result)")
        }
        if let error = error {
            print("someElement error: \(error)")
        }
    }
    webView.evaluateJavaScript("window.getText('app')") { (result, error) in
        if let result = result {
            print("getText result: \(result)")
        }
        if let error = error {
            print("getText error: \(error)")
        }
    }
}

demo2: h5通过app调用相机和扫描二维码

思路

  • 原生app具备调用相机和扫描二维码的能力
  • h5通过jsbridge通知app-》app执行拍照和扫描动作-》将结果返回h5
相关推荐
倒霉蛋小马5 分钟前
【Java集合】LinkedList源码深度分析
java·开发语言
pk_xz1234569 分钟前
python加载训练好的模型并进行叶片实例分割预测
开发语言·python
独好紫罗兰9 分钟前
洛谷题单3-P1075 [NOIP 2012 普及组] 质因数分解-python-流程图重构
开发语言·python·算法
编程咕咕gu-1 小时前
从零开始玩python--python版植物大战僵尸来袭
开发语言·python·python基础·pygame·python教程
柏木乃一1 小时前
双向链表增删改查的模拟实现
开发语言·数据结构·算法·链表
cherryc_2 小时前
JavaSE基础——第六章 类与对象(二)
java·开发语言
Qlittleboy6 小时前
windows如何安装wkhtmltoimage 给PHP使用根据HTML生成图片
开发语言·windows·php
水w7 小时前
【Android Studio】解决报错问题Algorithm HmacPBESHA256 not available
android·开发语言·android studio
冷琅辞8 小时前
Elixir语言的云计算
开发语言·后端·golang
Mryan20058 小时前
解决GraalVM Native Maven Plugin错误:JAVA_HOME未指向GraalVM Distribution
java·开发语言·spring boot·maven