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直接调用

h5页面和app进行交互相关推荐

H5页面与app的交互（jsBridge）和小程序的交互（weixin-js-sdk）
各端引用H5页面,H5跳回各端交互. 1.H5页面与app的交互(jsBridge): 在main.ts里面: const ua = window.navigator.userAgent; let A ...
html5页面和app的区别,H5页面与APP区别何在
APP相信大家都非常熟悉,就是手机里经常安装的软件程序,它都需要经过下载安装的步骤才能打开产品进行操作.不过H5页面和APP却有比较大的区别,它不需要经过下载安装,直接能够在浏览器和微信等社交平台中打 ...
android 打开h5文件下载,微信h5页面下载app —— 安卓直接下载apk文件包,IOS跳转AppStore的实现代码...
需求:微信h5页面下载app -- 安卓直接下载apk文件包,IOS跳转AppStore 分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX有合作的应用,否则也不 ...
微信h5页面下载app —— 安卓直接下载apk文件包,IOS跳转AppStore的实现代码
需求:微信h5页面下载app -- 安卓直接下载apk文件包,IOS跳转AppStore 分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX有合作的应用,否则也不 ...
html5页面跳转方式,H5页面跳转的交互设计方法
今年做了大量的H5项目,遇到了很多坑,有自家的也有第三方的,在这个过程中get到了一些之前不具备的知识,所以这一篇,就简单分享一下这方面的话题吧. 一.传统的MPA 首先,说一个比较古老的东西,叫做M ...
webview调用ios或者安卓的方法（内嵌h5页面调用app原生方法）
1.配合使用调用app原生的方法(h5页面不需要回调和数据) 实例1 //通知客户端,token失效 callTokenLostToApp(){let boswer=vm.config.getBrow ...
h5与小程序服务器如何辨别,小程序丨教你六招，快速区分H5页面还是APP页面
限制的H5技术和原生APP的技术很多类似或者实现效果很相像,不仔细去观察,大多人不会察觉两种有何不同.第九程序帮大家整理出比较容易判断的一个APP页面是原生的还是H5页面的方法. 希望可以帮到大家,以 ...
视频H5页面/视频app怎么做？
一.登录应用之星网站,注册成会员,并激活账号.(非激活账号将不能进行应用制作). 二.点击首页"应用制作"按钮. 三.进入制作页面,点击"高级模式"--> ...
小程序接入h5页面_微信小程序跳转外部链接（h5页面）以及数据交互
最近项目有个需求,在微信小程序中跳转外部链接完成相关的操作,操作完成后返回微信小程序的相关页面. 1.跳转外部链接(官方文档) 1)入口 //跳转到入口 wx.navigateTo({url: '.. ...

h5页面和app进行交互

h5页面和app进行交互相关推荐

最新文章

热门文章