实现：H5与原生APP（Android或Ios）相互交互

• Android端：让原生APP开发人员在window对象上绑定方法属性，同步执行，前端直接调用对应方法即可。

/* H5调用Android方法(因IOS限制,需统一都传参,没有就传空字符,具体APP开发定),
Android返回H5需要的json对象数据，同步执行的。
示例如下：
*/
const userInfoJsonObj = window.androidApp && window.androidApp.getUserInfo("")

• IOS端：需通过bridge对象调用IOS定义的方法，异步执行，需注意如果IOS端没有定义方法，bridge不会返回任何数据也会不报什么错误。

问：H5嵌入APP，如何区分当前环境是APP（H5调用IOS方法），还是其他环境（H5不调IOS方法）？

答：让Android&IOS开发人员，修改下用户代理即（userAgent）, 在原有用户代理字符串后面，新增特殊标志字符-》H5读取navigator.userAgent来判断即可。
 

第1步：在utils目录下新建bridge.js工具文件。

// bridge.js: 用于实现H5跟Ios交互的工具。
export const setupWebViewJavascriptBridge = (callback) => {
  if ((window).WebViewJavascriptBridge) {
    return callback((window).WebViewJavascriptBridge)
  }
  if ((window).WVJBCallbacks) {
    return (window).WVJBCallbacks.push(callback)
  }
  (window).WVJBCallbacks = [callback]
  const WVJBIframe = document.createElement('iframe')
  WVJBIframe.style.display = 'none'
  WVJBIframe.src = 'https://__bridge_loaded__'
  document.documentElement.appendChild(WVJBIframe)
  setTimeout(() => {
    document.documentElement.removeChild(WVJBIframe)
  }, 0)
}
 
export const callIosBridge = (IosMethodName, params, callback) => {
  setupWebViewJavascriptBridge((bridge) => {
    bridge.callHandler(IosMethodName, params, callback)
  })
}

第2步：H5调用IOS方法即可。

import { callIosBridge } from '@/utils/bridge'
const u = navigator.userAgent // 用户代理
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // android终端
const isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
 
// 从原生APP中获取登录的用户信息
export function getUserInfoObjFromNativeAPP() {
	return new Promise((resolve, reject)=> {
	   if (!isAndroid && !isIos) { reject() }
	   if (isAndroid) {
        // 调用Android端的getUserInfo方法。
		const data = window.androidApp && window.androidApp.getUserInfo("")
		data ? resolve(JSON.parse(data) ) : resolve(null)
	   } else {
           // 调用IOS的getUserInfo方法，传参为空字符，回调函数中H5拿到想要的json对象数据
		   callIosBridge('getUserInfo', '', (data) => {
			data ? resolve(JSON.parse(data) ) : resolve(null)
		  })
	  }
  })
}

Vue调用Android的方法

1、在vue页面中自己写个按钮，通过点击按钮来调用Android封装好的方法。

<template>
  <div>
      <button @click="scan()">点击</button>
  </div>
</template>

2、点击时咱们给安卓传个参数，安卓定义好参数类型。

export default {
  name: 'home',
  data () {
    return {
        arr:'123' //给安卓传参数，安卓需要定义参数类型
    }
  },
  methods:{
    scan: function(arr) {
        window.android.takePhoto(this.arr);
        //takePhoto()是安卓定义好的方法
    }      
  }
}

原文：实现：H5与原生APP（Android或Ios）相互交互。_window.android调原生app_qq_38969618的博客-CSDN博客

Vue调用Android的方法 | 码农家园

<!--认证成功  rxcgappZ-->
<template>
  <div>
    <div class="bjhui">
      <p class="zfcg_zfztbt">认证成功</p>
      <!--认证成功-->
      <div class="zfcg_bj">
        <div class="zfcg_my_zfzt">
          <div class="zfcg_zt">
            <p class="zfcg_zfcgico">
              <img src="@/assets/images/zhuangzhu/zfcgico.png">
            </p>
            <p class="zfcg_zfbt">认证成功！</p>
          </div>
        </div>
        <div class="bottom_fh">
          <button @click="scan()" class="bm50_btn">返回APP</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'rxcgappZ',
  data () {
    return {
      arr:'123' //给安卓传参数，安卓需要定义参数类型
    }
  },
  methods:{
    scan: function(arr) {
      var cc=this.isAndroid()
      if(cc){
        //alert(111)
        window.android.androidFinish(); //androidFinish()是安卓定义好的方法
      }else{
       // alert(222)
      }
    },
    isAndroid(){
      let userName = window.navigator.userAgent;
      if (userName.indexOf('Andorid') > -1 || userName.indexOf('Linux') > -1) {
        return true
      }
      return false
    }
  }
}
</script>
<style scoped>
</style>