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

[[toc]]

demo1: 文本通信

h5 -> app

思路:

  • h5 全局属性上挂一个变量
  • app 接收这个变量的内容
  • 关键API: navigation代理 + navigationAction.request.url?.absoluteString
// 这个变量挂载在 request 的 url 上 ,在浏览器实际无法运行,因此不会影响到页面本身
window.location.href="test://hellowolrd"
// app 接收这个变量
navigationAction.request.url?.absoluteString
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 = selfwebView.navigationDelegate = selfview = webView        }override func viewDidLoad() {super.viewDidLoad()let myURL = URL(string:"http://localhost:5173/") // oklet 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)}
}

Snipaste_2023-10-04_20-51-41

app -> h5

思路

  • app调用js语法,将app的数据通过 html dom结构或者js方法 传递给h5
  • 关键API:webView.evaluateJavaScript
<!-- 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>
// app swift
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {print("webView didFinish 页面加载完成之后调用...")webView.evaluateJavaScript("document.getElementById('someElement1').innerText='test data1: app'") {(result, error) inif let result = result {print("someElement result: \(result)")}if let error = error {print("someElement error: \(error)")}}webView.evaluateJavaScript("window.getText('app')") { (result, error) inif let result = result {print("getText result: \(result)")}if let error = error {print("getText error: \(error)")}}
}

Snipaste_2023-10-04_21-29-22

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

思路

  • 原生app具备调用相机和扫描二维码的能力
  • h5通过jsbridge通知app-》app执行拍照和扫描动作-》将结果返回h5

Snipaste_2023-10-04_21-41-50

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/94598.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring事务

事务概念 逻辑上的一组操作&#xff0c;要么都成功、要么都失败 典型案例&#xff1a;银行转账 事务特性&#xff1a;ACID【原子、一致、隔离、持久】 搭建环境 银行转账操作 web&#xff1a; service&#xff1a;逻辑操作&#xff0c;调用dao dao&#xff1a;创建两个方法 …

强化学习环境 - robogym - 学习 - 2

强化学习环境 - robogym - 学习 - 2 文章目录 强化学习环境 - robogym - 学习 - 2项目地址为什么选择 robogymRearrange - 环境部分介绍Robot Control Interface - 机器人控制接口Environment - listEnvironment Randomization - 接口设置 项目地址 https://github.com/openai…

PAT(Basic Level) Practice(中文) 1015德才论

前言 ※ PTA是 程序设计类实验辅助教学平台 &#xff0c;里边包含一些编程题目集以供练习。 这道题用java解&#xff0c;我试了三种解法&#xff0c;不断优化&#xff0c;但始终是三个测试点通过、三个测试点超时。我把我的代码放在这里&#xff0c;做个参考吧。 1015 德才…

获取上证50的所有股票代码

我们可以从网页&#xff08;板块 - 上证50_ - 股票行情中心 - 搜狐证券&#xff09;中获取&#xff0c; 然后打印出来&#xff1a; import requests from bs4 import BeautifulSoupurl "https://q.stock.sohu.com/cn/bk_4272.shtml" response requests.get(url) …

junit @ExcludePackages排除多个包

在JUnit中&#xff0c;可以使用ExcludePackages注解来排除多个包。该注解可以用在测试类或测试方法上。 如果要排除多个包&#xff0c;可以在ExcludePackages注解的value属性中使用数组来指定要排除的包名。例如&#xff0c;要排除包com.example.package1和com.example.packag…

秋招问题记录贴

最近面试有点多&#xff0c;没来的及写面经&#xff0c;就单独开个帖子记录一下碰到的一些不懂的技术问题&#xff1a; AQS中两个队列如何工作&#xff0c;这个结合os中阻塞和就绪两种情况讲分布式的理解&#xff0c;这个问的频率很高nacos怎么进行服务注册和发现的mysql什么情…

TcpConnection的读写操作【深度剖析】

文章目录 前言一、TcpConnection的读二、TcpConnection的写三、TcpConnection的关闭 前言 今天总结TcpConnection类的读写事件。 一、TcpConnection的读 当Poller检测到套接字的Channel处于可读状态时&#xff0c;会调用Channel的回调函数&#xff0c;回调函数中根据不同激活…

treectrl类封装 2023/8/13 下午4:07:35

2023/8/13 下午4:07:35 treectrl类封装 2023/8/13 下午4:07:53 TreeCtrl 类是一个常用的图形用户界面控件,用于实现树形结构的展示和交互。以下是一个简单的 TreeCtrl 类的封装示例: python import wxclass MyTreeCtrl(wx.TreeCtrl):def __init__(self, parent):super()…

