app内嵌vue h5,安卓和ios拦截H5点击事件

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

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

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

原文地址:https://www.cnblogs.com/caoxiaokang/p/9400444.html

时间: 2024-10-21 07:51:48

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

用vue做app内嵌页遇到的坑

公司要求用vue做一个微信端的网站,其中还包含一些app的内嵌页.开始的时候没想那么多,就直接用vue-cli搭了一个单页的vue项目,可随着项目越做越大,页面越来越多,问题就开始暴露出来了. 众所周知,单页面程序优点是在页面初始化时加载相应的HTML.JavaScript 和 CSS,一旦页面加载完成了,就不用再做其他的加载和跳转了,极大的提升了页面的流畅性,提供良好的用户体验.那么问题来了,把所有东西都放在初始化的时候做,就造成了页面首次加载需要更长的等待时间.而对于那些作为app内嵌的页面

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

ios下做新闻详情用h5页面实现然后打包到app中,其中新闻详情页会有视频,安卓下video的poster可以做到适应video大小,但是ios下会按照poster图片大小将video等比撑大,但是视频显示不全(超出手机宽度),原始poster图片大小是750x420尝试诸多方法包括设置object-fit:fill;等,都无效,最后把封面图等比缩小为420x236完美解决: 总结: ios下的webview会将video的poster等比放大适应video:但不会等比缩小适应video: 原文

app内嵌H5网页(webviewJavaScriptBridge)

摘要:使用的插件为webviewJavaScriptBridge,app端需要引入一下这个包,html页面只需一段JS代码 与IOS交互 <! 申明交互(此处代码固定) > function setupWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); } if (window.WVJBCallbacks) { re

App内嵌H5页面联调接口

//分享接口 function ShareLp(query,pkid){ var shareUrl=""; var shareImg=""; var shareTll=""; var shareInfo=""; var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //andr

app内嵌h5页面问题总结

一.<audio> 1.ios上只能播放mp3文件格式的音频 2.fis+smarty开发的静态页,将音频文件写死时,js设置当前播放时间(currentTime)失效,每次赋值都自动归零.后来音频文件通过后端拿来时,却是正常的.查资料,说这玩意貌似跟服务器有关! 二.样式 1.写的css在ios上总是不管用,最后发现,加上-webkit-就好了

app内嵌 h5页面 再滑动的时候 触发击穿底下的一些touchstart事件

我们的目的是再滑动的时候 不要触发到touchstart事件. // 再滑动的时候无法点开视频 var is_scroll_start,is_scroll_end; $(window).on({ 'touchstart':function(){ is_scroll_start=$(document).scrollTop(); }, 'touchmove':function(){ is_scroll_end=$(document).scrollTop(); }, 'touchend':functi

IOS - UIView添加点击事件

UIView通过手势(Gesture-UITapGestureRecognizer)添加点击事件, 类似于UIButton的效果. 示例: UIImageView *iKnowIcon = [CYResource loadImageView:@"free-question-once-more-i-know.png"]; iKnowIcon.top = questionIcon.top + scaleWidthWith320(200); iKnowIcon.centerX = self.

iOS:UIImageView添加点击事件

UIImageView并不像UIButton那样点击鼠标就可以关联点击事件,也不像Android里有onClickListener,这个时候就需要借助UITapGestureRecognizer类,从类名上就可以看出,这个类就是用于处理tap(单击)事件的. 创建两个UIImageView对象,imageView1和imageView2 [imageView1 setUserInteractionEnabled:YES]; [imageView2 setUserInteractionEnable

iOS 检测状态栏点击事件

当tableView.scrollsToTop=YES不管用时,可以使用以下方法实现点击状态栏使tableView滚动到顶部. - (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { [super touchesBegan:touches withEvent:event]; CGPoint location = [[[event allTouches] anyObject] locationInView:self.v