H5页面与vue的客户端交互

最新推荐文章于 2024-04-10 20:13:38 发布

简宁909

最新推荐文章于 2024-04-10 20:13:38 发布

阅读量1.9k

点赞数

分类专栏：笔记文章标签： vue.js html javascript

本文链接：https://blog.youkuaiyun.com/Coco_998/article/details/109485124

版权

工作中经常遇到一些奇怪的东西，我有个这样的需求，就是我写的vue项目被嵌套在别的h5项目页面下，so进入我的页面前需要判断他的h5页面有没有登录，这时候就需要我的客户端页面调用h5页面的登录方法。客户端页面(ios、安卓)两种都得交互h5页面，，，借助JavascriptBridge工具，前端对应的js代码
 因为我的项目是vue的，我一般把函数都转为箭头函数了。

<template>
 <div class="tel">
  <p>{
  {message}}aaasss</p>
  <button @click="callBackH5">与h5页面交互</button>
 </div>
</template>
<script>
/*判断客户端手机为ios还是安卓，放在Script中*/
let u = navigator.userAgent, app = navigator.appVersion;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //安卓
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
export default {
    data(){
      return{
        message:'',
        dataCall:''
      }
    },
    mounted(){
      //$on给当前事件绑定一些事件监听
      this.$bus.$on('on-c