微信小程序web

#微信小程序web| 来源: 网络整理| 查看: 265

一. 前提已知存在一个微信小程序，该小程序的某个页面通过web-view组件嵌套了我们app的一个h5页面，h5页面本身有自己的导航栏，就导致了双导航栏。由于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导航栏，否则按原样显示导航栏。

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()}` }, }

h5页面

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

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

【本文地址】

微信小程序web

微信小程序web

今日新闻

推荐新闻