安卓和ios拦截h5点击事件,这个函数事件必须是暴漏在window下的

安卓和ios拦截普通h5函数:

 <div onclick = "show(),window.android.show()"></div>
<script>
function show(){
      //如果需要传值,可以在show里添加参数,在上面的点击事件中直接进行传值就好
alert(1)
}
</script>

vue函数并没有直接暴漏在window下,vue的点击事件为@click,所以上面写法App方是拦截不到的

安卓和ios拦截vue点击事件:

<div id="box" @click="show('aaaa'),window.android.show('aaaa')"></div>  //括号内为传参内容,第一个show是为ios传值,点击的时候触发了在window里定义的函数,ios直接拦截到zhi这个函数,安卓可以直接拦截到vue里定义的函数
<script src="vue.js"></script>
<script>
function zhi(a){ //定义一个暴漏给window的函数,放在点击事件中,ios拦截函数是拦截的这个暴漏给window的函数
console.log(a)
}
new Vue({
el:"#box",
data:{ },
methods:{
show:function(a){
zhi(a); //a为一个参数,可以进行给ios和安卓进行传值
alert(1);
}
}
})
</script>
//和Android、ios交互的时候,给安卓的拦截字段为show,给ios拦截的字段为zhi

app内嵌vue h5,安卓和ios拦截H5点击事件的更多相关文章

  1. 用vue做app内嵌页遇到的坑

    公司要求用vue做一个微信端的网站,其中还包含一些app的内嵌页.开始的时候没想那么多,就直接用vue-cli搭了一个单页的vue项目,可随着项目越做越大,页面越来越多,问题就开始暴露出来了. 众所周 ...

  2. 使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等)

    使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等) 前言 移动端页面调试一直是好多朋友头疼的问题,iOS 由于其封闭的特性和整体较高的性能,整体适配相对好做,调试 ...

  3. 移动端开发利器vConsole.js,app内嵌H5开发时调试用

    vConsole:一个轻量.可拓展.针对手机网页的前端开发者调试面板,主要还是用于内嵌app页面时在手机上进行调试,打印完全和在PC端一样,方便大家找出问题所在. 不说废话直接进入主题,vConsol ...

  4. app内嵌web的一些问题记录

    问题(1)webview里面出现大图预览,点击手机上的返回,应该是图片预览消失 问题(2)键盘输入的时候,键盘会把输入框遮挡 ------------------------------------- ...

  5. 客户端内嵌Vue页面

    目前很多应用都存在网页端和客户端形式,例如常用的:钉钉.微信等.按传统的开发形式,需要为客户端开发一套界面.基于当前Web应用可以利用三大前端框架和UI框架快速开发出各种酷炫的界面,于是出现了客户端嵌 ...

  6. 记录Vue和Jquery混合开发中关于点击事件的一个bug

    最近比较急的接手了公司的微信服务号项目,采用的技术栈主要是jq和vue.在项目中之前碰见过jq写的$().on('click',function(){})点击事件不起作用,只能写在vue实例中的met ...

  7. IOS微信浏览器点击事件不起作用问题

    问题: $(document).on("click",".btn",function(){alert("1")}); 在微信浏览器上点击不起 ...

  8. ios下app内嵌h5页面是video适配问题

    ios下做新闻详情用h5页面实现然后打包到app中,其中新闻详情页会有视频,安卓下video的poster可以做到适应video大小,但是ios下会按照poster图片大小将video等比撑大,但是视 ...

  9. app内嵌h5页面在ios手机端滑动卡顿的解决方法

    1.带滚动条的dom需加样式 -webkit-overflow-scrolling: touch;2.去掉 width:100%; height:100%

随机推荐

  1. 什么是ORM?

    什么是ORM? MVC框架中重要的一部分就是ORM,实现了数据模型与数据库的解耦,即数据模型不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库. ORM是对象关系映射的简称,主要任务是: 根 ...

  2. Jmeter之https脚本录制

    jmeter录制脚本时,跟http脚本录制主要区别是,https录制需要添加安全证书.   一.jmeter代理服务器及证书配置. 1.打开jmeter,右键测试计划添加线程组,右键工作台--> ...

  3. php处理ajax请求,ajax+php实现跨域

    第一种方法通过设置Access-Control-Allow-Origin来实现跨域 1.首先要了解什么是域? 什么是域,简单来说就是协议+域名或地址+端口,3者只要有任何一个不同就表示不在同一个域.跨 ...

  4. 【转载】curl 模拟 GET\POST 请求,curl查看响应头 以及 curl post 上传文件

    补充说明:curl查看响应头 curl -I "http://www.baidu.com"HTTP/1.1 200 OK #HTTP协议 HTTP 返回码Server: Tengi ...

  5. nginx+uWSGI+django+virtualenv+supervisor发布web服务器

    nginx+uWSGI+django+virtualenv+supervisor发布web服务器   导论 WSGI是Web服务器网关接口.它是一个规范,描述了Web服务器如何与Web应用程序通信,以 ...

  6. 单链表ADT

    本博客第一篇学术性博客,所以还是写点什么东西: 首先这篇博客以及以后的博客中的代码尽量百分之90是自己写过的: 可能有部分图片和代码是我认为别人更好的故摘抄下来, 本人三观正确,所以一定会表明来源: ...

  7. Python爬虫开源项目代码,爬取微信、淘宝、豆瓣、知乎、新浪微博、QQ、去哪网等 代码整理

    作者:SFLYQ 今天为大家整理了32个Python爬虫项目.整理的原因是,爬虫入门简单快速,也非常适合新入门的小伙伴培养信心.所有链接指向GitHub,祝大家玩的愉快 1.WechatSogou [ ...

  8. CentOS6.5 - linux在虚拟机连接主机(使用nat)

    NAT模式:是虚拟系统借助NAT(网络地址转换)功能,通过宿主机器所在的网络来访问公网.也就是说,使用NAT模式可以实现在虚拟系统里访问互联网. NAT模式下的虚拟系统的TCP/IP配置信息是由VMn ...

  9. 普天同庆,微博开通,从今以后,努力用功! 狗屎一样的顺口溜!Q狗屎!!狗屎。。。。。 测试。。测试。。。没刷过微博。屯里来的。看看啥效果

    普天同庆,微博开通,从今以后,努力用功! 狗屎一样的顺口溜!Q狗屎!!狗屎..... 测试..测试...没刷过微博.屯里来的.看看啥效果

  10. Openflow协议详解

    http://www.h3c.com/cn/d_201811/1131080_30005_0.htm# 1 OpenFlow背景 转发和控制分离是SDN网络的本质特点之一 .在SDN网络架构中,控制平 ...