java限流

限流可以使用redis的过期时间自动过期限流的key&#xff0c;&#xff0c; 也可以使用一个定时器&#xff0c;在指定时间后清除这个key&#xff0c;&#xff0c;比如Timer Timer的使用 Timer timer new Timer() timer.schedule(timerTast,delay,period) public static void …

mysql面试题13:MySQL中什么是异步复制?底层实现?

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:讲一讲mysql中什么是异步复制?底层实现? MySQL中的异步复制(Asynchronous Replication)是一种复制模式,主服务器将数据写入二进制日志后,无…

mysql面试题14:讲一讲MySQL中什么是全同步复制?底层实现?

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:讲一讲mysql中什么是全同步复制?底层实现? MySQL中的全同步复制(Synchronous Replication)是一种复制模式,主服务器在写操作完成后,必须等待…

AI配套的技术: 矢量数据库的概念

一、说明 随着人工智能的快速采用和围绕大型语言模型发生的创新&#xff0c;我们需要在所有这些的中心&#xff0c;能够获取大量数据&#xff0c;将其上下文化&#xff0c;处理它&#xff0c;并使其能够有意义地搜索。 为原生整合生成式 AI 功能而构建的生成式 AI 流程和应用程…

JUC第十四讲:JUC锁: ReentrantReadWriteLock详解

JUC第十四讲&#xff1a;JUC锁: ReentrantReadWriteLock详解 本文是JUC第十四讲&#xff1a;JUC锁 - ReentrantReadWriteLock详解。ReentrantReadWriteLock表示可重入读写锁&#xff0c;ReentrantReadWriteLock中包含了两种锁&#xff0c;读锁ReadLock和写锁WriteLock&#xff…

ES6中的let、const

let ES6中新增了let命令&#xff0c;用来声明变量&#xff0c;和var类似但是也有一定的区别 1. 块级作用域 只能在当前作用域内使用&#xff0c;各个作用域不能互相使用&#xff0c;否则会报错。 {let a 1;var b 1; } console.log(a); // 会报错 console.log(b); // 1为什…

Day-05 CentOS7.5 安装docker

参考 &#xff1a; Install Docker Engine on CentOS | Docker DocsLearn how to install Docker Engine on CentOS. These instructions cover the different installation methods, how to uninstall, and next steps.https://docs.docker.com/engine/install/centos/ Doc…

iOS AVAudioSession 详解

iOS AVAudioSession 详解 - 简书 默认没有options&#xff0c;category 7种即可满足条件 - (BOOL)setCategory:(AVAudioSessionCategory)category error:(NSError **)outError API_AVAILABLE(ios(3.0), watchos(2.0), tvos(9.0)) API_UNAVAILABLE(macos); 有options&#xff…

实战型开发--3/3,clean code

编程的纯粹 hmmm&#xff0c;一开始在这个环节想聊一些具体的点&#xff0c;其实也就是《clean code》这本书中的点&#xff0c;但这个就还是更流于表面&#xff1b; 因为编码的过程&#xff0c;就更接近于运动员打球&#xff0c;艺术家绘画&#xff0c;棋手下棋的过程&#x…

Elasticsearch基础篇(四):Elasticsearch7.x的官方文档学习(Set up Elasticsearch)

Set up Elasticsearch 1 Configuring Elasticsearch(配置 Elasticsearch)1.1 Setting JVM Options(设置JVM选项)1.2 Secure Settings(安全设置)Introduction(介绍)Using the Keystore(使用密钥库)Applying Changes(应用更改)Reloadable Secure Settings(可重新加载的安全设置)R…

GPT系列论文解读:GPT-1

GPT系列 GPT&#xff08;Generative Pre-trained Transformer&#xff09;是一系列基于Transformer架构的预训练语言模型&#xff0c;由OpenAI开发。以下是GPT系列的主要模型&#xff1a; GPT&#xff1a;GPT-1是于2018年发布的第一个版本&#xff0c;它使用了12个Transformer…

软件设计师_计算机网络_学习笔记

文章目录 4.1 网路技术标准与协议4.1.1 协议4.1.2 DHCP4.1.3 DNS的两种查询方式 4.2 计算机网络的分类4.2.1 拓扑结构 4.3 网络规划与设计4.3.1 遵循的原则4.3.2 逻辑网络设计4.3.3 物理网络设计4.3.4 分层设计 4.4 IP地址与子网划分4.4.1 子网划分4.4.2 特殊IP 4.5 HTML4.6 无…