iOS中web与Js的交互
问题
感觉到uni-app框架有pit,公司强推该框架的小哥识趣的闭嘴,考虑到全盘替换周期跟成本挺大,基于uni-app能打包成H5,采用webview+js的原生方式集成
基本结构:原生壳 + webview[iOS & Android] + js
方案
确定基础框架后,主要的问题就是web与js的交互,限于技术能力,只谈iOS方向
首先,UIWebView用的不多,已经iOS14+了,用UIWebView不被diss的话,大概你们团队也就那样了,其对应的交互框架为JavaScriptCore。Pass不讲
再次,可拦截跳转的url并解析,以约定好的key/value,调用原生方法,该交互方式满足简单的功能需求,仅限web唤起iOS调用,看情况
接着,WKWebview中,JS调用native方法,通过WKScriptMessageHandler协议,核心是:window.webkit.messageHandlers.方法名.postMessage(参数),native调用JS就简单很多,核心是:[weblview evaluateJavaScript:xxx completionHandler: ^(id object, NSError * _Nullable error) { }];
如上:如果有异步操作,怎么办?如果实现block岂不更好?
最后:WebViewJavascriptBridge,来吧,你值得拥有
剖析
1.js调用native方法- html中web中按钮点击,
- bridge调用callHandler,
- 调用_doSend()
- 赋值messagingIframe.src = xxx://__wvjb_queue_message__
- native的webview执行代理方法decidePolicyForNavigationAction
- 获取url, native执行WKFlushMessageQueue
- webview执行evaluateJavaScript, 调用js的_fetchQueue(),把_doSend()调用时写入sendMessageQueue中的值取出来,即获取js传递过来的参数
- native方法flushMessageQueue,处理js传递过来的参数,封装在block中
- 注意:js传递过来的参数,有可能还有function回调的存在,function是解决js调用native之后,native的执行结果回调给js,形成一个js->native->js的过程。
2.native调用js方法
- native中的bridge调用callHandler方法
- BridgeBase中调用-(void)sendData:(id)data responseCallback:(WVJBResponseCallback)responseCallback handlerName:(NSString*)handlerName
- BridgeBase中调用_queueMessage
- 这里有个判断,当startupMessageQueue!=nil时,消息放在数组中,当=nil时,直接调用_dispatchMessage
- native中startupMessageQueue在执行injectJavascriptFile方法后会被设置为nil
- injectJavascriptFile追溯可知当decidePolicyForNavigationAction中判断url的host=__bridge_loaded__时调用,
- 而在js中设置的bridge时设置的WVJBIframe.src = 'https://__bridge_loaded__', 到此应该不用多问,剖析_dispatchMessage
- _dispatchMessage中执行_evaluateJavascript, 执行的js中的方法_handleMessageFromObjC(xxx)
- Bridge_JS中查询_dispatchMessageFromObjC, 接着调用_dispatchMessageFromObjC
- 此时设置回调A-block, 里面的数据是js中的执行结果,js在开始的时候注册registerHandler,是key/block,此时通过key可以找到对应的B-block,将message传递过来的data跟设置的A-block当做对应的key/block的B-block的参数,直接执行该B-block即可。能够在js的registerHandler中获取到native传递过来的参数,同时也能够通过A-block将js的执行结果回调给native
3.总结
初始化时给web注入不少料,核心是 1.拦截url, 2.回调实现基于初始化注入字典便于key/value方式管理block 3.evaluateJavaScript执行js
4.延伸
如上的做法适合UIWebView&WKWebView。实际上如果只针对WKWebView的话,可在_doSend方法中直接调用window.webkit.messageHandlers.xxx.postMessage(null),而非设置src的方式。可参照WKWebViewJavascriptBridge
Game Over。
iOS中web与Js的交互的更多相关文章
- iOS中UIWebView执行JS代码(UIWebView)
iOS中UIWebView执行JS代码(UIWebView) 有时候iOS开发过程中使用 UIWebView 经常需要加载网页,但是网页中有很多明显的标记让人一眼就能看出来是加载的网页,而我们又不想被 ...
- iOS中web app调试(mac)
原文 iOS中web app调试(mac).md 目录 一.真机联调配置 二.mac上Safari配置及真机联调 三.iOS模拟器使用 四.在iOS模拟器中安装app 近期公司vue项目开发,目的是一 ...
- 安卓中java和js如何交互
1.安卓中java和js如何交互 在Android上怎样实现JAVA和JS交互呢?Android的webview是基于webkit内核的,webview中集成了js与java互调的接口函数,通过add ...
- iOS中UIWebView使用JS交互 - 机智的新手
iOS中偶尔也会用到webview来显示一些内容,比如新闻,或者一段介绍.但是用的不多,现在来教大家怎么使用js跟webview进行交互. 这里就拿点击图片获取图片路径为例: 1.测试页面html & ...
- iOS中UIWebView使用JS交互
iOS中偶尔也会用到webview来显示一些内容,比如新闻,或者一段介绍.但是用的不多,现在来教大家怎么使用js跟webview进行交互. 这里就拿点击图片获取图片路径为例: 1.测试页面html & ...
- [原]iOS中 Web 页面与 Native Code 的一种通信方式
在 iOS 开发中,Web 页面与 Native Code 通信可以分为两个方面: 1.Native Code 调用 Web 页面的方法:主要是调用页面中的 Javascript 函数. 2.Web ...
- JS 解决 IOS 中拍照图片预览旋转 90度 BUG
上篇博文[ Js利用Canvas实现图片压缩 ]中做了图片压缩上传,但是在IOS真机测试的时候,发现图片预览的时候自动逆时针旋转了90度.对于这个bug,我完全不知道问题出在哪里,接下来就是面向百度编 ...
- iOS中使用UIWebView与JS进行交互
iOS中使用UIWebView与JS进行交互 前一段忙着面试和复习,这两天终于考完试了,下学期的实习也有了着落,把最近学的东西更新一下,首先是使用UIWebView与JS进行交互 在webView中我 ...
- iOS中JS 与OC的交互(JavaScriptCore.framework)
iOS中实现js与oc的交互,目前网上也有不少流行的开源解决方案: 如:react native 当然一些轻量级的任务使用系统提供的UIWebView 以及JavaScriptCore.framewo ...
随机推荐
- 2. Linear Regression with One Variable
Speaker:Andrew Ng 这一次主要讲解的是单变量的线性回归问题. 1.Model Representation 先来一个现实生活中的例子,这里的例子是房子尺寸和房价的模型关系表达. 通过学 ...
- SCZ 20170812 T2 MFS
题面照例十分暴力,我再次重写一下吧-- 题目描述 有\(n\)个数构成的数列\(A\)元素为\(a_i\),你要构造一个数列\(B\),元素为\(b_i\),使得满足\(b_{i}>0,a_{i ...
- hdu4719 Oh My Holy FFF 线段树维护dp
题意:给你一个长度为n的数组v,你需要把这个数组分成很多段,你需要保证每一段的长度不能超过k我们设一共有m段,每一段右边界那个数为bi那么我们要使得sum(bi*bi-b(i-1))最大 (1< ...
- POJ 1655 Balancing Act ( 树的重心板子题,链式前向星建图)
题意: 给你一个由n个节点n-1条边构成的一棵树,你需要输出树的重心是那个节点,以及重心删除后得到的最大子树的节点个数size,如果size相同就选取编号最小的 题解: 树的重心定义:找到一个点,其所 ...
- 仿ATM程序软件
一.目标: ATM仿真软件 1 系统的基本功能 ATM的管理系统其基本功能如下:密码验证机制:吞锁卡机制:存取款功能:账户查询功能:转账功能等. 要求 要能提供以下几个基本功能: (1)系统内的相关信 ...
- Gym 102263 ArabellaCPC 2019 J - Thanos Power (DP,数学)
题意:有一个整数\(n\),每次可以对加\(10^x\)或减\(10^x\),问最少操作多少次能得到\(n\). 题解:对于某一位上的数,我们可以从\(0\)加几次得到,或者从前一位减几次得到.所以对 ...
- WSL ubuntu重置密码
1. 在powershell中切换到root: 2. 进入ubuntu: 3. 修改制定用户的密码: 4. 切换回默认的用户:
- DCL 数据控制语言
目录 授予权限(GRANT) 回收权限(REVOTE) 授予权限(GRANT) # 语法 mysql> help grant; Name: 'GRANT' Description: Syntax ...
- Hexo-使用阿里iconfont图标
Hexo-使用阿里iconfont图标 因为使用hexo搭建的博客中,大家并不懂都有什么图标,fa fa-xx就懵了,不知道都有什么. 首先,fa fa-xxx中的图标可以在 图标库 中寻找. (上面 ...
- 洛谷p1981 表达式求值
#include <iostream> #include <cstdio> #include <cstring> using namespace std; char ...