安卓和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. 大数据Hadoop入门视频教程:Hadoop的快如入门

    最新在学习hadoop .storm大数据相关技术,发现网上hadoop .storm 相关学习视频少之又少,这里整理了传智播客段海涛老师的hadoop学习视频,出来给大家学习交流. 视频下载地址:h ...

  2. gat和post封装代码和爬虫的5个步奏

    1了解需求2根据需求找网站3请求4获取5存储from urllib import request, parsefrom urllib.error import HTTPError, URLError ...

  3. html中form表单的使用方法和介绍

    from表单的使用方法 一.表单赏析 二.了解表单功能:用于搜集不同类型的用户输入的内容 有了表单,网页的内容可以由用户自己创建,那么对于网页来说,我们既是网页创建都者,也是网页的消费者. 三.常用的 ...

  4. math-2人博弈

    问题描述: 100根火柴,2人轮流取,每人每次只能取1-7根,取走最后一根火柴的人获胜.问有没有一种策略肯定能够获胜?该策略具体:先取or后取,怎么取? 思维过程: step1:题目问的很明显,所以肯 ...

  5. gateway 配置

    server: port: spring: application: name: api-gateway eureka: client: service-url: defaultZone: http: ...

  6. static易错点

    package com.juemuren.Error; /** * static关键字的易错点 */class SuperClass{    static{        System.out.pri ...

  7. 关于Apache的配置方法和步骤

    一.下载.安装和卸载 网址:https://httpd.apache.org/docs/current/platform/windows.html#down 点击ApacheHaus,在里面下载任何版 ...

  8. xml的作用

    XML应用面主要分为两种类型,文档型和数据型.下面介绍一下几种常见的XML应用: 1.自定义XML+XSLT=>HTML,最常见的文档型应用之一.XML存放整个文档的XML数据,然后XSLT将X ...

  9. change the version of python on my centos

    There are two versions of aconda: aconda and aconda3 in my home directorys. When comment the environ ...

  10. python异常(概念、捕获、传递、抛出)

    异常 目标 异常的概念 捕获异常 异常的传递 抛出异常 01. 异常的概念 程序在运行时,如果 Python 解释器 遇到 到一个错误,会停止程序的执行,并且提示一些错误信息,这就是 异常 程序停止执 ...