当前位置: 代码网 > it编程>编程语言>Javascript > 详解uniapp如何解决H5页面双标题

详解uniapp如何解决H5页面双标题

2024年10月28日 Javascript 我要评论
概述:uniapp打包到线上,会出现双标题问题,原因是:通过地址链接访问时,会有个浏览器自身的标题,和uniapp自身的导航栏标题重复。解决方案:通过自定义uniapp项目的标题,然后进行条件编译,只

概述:uniapp打包到线上,会出现双标题问题,原因是:通过地址链接访问时,会有个浏览器自身的标题,和uniapp自身的导航栏标题重复。

解决方案:通过自定义uniapp项目的标题,然后进行条件编译,只在app和小程序上显示,h5端不显示,即可只显示浏览器自身的标题。

1. pages.json配置

{
	"path": "pages/index/index",
	"style": {
		"navigationbartitletext": "统一收银数据大屏",
		"enablepulldownrefresh": false,
		"navigationstyle":"custom"
            }
	}

2. 页面配置

<!-- #ifdef mp-weixin -->
    <u-navbar title="统一收银数据大屏" > </u-navbar>
<!-- #endif -->

最后关键一步:自定义了导航栏后,必须进行条件编译,让标题只在微信小程序或app上显示,h5端影藏,否则依然会显示两个标题。

3. 最后效果

到此这篇关于详解uniapp如何解决h5页面双标题的文章就介绍到这了,更多相关uniapp h5页面双标题内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网!

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com