微信小程序内嵌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);

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

相关推荐
社会底层无业大学生1 小时前
uniapp微信小程序简单表格展示
微信小程序·小程序·uni-app·vue·1024程序员节
從南走到北1 小时前
JAVA无人自助共享系统台球室源码自助开台约球交友系统源码小程序
java·微信·微信小程序·小程序·1024程序员节
2501_915918415 小时前
iOS 26 查看电池容量与健康状态 多工具组合的工程实践
android·ios·小程序·https·uni-app·iphone·webview
2501_915909066 小时前
iOS 架构设计全解析 从MVC到MVVM与使用 开心上架 跨平台发布 免Mac
android·ios·小程序·https·uni-app·iphone·webview
2501_9160088916 小时前
Web 前端开发常用工具推荐与团队实践分享
android·前端·ios·小程序·uni-app·iphone·webview
2501_9159214316 小时前
“HTTPS 个人化”实战,个人站点与设备调试的部署、验证与抓包排查方法
网络协议·http·ios·小程序·https·uni-app·iphone
菜鸟una17 小时前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
韩立学长18 小时前
【开题答辩实录分享】以《租房小程序的设计和实现》为例进行答辩实录分享
java·spring boot·小程序
從南走到北18 小时前
JAVA国际版一对一视频交友视频聊天系统源码支持H5 + APP
java·微信·微信小程序·小程序·音视频·交友
future_studio19 小时前
聊聊 Unity(小白专享、C# 小程序 之 联机对战)
unity·小程序·c#