React.js/HTML5和iOS双向通信
最近,我使用WKWebView和React.js进行双向通信,自己写了React.js嵌入到Native中。
Native操作Web,通过两种方式传值
第一种,通过JS传值给Native
通过这种方式,可以通过Swift执行DOM操作,顺便说一句,webView.evaluateJavaScript返回脚本执行结果的内容。这个处理程序似乎是在主线程上执行的。
Native调用JS代码方法如下:
let str = "payResult(true)" |
Javascript处理逻辑方法如下:
payResult = value => { |
如果JS的payResult方法没有调用,那就加上这样一句话window.payResult,有可能被组件屏蔽无法全局调用。
constructor(props) { |
第二种,通过get请求传值
通过get请求方式将参数传到js的请求URL链接中。
var url = "" |
react.js通过URL拼接方式解析传递的参数,方法如下:
var params = {} |
通过这种方式params.uid | param.topic | param.type 来获取参数
Native操作Web,通过两种方式传值
Native操作
- 实例化WKWebViewConfiguration和WKUserContentController,userController在JavaScript的注册处理调用名称。并设置实现WKScriptMessageHandler协议的代理。
let webConfiguration = WKWebViewConfiguration() |
- 通过WKScriptMessageHandler协议进行监控
func (_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) { |
关于解析,和Web进行协议,我在H5写的代码通过message传过来的是一个字典类型 {content: ‘…’}。
web端操作
H5如何传递方法给native?
传值方法如下,iOS和Android接受的方法不同,要单独进行处理:
window.htmlCallMobileDeja = function(handlerMethod, parameters){ try { |
javascript通过这种方式进行传值
var dic = { |
React.js/HTML5和iOS双向通信的更多相关文章
- Bodymovin:Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画
转自:https://www.cnblogs.com/zamhown/p/6688369.html 大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画 ...
- 13个精选的React JS框架
如果你正在使用 React.js 或 React Native 创建用户界面,可以试一试本文推荐的这些框架. React.js 和 React Native 是流行的用户界面(UI)开发平台,且都是开 ...
- 如何用 React Native 创建一个iOS APP?(三)
前两部分,<如何用 React Native 创建一个iOS APP?>,<如何用 React Native 创建一个iOS APP (二)?>中,我们分别讲了用 React ...
- 如何用 React Native 创建一个iOS APP?(二)
我们书接上文<如何用 React Native 创建一个iOS APP?>,继续来讲如何用 React Native 创建一个iOS APP.接下来,我们会涉及到很多控件. 1 AppRe ...
- 如何用 React Native 创建一个iOS APP?
诚然,React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 Reac ...
- React.js学习
React.js学习之环境搭建 1 工欲善其事必先利其器:前端开发工具 1.1 WebStorm和Sublime Text Sublime Text:作为代码编辑器,Sublime Text的优点如下 ...
- 前端迷思与React.js
前端迷思与React.js 前端技术这几年蓬勃发展, 这是当时某几个项目需要做前端技术选型时, 相关资料整理, 部分评论引用自社区. 开始吧: 目前, Web 开发技术框架选型为两种的占 80% .这 ...
- React JS和React-Native学习指南
自己在学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull requests! React-Native学习指南本指南汇集React- ...
- React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
随机推荐
- vector内部的实现1
写vector的内部方法 #include<vector> using std::vector; //写一个动态内存 class CA{ int a; public: CA(int i){ ...
- java内存区域与内存溢出异常(1)
一. 运行时数据区域 java虚拟机在执行Java程序的过程中,会把它所管理的内存划分为若干个不同的数据区域偶 1.程序计数器 程序计数器是一块较小的内存空间,作用是当前线程所执行的字节码的行号指示器 ...
- 小白学习之pytorch框架(5)-多层感知机(MLP)-(tensor、variable、计算图、ReLU()、sigmoid()、tanh())
先记录一下一开始学习torch时未曾记录(也未好好弄懂哈)导致又忘记了的tensor.variable.计算图 计算图 计算图直白的来说,就是数学公式(也叫模型)用图表示,这个图即计算图.借用 htt ...
- JVM(三)内存结构图
JVM内存结构图:
- js实现新闻滚动-单行滚动或者多行滚动
注明:都是转载. 先说单行滚动: --------直接复制以下代码即可试验 转载http://www.3lian.com/edu/2011/06-30/4986.html----------- < ...
- React Native 开发
摘自:<React Native 开发之 IDE 选型和配置> 一个在不断更新的有关React Native讲解:<江清清的技术专栏> ES5和ES6的区别:<React ...
- screen 用法
登陆Linux服务器跑程序, 担心ssh连接被中断后,导致跑了一半的任务被强制终止. 一个比较好的办法是使用 screen 命令, 下面是使用说明 类型 命令 备注 创建 screen 查看 scre ...
- mysql_secure_installation 安全安装(用于生产环境设置)
编译安装完mysql5.6,如果用于生产环境,最好执行mysql_secure_installation来做一些常规化安全设置. 需要提前将~mysql/bin加入环境变量 /apps/mysql// ...
- sql的书写顺序
例:select t.* from (select * from t_user where isDelete = 1 limit 0,10) t order by t.qq select from ...
- Jmeter阶梯式压测
https://www.cnblogs.com/Zfc-Cjk/p/11639219.html 什么是阶梯式压测? 阶梯式压测,就是对系统的压力呈现阶梯性增加的过程,每个阶段压力值都要增加一个数量值, ...