H5端和原生APP进行交互

这篇具有很好参考价值的文章主要介绍了H5端和原生APP进行交互。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

浅浅记录一下吧!!!

H5端和原生APP(安卓、IOS)进行数据交互

H5调用APP事件方法:

let deiviceSystem = /(iphone|mac|idad)/i.test(navigator.userAgent.toLowerCase());

if(deiviceSystem) {
    // ios
    window.webkit.messageHandlers.fn.postMessage('传参');
} else {
    // android
    window.android.fn('传参');
}

这里的 fn 是和APP开发人员协商好的方法名,APP端写逻辑代码,H5端直接调用APP的方法;

()里面可以向APP端传递数据,如果是引用数据类型的话,建议转成字符串再传递。

APP调用H5端事件方法:

window['fn'] = function(event) {
    console.log(enevt);
}

H5端定义一个事件并绑定到全局中,APP端可以直接调用fn即可,console打印结果就是APP传递给H5端的数据文章来源地址https://www.toymoban.com/news/detail-836561.html

到了这里,关于H5端和原生APP进行交互的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue.js uni-app 混合模式原生App webview与H5的交互

    在现代移动应用开发中,原生App与H5页面之间的交互已经成为一个常见的需求。本文将介绍如何在Vue.js框架中实现原生App与H5页面之间的数据传递和方法调用。我们将通过一个简单的示例来展示如何实现这一功能。 效果图如下: 首先,我们需要在Vue.js项目中引入原生App与H5页面

    2024年02月16日
    浏览(72)
  • h5页面如何与原生交互

    本文讲述h5页面跟原生通信,比如在app内,调用相机,获取相册内的图片,在app内拉起微信小程序等等,h5页面没有这么多权限能够直接调用移动端的原生能力,这个时候就需要与原生进行通讯,传递一个信号给原生这边,然后原生直接调用手机端的能力。 下面分别讲解h5与

    2024年02月16日
    浏览(43)
  • Android与H5交互 -- 点击H5跳转到 Android原生 页面 ,webview与h5(js)交互

    Android与H5交互 app开发过程中,利用原生+h5模式来开发是比较常见的 下面案例演示的是:原生调起一个H5页面,然后H5点击跳转到原生 WebViewActivity页面 调用H5 ,点击H5链接 跳转到原生MainActivity页面 注意 别忘了 !-- 添加网络权限 -- 一、清单文件,增加的配置 data的数据就是H5

    2023年04月14日
    浏览(72)
  • 移动端 h5和原生交互的方式

    一、h5传递给原生WebView的数据协议 传递的是个json字符串: id:这次操作的id,回调时会再传回来。因为交互有可能是异步的,对同一个接口调用多次时,回调时以id来区分是哪一次。id由js自己定义保证唯一即可,简单的做法是使用Math.random() action:操作名称,取名应该能反映

    2024年01月25日
    浏览(49)
  • Uniapp中App与H5交互

    Uniapp开发的App要与Uniapp开发的H5进行交互   Uniapp进行数据交互的话是使用了Unaipp官方文档当中的web-view,但是官方文档当中的说明也不是很通俗易懂,之后就去网上找了好久,也试了很多次,终于实现了App与H5的交互。 web-view 首先呢web-view是一个 web 浏览器组件,可以用来承载

    2024年02月08日
    浏览(45)
  • Hybrid App(原生+H5)开发

    市面上主流的hybrid app框架主要有 React Native:由FaceBook开发,使用JavaScript和React来构建原生应用程序 Flutter:由Google开发,使用Dart语言。Flutter使用自己的渲染引擎 Ionic:基于 Web 技术(HTML、CSS 和 JavaScript),使用 Angular 框架。Ionic 提供了一组 UI 组件和工具,使开发人员能够构

    2024年02月05日
    浏览(40)
  • App与H5交互的几种方式

    1、直接调用App的定义的方法 首先我们需要判断当前App的客户端是Ios还是Android,针对不同的客户端我们需要调用不同的方法。 2、调用方法获取数据 这种方法和第一种方法一致,只不过是Ios与Android返回的值不同。 3、暴露方法给App调用传值 在很多时候并不一定是H5去调用App,

    2024年02月11日
    浏览(50)
  • uniapp app的webview与h5交互操作

    app里的webview与h5交互操作,需要在h5页面加点代码,然后才能执行app里的方法 官方地址 在nvue页面里才能实现与h5的交互,设置webview的高度

    2024年02月11日
    浏览(47)
  • uniapp webview交互以及h5传参到app

    app端,onPostMessage在nvue页面下接受参数,message在vue页面下接受参数 链接后拼接传参,只在一开始能传 方法传参 H5端,我这是用vue2写的 在index.html页面加上这个 在首页接受参数 往APP传参 接受APP的方法传参,变量跟data里面的变量绑定

    2024年02月16日
    浏览(52)
  • uniapp webview h5和app交互通信传参

    app端,onPostMessage在nvue页面下接受参数,message在vue页面下接受参数 链接后拼接传参,只在一开始能传 方法传参 H5端,我这是用vue2写的 在index.html页面加上这个 在首页接受参数 往APP传参 接受APP的方法传参,变量跟data里面的变量绑定

    2024年02月15日
    浏览(94)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包