h5页面和app进行交互

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

一、react native开发的

1.h5向app发送消息,app 接收并操作

//同通过 window.postMessage 向 app 发送消息
window.postMessage(
      JSON.stringify({
          action: "login",//和app协商的时间方法
      })
);

2.app操作完成,向h5 返回消息,h5监听并处理 

// 获取app 返回的 值
/* ios交互 */
window.addEventListener("message", function (res) {
    try {
        if (JSON.parse(res.data).token) {
          
        }
    } catch (e) { console.log(e) }
});
/* 安卓交互 */
document.addEventListener("message", function (res) {
    try {
        if (JSON.parse(res.data).token) {
           
        }
    } catch (e) { console.log(e) }
});

 二、原生app

1.h5使用app方法:

 if (ios的) {
     window.webkit.messageHandlers.fn.postMessage({a:'xxx'})
  } else {
     window.android.fn({a:'xxx'})
 }

2.app使用h5方法

window['fn'] = function(){console.log('aaa')}
//h5将方法挂载到window,app直接调用

 文章来源地址https://www.toymoban.com/news/detail-548476.html

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

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

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

相关文章

  • 微信小程序web-view嵌入uni-app H5页面,通过H5页面传参给小程序进行转发分享页面,并通过点击转发出来的卡片,定向打开对应H5路径

    index.wxml  index.js 在H5项目的App.vue页面获取参数实现自动跳转到对应页面,包括携带的参数值

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

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

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

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

    2023年04月14日
    浏览(65)
  • 第4天:基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter

    1.原生开发 安卓一般使用java语言开发,当然现在也有kotlin语言进行开发。如何开发就涉及到具体编程了,这里就不详说了。简单描述就是使用安卓提供的一系列控件来实现页面,复杂点的页面可以通过自定义控件来实现。 2.使用H5语言开发 使用H5开发的好处有很多,可多端复

    2024年04月10日
    浏览(44)
  • Uniapp中App与H5交互

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

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

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

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

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

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

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

    2024年02月11日
    浏览(44)
  • Shopro商城 高级版 Fastadmin和Uniapp进行开发的多平台商城(微信公众号、微信小程序、H5网页、Android-App、IOS-App)

    Shopro商城无加密的开源源码( 可用于自营+外包项目(多主体) 、 可用于外包定制开发项目 ) shopro 商城,一款基于 uni-app 的前端模板商城。目前适配了(小程序+app+h5+公众号)。 主要功能:登录、注册、签到、富文本、分类、购物车、筛选、地址、商品评论、积分商城、拼团、

    2023年04月09日
    浏览(64)
  • uniapp webview h5和app交互通信传参

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

    2024年02月15日
    浏览(91)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包