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
      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>
.layout {
  height: 100%;
}
.go-back {
  position: fixed;
  width: 42px;
  height: 42px;
  left: 26px;
  bottom: 98px;
}
</style>