uni-app,h5页面在微信查看会显示双头部,只显示一个头部方法

1.新建一个js文件,写入一下代码,在需要隐藏头部标题的页面局部引用

export default {
	mounted() {
		if (this.isWeiXinBrowser() || this.isQQBrowser()) {
			this.navTitle()
		}
	},
	methods: {
		isWeiXinBrowser() { //判断是否为微信
			let ua = navigator.userAgent.toLowerCase()
			return ua.indexOf('micromessenger') != -1
		},
		isQQBrowser() { //判断是否为qq
			var ua = navigator.userAgent.toLowerCase()
			if (ua.match(/QQ/i) == "qq") {
				return true
			} else {
				return false
			}
		},
		navTitle() {
			this.$nextTick(() => {
				let navTitleDom = document.getElementsByTagName('uni-page-head')
				if (navTitleDom.length) {
					navTitleDom[0].style.display = 'none'
				}
			})
		},
	}
}

2.如果在全局页面应用,就在mian.js里加上这段能全局使用

### 使用 UniApp 打包 H5 网页 #### CLI 发行 Uni-AppH5 为了将 UniApp 项目打包成 H5 应用程序,可以利用命令行工具 (CLI) 来完成这一过程。具体来说,可以通过官方文档提供的指南来执行此操作[^1]。 ```bash npm run build:h5 ``` 这条命令会编译并构建项目的 H5 版本,最终输出至 `dist` 文件夹内。 #### 防止 HTML 缓存问题 当频繁更新发布新版本时,可能会遇到旧版文件仍然被浏览器加载的情况。为了避免这种情况发生,在开发过程中应当采取措施防止HTML页面被缓存。这通常涉及到修改服务器配置或是在HTML头部加入特定标签以控制缓存行为[^2]。 例如可以在 `<head>` 中添加如下meta标签: ```html <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Expires" content="0"> ``` 这些设置指示浏览器不要存储任何有关该页面的信息,并且每次请求都应从源站获取最新数据。 #### Nginx 反向代理配置 对于已经打包好的 H5 页面而言,实际上并不需要复杂的反向代理逻辑去连接后端API;只需简单地让Nginx指向存放静态资源的目录即可正常工作。因此,仅需确保Nginx正确指向前端文件位置以及允许其直接调用外部服务接口就足够了[^3]。 以下是简单的 nginx.conf 示例片段用于展示如何实现这一点: ```nginx server { listen 80; server_name localhost; location / { root html/dist; # 假设 dist 是你放置 h5 的根目录 index index.html; try_files $uri $uri/ /index.html; } } ``` 这段配置使得所有未知URL都会返回给前端路由处理,从而支持单页应用(SPA)模式下的深层链接功能。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值