关于h5与app的交互

所谓交互，其实就是两种传值的方式

1 h5给app传值 （方法主体由移动端人员编写，h5调用）

2 app给h5传值（方法主体由h5人员编写，移动端调用）

 

说在之前

无论哪种方式，双方约定是必须的，区分IOS与Android也是必须的

下面以下载为例

 

需求描述：

app中内嵌h5页面，可分享，页面中带有影响后续流程的按钮（eg:购买，领取等）

分享之后如果用户点击按钮，则跳转app下载

思路：

1 首先判断当前打开的页面是否在app当中

    如果在app中，则进行之后的按钮交互（此时一般是与app人员约定一个方法名，方法由app人员去写【因为后续的操作是在app原生中进行】）

    如果不在app中，则判断环境进行下载的操作

2 下载的操作

    a 区分是不是微信环境（android在微信中不能直接下载~，IOS会弹出提示，然后可直接跳转到appStore）

    b 区分IOS/Android

         这是如果是Andorid环境，则需要自己添加遮罩层提示用户三方浏览器打开下载

   

代码

import { isIos } from '@/utils/common'   // 判断是IOS还是Android
import { downLoadApp } from '@/utils/base'  // 单独的下载方法

// data
isapp: false,
isIos: false

// created
this.isIos = isIos()
// 这里将isInApp的方法挂载到window域下，app人员在打开webView的时候就能直接拿到这个方法，然后他们传递参数进去
// app调用之后就会进入methods中我们定义的方法，将data中的isapp进行赋值，这时我们就知道是否在app中了
let that = this
window['isInApp'] = function (a) { that.isInApp(a) }

// methods
isInApp(a) {
 this.isapp = a
},

// 点击按钮事件
clickBth() {
if (this.isapp) { // 如果在app中，则调用app定义好且暴露在window中的方法 callPhone
  if (this.isIos) {
    window.webkit.messageHandlers.callPhone.postMessage(['电话咨询'])
  } else {
    JavaScriptClient.callPhone('电话咨询')
  }
 }else{ // 否则则进行下载的流程
    downLoadApp(this)
 }
}

// 下载方法单独提取出来了~
export const IOSdownload = ''   // IOS appStore的下载地址 https://apps.apple.com/cn/app/ID
export const Androiddownload = '' // Android的下载地址 一般为服务器地址

/**
 * @description: 下载APP
 * @param {type} 
 */
export function downLoadApp(vm) {
  // 判断是否为微信环境
  let isWx = window.navigator.userAgent.toLowerCase().indexOf('micromessenger') > -1 ? true : false
  if (isIos()) {
    // IOS下载地址
    window.location.href = IOSdownload
  }else{
    if (isWx) {
      // isDownLoadApp 为调用页面的参数，用来控制是否打开三方浏览器指引的浮层
      vm.isDownLoadApp = true
      // 这里其实是直接更改了其hash（不会触发刷新【当然如果手动刷新的话，也会走路由。。】，但是在三方打开的时候会重新走vue的路由，等于说进入到了路由为downloadapp的页面）
      // 更改的好处在于，进入页面之后直接就会提示下载，当然也可以做成主动按钮触发的形式~，看业务需求了
      window.location.hash = 'downloadapp'
      return
    }
    // 安卓包下载地址
    window.location.href = Androiddownload
  }
}

另附上路由为downloadapp的下载页，以及三方浏览器打开的弹层引导

<template>
  <div>
    <p>下载APP</p>
  </div>
</template>
 <script>
import { isIos } from '@/utils/common'
import { IOSdownload, Androiddownload } from '@/utils/base'
export default {
  data() {
    return {}
  },
  created() {
    this.identityHash()
  },
  methods: {
    identityHash() {
      if (!isIos()) {
        // 安卓，弹出包下载页面
        window.location.href = Androiddownload
      } else {
        // ios，直接跳转Appstore
        window.location.href = IOSdownload
      }
    }
  }
}
</script>

<!-- 弹层作为组件的方式写的~ -->
<template>
  <div>
    <div class="show_wx_dialog" v-if="show">
      <p>
        <img src="../../../assets/imgA/live_weixin.png" alt="">
      </p>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    show: { default: false, type: Boolean }
  }
}
</script>
<style lang="scss" scoped>
.show_wx_dialog{
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  filter: alpha(opacity=80);
  height: 100%;
  width: 100%;
  z-index: 100;
  p{
    text-align: center;
    margin-top: 10%;
    padding: 0 5%;
    img{
      max-width: 100%;
      height: auto;
    }
  }
}
</style>