微信小程序web-view组件嵌入h5页面导致双导航栏，如何只保留其中一个？

Posted 2022-01-31 铁锤妹妹@

一. 前提

1. 已知存在一个微信小程序，该小程序的某个页面通过web-view组件嵌套了我们app的一个h5页面，h5页面本身有自己的导航栏，就导致了双导航栏。
2. 由于uniapp的 web-view 组件一定有原生导航栏，pages.js中设置navigationStyle: custom 对 web-view 组件无效；所以只能去掉h5里的导航。

二. 问题分析

对 web-view 组件不了解的小伙伴们，直接查看官方文档介绍即可。入口地址: 小程序 web-view
介绍：web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。

三. 解决方案

h5页面现在有两个地方在使用，一个是app里需要保留导航栏，另一个小程序中需要去掉h5的导航栏，所以需要条件判断，在使用web-view 组件项目中的页面src指向的链接多加一个navigatorType = miniprogram 参数；在h5页面，mounted()生命周期中取传来的参数this.$route.query.navigatorType，如果等于"miniprogram"，隐藏h5导航栏，否则按原样显示导航栏。

<template>
  <view>
    <web-view
      :webview-styles="webviewStyles"
      :src="h5Url"
      @message="handleMessage"
    ></web-view>
  </view>
</template>

<script>
import config from '@/utils/config'
import  getToken  from '@/utils/token.js'
export default 
  data() 
    return 
      h5PageName: 'ceshiName',
      h5Url: '',
      webviewStyles: 
        progress: 
          color: '#FF3333',
        ,
      ,
    
  ,
  onLoad() 
    this.h5Url = `$
      config.h5PageBaseHttp + this.h5PageName
    ?navigatorType=miniprogram&token=$getToken()`
  ,

</script>

<style></style>

h5页面

  mounted() 
     let navigatorType = this.$route.query.navigatorType;
      if (navigatorType === "miniprogram") 
        this.isNavBar = false;
      
  ,

app中跳转到h5页面就不需要加 navigatorType = miniprogram 参数了