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%
随机推荐
- 信用卡欺诈数据的分析-excel篇
本篇文章为大家提供了数据集分析的思路和步骤,同时也分享了自己的经验. 一.背景 反欺诈是一项识别服务,是对交易诈骗.网络诈骗.电话诈骗.盗卡盗号等行为的一项风险识别.其核心是通过大数据的收集.分析和处 ...
- Java代码调用服务器上的Shell脚本
Java代码调用服务器上的Shell脚本 这里主要是因为我们报表平台有用到用户手工录入的数据作为结果数据且需要纳入saiku去展示 如我们所知,saiku不会自动刷新,所以需要在数据更新接口中调用服务 ...
- 文件操作fopen
这块所谓的"文件操作"就是把文件的内容读进程序,然后根据具体的格式进行解析,或者是显示,或者是修改. 也就是把一个文件加载到程序里面,然后对其进行修改. 文件操作就三步(固定的三步 ...
- ceph版本号
概述 第一个 Ceph 版本是 0.1 ,要回溯到 2008 年 1 月.多年来,版本号方案一直没变,直到 2015 年 4 月 0.94.1 ( Hammer 的第一个修正版)发布后,为了避免 0. ...
- 使用idea启动springMVC+Hibernate其他项目
打开项目后打开Project Structure 点开左边的Libraries 加入依赖包 点开左边的Moudules 选中项目 新建Web,Spring,Hibernate三项 Hibernate添 ...
- 本周HTML5的知识点
html5一般用<meta>标签描述网页的摘要信息.标题标签一共有6个,标题字体加粗<h1>最大,<h6>最小. <p>标签标示内容都在一行显示,结束后 ...
- ansible-play中role的基本用法
#role应用 #roles跟调用角色的剧本文件应该与roles同级关系,即放在ansible目录下 #makir /root/ansible/roles/{nginx,http,ftp,mysql, ...
- 用less编写百度搜索静态效果
效果图 html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- AutoCAD 2019.0.1 Update 官方简体中文版
欧特克三维机械设计软件AutoCAD 2019版本于2018年3月23号全球正式发布,新版本图标全新设计,视觉效果更清晰:在功能方面,全新的共享视图功能.DWG文件比较功能:现在打开及保存图形文件已经 ...
- 纯css实现评分
用到的知识点: E:checked:单选或复选框被选中 E ~ F: 选择后面的兄弟节点们:选择后面的兄弟节点 E::after,E::before: 伪元素选择器 在匹配E的元素后面(前面)插入内容 ...