发测试验证 推荐云手机返回按钮屏蔽和导航栏使用H5问题

components/layout/index.vue

@@ -1,48 +1,17 @@
 <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
-    }
+    return {};
   },
-  methods: {
-    goBack() {
-      // 如果为true是最前一页
-      if (this.isGoBack) {
-        this.isAndroid ? window.native.backClick() : window.webkit.messageHandlers.appGoBack.postMessage({})
-        return
-      }
-      this.$router.go(-1)
-    }
-  }
+  mounted() {},
+  methods: {}
 };
 </script>
 

pages/introductionCloudPhone/components/layout.vue

@@ -33,12 +33,40 @@ export default {
     isRouterBack: {
       type: Boolean,
       default: false
+    },
+    // 用于内嵌页面，标识为最后一页
+    isGoBack: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
-    return {};
+    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
+      // 判断是否有注册goneBack方法,有就调用
+      if(!!window.native.goneBack){
+        console.log('this.visible', this.visible)
+        window.native.goneBack() // 安卓隐藏返回按钮
+      }
+      // setTimeout(()=>{
+      //   console.log('window.native.goneBack', window.native.goneBack)
+      //   console.log(' !!window.native.goneBack',  !!window.native.goneBack)
+      //   this.visible && window.native.goneBack() // 安卓隐藏返回按钮
+      // }, 100)
+    }
   },
-  mounted() { },
   computed: {
     containerStyle() {
       // if (this.isShowApp) {
@@ -67,9 +95,9 @@ export default {
     },
     isShowNavBar() {
       // 是否是APP
-      const isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser;
-      const isAndroid = this.$userAgent.isAndroid;
-      const isIos = this.$userAgent.isIos;
+      // const isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser;
+      // const isAndroid = this.$userAgent.isAndroid;
+      // const isIos = this.$userAgent.isIos;
       const isWx = this.$userAgent.isWx;
       // 如果是App并且是安卓，就不显示头部， ios显示
       // 如果微信小程序环境的，也不显示头部
@@ -77,7 +105,8 @@ export default {
       let bool = false;
       // bool = isApp ? (isAndroid ? !isAndroid : isIos) : (isWx ? !isWx : !isWx);
 
-      bool = (isApp && (isAndroid || isIos)) || isWx ? false : true;
+      // bool = (isApp && (isAndroid || isIos)) || isWx ? false : true;
+      bool = isWx ? false : true;
 
       // console.log()
       return bool || this.forceShowNavBar;
@@ -90,7 +119,12 @@ export default {
         this.$emit('goBack');
         return;
       }
-      this.$router.go(-1);
+      // 如果为true是最前一页
+      if (this.isGoBack) {
+        this.isAndroid ? window.native.backClick() : window.webkit.messageHandlers.appGoBack.postMessage({})
+        return
+      }
+      this.$router.go(-1)
     },// 退出相关逻辑
   },
 };

pages/introductionCloudPhone/index.vue

@@ -1,7 +1,7 @@
 <!-- @notes: 页面于2024-11-17 由判断是否为app [isShowApp] 进行背景颜色判断的需求取消,统一换成白色背景. html上直接写 布尔值的均由 [isShowApp] 替换-->
 <template>
-  <layoutBack :isGoBack='true'>
-    <layout title='推荐云手机'>
+  <layoutBack>
+    <layout title='推荐云手机' :isGoBack='true'>
       <!-- <div :class="isShowApp?'introduction':'introduction introduction-white'"> -->
       <div class="introduction" :class="{'introduction-white': !false}">
         <div class="introduction-title" v-if="isShowApp">
@@ -135,15 +135,15 @@ export default {
   computed: {
     isShowApp() {
       // 是否是APP
-      const isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser;
-      const isAndroid = this.$userAgent.isAndroid;
-      const isIos = this.$userAgent.isIos;
-      const isWx = this.$userAgent.isWx;
+      // const isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser;
+      // const isAndroid = this.$userAgent.isAndroid;
+      // const isIos = this.$userAgent.isIos;
+      // const isWx = this.$userAgent.isWx;
       // 如果是App并且是安卓，就不显示头部， ios显示
       // 如果微信小程序环境的，也不显示头部
       // 如果是h5 就显示头部
       let bool = false;
-      bool = isApp && (isAndroid || isIos) ? true : false;
+      // bool = isApp && (isAndroid || isIos) ? true : false;
       return bool;
     },
   },