当前位置: 首页 > article >正文

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

一、需求描述

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

二、失败做法

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

uni.setNavigationBarTitle({
	title: option.fnname
});

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

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

三、实现方式

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

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

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

setTimeout((res) => {
	uni.setNavigationBarTitle({
		title: option.fnname
	});
}, 500);

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


http://www.kler.cn/news/135546.html

相关文章:

  • ArkTS - HarmonyOS服务卡片(创建)
  • CISP模拟试题(一)
  • uniapp+vue+Springboot 公司网站0~1搭建 前端前期设计篇
  • 串行通信中的同步方式(Synchronous)与异步方式(Asynchronous)stty -F设置波特率
  • “移动机器人课程群实践创新的困境与突围”素材
  • 动态页面调研及设计方案
  • 【Java 进阶篇】Ajax 实现——原生JS方式
  • 文件传输客户端 SecureFX mac中文版支持多种协议
  • 归并排序详解:递归实现+非递归实现(图文详解+代码)
  • 设计模式-组合模式-笔记
  • 应试教育导致学生迷信标准答案惯性导致思维僵化-移动机器人
  • Android描边外框stroke边线、rotate旋转、circle圆形图的简洁通用方案,基于Glide与ShapeableImageView,Kotlin
  • 【双指针】快乐数
  • Wireshark TS | 应用传输缓慢问题
  • 【运维篇】Redis 性能测试工具实践
  • 米家竞品分析
  • OceanBase 4.2.1 LTS 发版 | 一体化数据库首个长期支持版本
  • 数据结构与算法之美学习笔记:22 | 哈希算法(下):哈希算法在分布式系统中有哪些应用?
  • 面向开发者的Android
  • CXL崛起:2024启航,2025年开启新时代
  • 前端食堂技术周刊第 105 期:TS 5.3 RC、Vite 5.0、W3C 新任 CEO、有害的 Pinia 模式、2024 更快的 Web
  • Kotlin学习之函数
  • 【HarmonyOS开发】配置开发工具DevEco Studio
  • 基于SSM的高校毕业选题管理系统设计与实现
  • kubernetes部署jenkins
  • flink源码分析之功能组件(一)-metrics
  • openGauss学习笔记-128 openGauss 数据库管理-设置透明数据加密(TDE)
  • Hibernate 函数 ,子查询 和原生SQL查询
  • YOLOV8部署Android Studio安卓平台NCNN
  • Java Web——JS中的BOM