android-cloud-H5/components/layout/index.vue

<template>
  <div class="layout">
    <slot></slot>
    <img src="@/assets/image/goBack-cion.png" alt="" class="go-back" @click="goBack" v-if="visible">
  </div>
</template>

<script>
export default {
  name: 'layout',
  props: {
    isGoBack: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
        visible: true,
        isApp: null,
        isAndroid: null
    };
  },
  mounted() {
    // 如果是安卓的需要判断一下是否显示h5内置的返回按钮
    // 如果是H5、微信小程序，不需要显示次按钮
    // 如果是苹果就显示，不需要做任何处理
    this.isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser
    this.isAndroid = this.$userAgent.isAndroid;
    if(!this.isApp) return this.visible = false
    if(this.isApp && this.isAndroid) {
        this.visible = !!window.native.goneBack
        return
    }
  },
  methods: {
    goBack() {
      // 如果为true是最前一页
      if(this.isGoBack) {
        this.isAndroid ? window.native.backClick() : window.webkit.messageHandlers.appGoBack.postMessage({})
        return 
      }
      this.$router.go(-1)
    }
  }
};
</script>

<style lang="less" scoped>
.go-back{
    position: fixed;
    width: 42px;
    height: 42px;
    left: 26px;
    bottom: 98px;
}
</style>