专注前端行业精选
(安卓/IOS)APP调用H5事件,H5调用APP事件
作者:鹏仔先生日期:2021-04-26 15:30:44浏览:2237分类:JavaScript
上篇文章说了最近开发H5可视化编辑器,生成的H5需要嵌套在原生APP中,那么必然需要调用原生app的事件或者app调用我H5的事件。
因为,H5首页内容可能会添加的丰富比较多,需求怕一次请求加载慢,所以让搞了分页,无限滚动加载,但是app把H5的滚动禁掉了,所以H5无法获取滚动事件,只能是app到底触发H5的事件,那么app如何触发H5事件。
我是vue开发的,在mounted中,按下放方式定义,onScrollBottom为与app定义的事件名,this.onScrollBottom是我H5的事件,我两个写的一样,大家可自行区分一下。
mounted() { window.onScrollBottom = this.onScrollBottom; },
然后,我们在methods中写自己的方法,到达底部app调用咋们事件,让页面++,调用页面接口...,这样就实现了APP调用H5事件。
// 到底触发(APP中使用) onScrollBottom(){ this.pageNum++; this.init(); }
H5调用APP事件
APP分为IOS与安卓,所以我们调用前需要做判断,判断是ios调用ios的方法,安卓调用安卓的
调用安卓,jump为安卓的方法,方法名自己修改,(data)为H5给安卓传的参数,建议调用执行前先判断window.Android是否存在
if(window.Android){ window.Android.jump(data) }
语法
window.Android.方法名(参数)
调用IOS,jump为IOS的方法,(data)为参数
window.webkit.messageHandlers.jump.postMessage(data);
语法
window.webkit.messageHandlers.方法名.postMessage(参数);
猜你还喜欢
- 10-08 vue按钮限制连点封装 自定义指令限制连点
- 09-14 nvm常用命令有哪些?nvm如何切换node版本?nvm如何下载node?
- 08-19 使用HBuilderX将vue或H5项目打包app
- 07-15 小程序嵌入网页向小程序跳转并传参,微信小程序中实现公众号授权获取openId
- 07-13 vue中实现文件批量打包压缩下载(以及下载跨域问题分析)
- 07-08 uniapp调用地图,进行位置查询,标记定位
- 11-05 js截取字符串前几位或者截取字符串后几位
- 10-25 js替换字符串某个字符,js修改字符串中指定字符
- 10-20 uniapp中text-indent不起作用,uniapp首行缩进不管用如何解决?
- 09-26 vue给单独组建的body添加类名
- 08-12 elemtnui 表格如何修改某行文字颜色
- 08-03 vue中调用百度地图 获取经纬度
取消回复欢迎 你 发表评论:
- 搜索
- 随机tag
暂无评论,来添加一个吧。