app内嵌vue h5,安卓和ios拦截H5点击事件
安卓和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点击事件的更多相关文章
- 用vue做app内嵌页遇到的坑
公司要求用vue做一个微信端的网站,其中还包含一些app的内嵌页.开始的时候没想那么多,就直接用vue-cli搭了一个单页的vue项目,可随着项目越做越大,页面越来越多,问题就开始暴露出来了. 众所周 ...
- 使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等)
使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等) 前言 移动端页面调试一直是好多朋友头疼的问题,iOS 由于其封闭的特性和整体较高的性能,整体适配相对好做,调试 ...
- 移动端开发利器vConsole.js,app内嵌H5开发时调试用
vConsole:一个轻量.可拓展.针对手机网页的前端开发者调试面板,主要还是用于内嵌app页面时在手机上进行调试,打印完全和在PC端一样,方便大家找出问题所在. 不说废话直接进入主题,vConsol ...
- app内嵌web的一些问题记录
问题(1)webview里面出现大图预览,点击手机上的返回,应该是图片预览消失 问题(2)键盘输入的时候,键盘会把输入框遮挡 ------------------------------------- ...
- 客户端内嵌Vue页面
目前很多应用都存在网页端和客户端形式,例如常用的:钉钉.微信等.按传统的开发形式,需要为客户端开发一套界面.基于当前Web应用可以利用三大前端框架和UI框架快速开发出各种酷炫的界面,于是出现了客户端嵌 ...
- 记录Vue和Jquery混合开发中关于点击事件的一个bug
最近比较急的接手了公司的微信服务号项目,采用的技术栈主要是jq和vue.在项目中之前碰见过jq写的$().on('click',function(){})点击事件不起作用,只能写在vue实例中的met ...
- IOS微信浏览器点击事件不起作用问题
问题: $(document).on("click",".btn",function(){alert("1")}); 在微信浏览器上点击不起 ...
- ios下app内嵌h5页面是video适配问题
ios下做新闻详情用h5页面实现然后打包到app中,其中新闻详情页会有视频,安卓下video的poster可以做到适应video大小,但是ios下会按照poster图片大小将video等比撑大,但是视 ...
- app内嵌h5页面在ios手机端滑动卡顿的解决方法
1.带滚动条的dom需加样式 -webkit-overflow-scrolling: touch;2.去掉 width:100%; height:100%
随机推荐
- 一位资深Java架构师的晋级心得
架构师是什么? 是一个既需要掌控整体又需要洞悉局部瓶颈并依据具体的业务场景给出解决方案的团队领导型人物.一个架构师得需要足够的想像力,能把各种目标需求进行不同维度的扩展,为目标客户提供更为全面的需求清 ...
- ionic3+angular4的三方微信开发(登录and分享)
登录: 1.在微信开放平台注册开发者帐号,并拥有一个已审核通过的移动应用,并获得相应的AppID和AppSecret,申请微信登录且通过审核后,可开始接入流程. 2.通过cordova添加微信插件:进 ...
- 终端的rz命令,覆盖原文件。
不覆盖:rz 覆盖 同名文件:rz -y
- Struts中的匹配规则
<constant name="struts.action.extension" value="action,do,htm"/> 表示之后后缀名为a ...
- MySQL中MyISAM与InnoDB区别
原文:https://blog.csdn.net/frycn/article/details/70158313?utm_source=copy InnoDB:支持事务处理等不加锁读取支持外键支持行锁不 ...
- sorry
登录的时候密码忘了 重置了之后才登录上 这是有多久没登录了 好囧呀 近段时间学习Python也断断续续的 马上春节要到了 随后的20多天里 应该更没有时间学习了 想想都很忧伤 明明想很努力来着 但是总 ...
- L1-063 吃鱼还是吃肉
国家给出了 8 岁男宝宝的标准身高为 130 厘米.标准体重为 27 公斤:8 岁女宝宝的标准身高为 129 厘米.标准体重为 25 公斤. 现在你要根据小宝宝的身高体重,给出补充营养的建议. 输 ...
- makefile笔记6 - makefile条件判断
使用条件判断,可以让 make 根据运行时的不同情况选择不同的执行分支.条件表达式可以是比较变量的值,或是变量和常量的值. 一.示例 下面的例子,判断\(\$\)(CC)变量是否"gcc&q ...
- wpf binging(五) 数据的转换与验证
1.数据的验证,有时候需要验证同步的数据是否正常 需要派生一个类 ValidationRule 再把这个类指定给binging 进行验证 在这里如果验证不通过 textbox就会变成红色并且发出警告数 ...
- c语言——单链表分拆——头插法创建链表,尾插法生成链表
#if 1 #include<stdio.h> #include<stdlib.h> #include<iostream> using namespace std; ...