-
让品牌有温度、有情感
专注品牌策划15年
h5与原生交互的几种方式（h5与原生交互的几种方式有哪些）
发布时间：2023-04-27 21:27:10
稿源：
创意岭 阅读：
281
大家好！今天让创意岭的小编来大家介绍下关于h5与原生交互的几种方式的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。
创意岭作为行业内优秀企业，服务客户遍布全国，设计相关业务请拨打175-8598-2043，或微信：1454722008
本文目录:
一、iOS和h5交互(WKWebView,UIWebView)
app 混合开发场景中 常常涉及到h5 和原生数据通信，大致分为2类 一个是 原生 向 h5 主动通信，一个是 h5 主动向 原生通信。
iOS 中加载h5的 控件有2种，UIWebView 和 WKWebView,目前新提交的app 必须使用WKWebView 才能提交审核。已经上架审核成功的app 目前没有强制要求必须用WKWebView。
原生通过监听url 变化实现，当url 变化的时候 ,会触发
h5 主要逻辑如下
除了 通过url 变化 的监听外，我们还有其他方法，比如通过 JSContext 向webView 注入。具体步骤如下
原生逻辑：
第一步：新建1个继承 JSExport 的 代理 ，新建1个继承该协议的类，协议中 opencame 为和 前端约定好的 通讯方法
第二步：webview 加载成功后 ，在 - (void)webViewDidFinishLoad:(UIWebView *)webView 注入,注入对象名称 为 cth5bridge
第三步：h5 调用方式如下，cth5bridge 为注入对象名称，opencame 为 约定的方法
假设1个场景，用户访问h5 界面情况下，我们要通知 用户token 要更新
原生主要逻辑
h5 主要逻辑
假设1个场景，用户点击1个活动baner,通知原生 以一个新的界面 打开1个外部活动h5界面
和上面类似，我们也可以在 - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler 通过监听 url 变化来实现
原生主要逻辑
h5 主要逻辑
我们也可以这么做
第一步 原生 注册 监听方法 showH5
第二步 H5 调用 和原生约定好的方法 showH5，h5 处理的时候要区分 iOS 和 android，下面 只是考虑iOS
第三步 原生在 - (void)userContentController:(nonnull WKUserContentController *)userContentController didReceiveScriptMessage:(nonnull WKScriptMessage *)message 进行监听
和上面类似，假设1个场景 通知H5 刷新用户token
updatetoken 是和前端H5 约定好的 通信方法，123是传递的数据，一般 以 json 字符串传递
原生主要逻辑
H5主要逻辑
需要在windows 上 绑定方法
参考链接： https://blog.csdn.net/dolacmeng/article/details/79623708
二、H5与小程序数据交互
功能已通过原生+vue混合开发的方式实现了，现需要将这个功能原封不动的搬到微信小程序。综合各方面评估，选择了微信小程序套webview的方式实现（若时间允许，建议还是通过小程序实现）。
采用小程序webview的方式，可以复用大部分H5页面，但H5调用的原生方法还是需要重新实现。实现方式主要分以下几种情况（当然也可以通过jssdk的方式去实现 https://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3 ，但不在本文讨论范围内）：
(1) 获取照片，可通过html的input标签实现；
(2) 获取经纬度，可通过webview的url拼接参数实现；
(3) 人脸识别，可通过H5调起刷脸小程序的方式实现。
下面主要描述下第3种情况的实现方式。
H5与小程序交互所涉及的数据部分主要包括两块：
(1)H5如何将数据传给小程序？
url参数拼接。
(2)小程序如何将数据传给H5？
wx.setStorage及wx.getStorage。
详细流程如图所示。
webview小程序pageA调起人脸小程序pageB，pageB回退到pageA。因为pageA重新设置了webview的url，其所嵌套的H5与历史H5页面无法进行数据共享，导致业务功能无法继续。解决办法就是调起人脸小程序之前，在H5页面先将必要的信息通过 localStorage.setItem 保存，人脸识别结束回到H5页面时，再通过 localStorage. getItem 获取所需要的业务数据。
三、H5&&Android交互
JS调用Android原生方法，参数须是Java的内置类型：int、String等，若是JavaScript对象，需字符串化，否则Android无法正确接收；
JS调用Android原生方法，返回值是内置类型：int、String等，JS能够正确接收。若是Java自定义类型，则JS接收不到正确数据；
JS可以通过Android原生方法的返回值获取内置类型的参数，如String
若需要互传复杂类型的对象，双方须以String对媒介，以各自语言的Json工具类进行相互转化；
四、h5掉ios原生的方法
方法如下：
之前也总结过h5调用原生的方法，但是写的不全。像调完原生之后，原生往往会有返回值，或者根据返回值的不同回调h5的方法。
1.判断机型。
2.调取原生方法之后的回调方法（回调的方法名跟原生约定好，你们方法名需一致，譬如此处规定接收方法为getResult），在created里面注册一下回调的方法。
以上就是关于h5与原生交互的几种方式相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。
推荐阅读：
potato官方最新版本下载苹果（potato官方下载苹果版下载）
赣公网安备 50019002502384号
