微信小程序内嵌h5页面,实现动态设置顶部标题的功能

一、需求描述

使用HBuilder X作为开发工具,vue作为开发语言,开发微信小程序。微信小程序页面内嵌h5页面,即<web-view></web-view>标签。通过设置不同url连接地址,设置不同的标题。

二、失败做法

页面A嵌入h5页面,需要给A设置标题。最开始写法是在lonload页面内,使用如下语句实现:

javascript 复制代码
uni.setNavigationBarTitle({
	title: option.fnname
});

在微信开发者工具中,标题正常显示。但是预览及真机调试模式下,标题是一闪而过,然后就没有了。

如果在h5页面中设置标题,那么会出现双标题的问题。网上找了很多解决方法,一直都没有达到我想要的效果。

三、实现方式

据了解造成这种现象的原因是,加载完h5页面后,会将h5的标题作为当前页面A的标题。但是h5页面中,我没有设置标题,所以最后呈现的效果是标题为空。

本来我想的是监测h5页面加载完成,但是尝试了几种方法后,都失败。

最后我用了一种不算是完美的解决办法:

javascript 复制代码
setTimeout((res) => {
	uni.setNavigationBarTitle({
		title: option.fnname
	});
}, 500);

但是这样有个弊端,标题并不会立马就显示,会有一瞬间的延迟。但是吧,我觉得可以接受,比没有强。

相关推荐
Nan_Shu_6147 小时前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
尘似鹤8 小时前
微信小程序学习(三)补充
学习·微信小程序
老华带你飞8 小时前
机电公司管理小程序|基于微信小程序的机电公司管理小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·微信小程序·小程序·机电公司管理小程序
涛声依旧10 小时前
基于springBoot鲜花商城小程序
java·spring·微信小程序
卷Java12 小时前
小程序前端功能更新说明
java·前端·spring boot·微信小程序·小程序·uni-app
卷Java12 小时前
小程序原生导航栏返回键实现
spring boot·云原生·微信小程序·uni-app
CTRA王大大12 小时前
【微信公众平台】小程序如何查找菜单?如何通过自定义的菜单路径生成小程序二维码?小程序二维码指定生成
小程序·微信公众平台
说私域12 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的引流爆款设计策略研究
人工智能·小程序
weixin_lynhgworld12 小时前
短剧小程序系统开发:构建便捷高效的影视观看平台
小程序·短剧
知识分享小能手12 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(下)——知识点详解 + 案例实战(5)
前端·javascript·学习·微信小程序·小程序·vue·前端开发