H5和app混合开发的通讯方式

已于 2023-08-01 13:53:29 修改
阅读量989 收藏 3
点赞数
分类专栏： 移动端开发 文章标签： 前端 webkit html5
于 2023-02-14 16:12:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38361229/article/details/129028290
版权
本文介绍了H5与App混合开发中采用的通讯方式，包括安卓的JsBridge和iOS的window.webkit。H5通过这两个对象调用原生方法，而原生代码则将方法挂载到全局让H5访问。JSBridge作为连接JS与Native的桥梁，是混合式开发的核心，允许双向通信：JS调用Native和Native主动调用JS。
摘要由CSDN通过智能技术生成

1、安卓，采用的是：JsBridge
2、IOS，采用的是：window.webkit


其实流程比较简单：
内嵌在原生webview的h5，可以通过JsBridge/window.webkit这2个对象访问原生的方法
但是原生要访问h5的方法，h5需要把方法挂载到全局


以下是h5调用原生方法：

export const backApp = function() {
   
	const u = navigator.userAgent
	if
最低0.47元/天 解锁文章
APP与H5交互的混合开发模式
BgScratch的博客
09-29 170
在WebView中，我们可以通过重写WebViewClient的shouldOverrideUrlLoading方法，拦截H5页面的URL请求，并在其中处理自定义的URL scheme来实现H5调用APP方法的功能。然后，通过APP调用H5的方法和H5调用APP的方法，我们可以实现双向的数据交换和功能调用。在上述代码中，我们首先通过findViewById方法获取到WebView组件的实例，然后使用loadUrl方法加载指定的URL，这里的URL可以是你想要嵌入的H5页面的地址。
H5与APP混合开发通信交互记录
呱呱的博客
12-28 792
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
H5与APP交互
weixin_47166787的博客
06-24 625
JSBridge
uniapp内嵌的webview H5与应用通信
最新发布
m0_49083276的博客
11-25 452
1、找到index.html引入依赖2、在需要通讯处发送消息。
APP如何与H5通信？
LuckyWinty的博客
06-17 288
点击上方前端Q，关注公众号 回复加群，加入前端Q技术交流群postMessagepostMessage可以安全地实现跨源通信。从广义上讲，一个窗口可以获得对另一个窗口的引用（比如targetWindow = window.opener），然后在窗口上调用targetWindow.postMessage()方法分发一个`MessageEvent`[1]消息。具体用法参考potsMess...
H5与原生app交互
weixin_43866678的博客
10-22 266
function isAndroid_ios(){ //区别and还是ios let u = navigator.userAgent; let isAndroid = u.indexOf(‘Android’) > -1 || u.indexOf(‘Linux’) > -1; //g let isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS...
H5 与 App、网页之间的通信
qq_39025670的博客
03-20 1369
本文整理工作中 H5 嵌入 Android、iOS 与 PC 网页后，如何与各端通信。（提供 H5 端的代码）
uniapp中前端如何和原生混合开发开发app
01-20
在uniAPP中，当项目...通过以上步骤，你可以在uniAPP中实现前端与原生的混合开发，充分利用原生平台的功能，增强APP的用户体验和功能多样性。记得在整个过程中保持良好的文档记录和沟通，以提高开发效率和减少错误。
vue与原生app的对接交互的方法(混合开发)
10-17
在Vue与原生APP混合开发中，主要通过URL Scheme、window对象暴露接口、Vue生命周期钩子等方式实现两者的对接交互。开发者需要注意交互时机的选择，避免因为生命周期钩子的执行顺序导致的问题。同时，对于需要立即...
原生开发、H5开发和混合开发的区别
ruanjiankaifagp的博客
10-17 492
目前市场上主流的APP分为三种：原生APP、Web APP（即HTML5）和混合APP三种，相对应的定 制开发就是原生开发、H5开发和混合开发。那么这三种开发模式究竟有何不同呢？下面我们就分别从这三者各自的优劣势来区分比较吧！
h5与app通讯
lzccheng
12-18 571
github: https://github.com/marcuswestin/WebViewJavascriptBridge
h5与原生app通讯(WebViewJavascriptBridge)
weixin_47409897的博客
07-20 806
【代码】h5与原生app通讯(WebViewJavascriptBridge)
H5如何与原生App(ios,安卓,RN)通信？
frontend_frank的博客
10-25 2362
关注前端公众号前端每日一博，每日为你分享一篇前端系列博文。永不断更！前言为了提高开发效率，开发人员往往会使用原生app里面嵌套前端h5页面的快速开发方式，这就要涉及到h5和原生的相互调...
HTML5+ App开发入门
weixin_33909059的博客
04-16 398
HTML5 Plus应用概述 HTML5 Plus移动App，简称5+App，是一种基于HTML、JS、CSS编写的运行于手机端的App，这种App可以通过扩展的JS API任意调用手机的原生能力，实现与原生App同样强大的功能和性能。 HTML5 Plus规范 通过HTML5开发移动App时，会发现HTML5很多能力不具备。为弥补HTML5能力的不足，在W3C中国的指导下成立了www.ht...
h5与app的交互
我的博客
09-04 1183
之前又项目需求，要h5与app做信息交互，说白了就是互相传递方法携带参数： 做法如下 h5给app传方法 router.beforeEach((to, from, next) => { if (to.query.platform) { store.state.platform = to.query.platform } next(); }) Vue.prototype.bridges = { jumpLink(companyAddress,longitude,latitude,companyName,
h5逻辑_H5+app 混合开发
qq_43260366的博客
04-17 2436
return 'iOS' // 手机iOs } else if(navigator . userAgent . search(/ android / i) >= 0) {return 'Android' // 手机安卓 } else if(navigator . userAgent . search(/ windows phone / i) >= 0) {
H5+app -- 自动更新
admin99900的博客
12-08 466
　　一、最近做了一个app自动更新功能，用的基本都是网上找得到的。 　　　　1、h5+规范 ： http://www.html5plus.org/doc/zh_cn/maps.html 　　　　2、环形进度条插件：http://www.jq22.com/jquery-info4495（不知道什么原因，下载的时候，没有显示任何提示，所以人为加个下载的提示） 　　二、本来用的mui...
Hybrid APP技术解析：混合移动应用的开发方案
重点讨论了基于WebView、NativeUI和小程序的不同混合开发方式，并针对特定业务需求，选择了适合的Hybrid架构方案。" 在移动开发领域，Hybrid App作为一种融合了Native技术与Web技术的开发方式，已经广泛应用于各种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值