uniapp修改head无效怎么办

1. uniapp修改head无效

在开发过程中，我们经常需要修改head中的内容，比如<meta>、<title>等。但是有时候修改后发现没有生效，这个时候我们该怎么办呢？

1.1 原因分析

首先我们需要了解一下为什么会出现这种情况。在uniapp中，页面是通过vue组件来实现的，而vue组件是有生命周期的。在组件周期中，我们可以通过修改$this.$options中的head来动态更新标签中的内容，但是这个是有条件的，就是需要在beforeCreate()生命周期内才能生效。也就是说，如果修改head的代码放在页面的created() 生命周期函数或之后，就无法生效了。

1.2 解决方案

那么我们应该怎么解决这个问题呢？其实很简单，只需要将修改head的代码放在beforeCreate()生命周期内即可：

export default {
  beforeCreate() {
    const head = document.getElementsByTagName('head')[0]
    const meta = document.createElement('meta')
    meta.setAttribute('name', 'viewport')
    meta.setAttribute('content', 'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no')
    head.appendChild(meta)
    document.title = '新的标题'
  },
}

这样就可以实现动态更新head中的内容了。

1.3 注意事项

需要注意的是，修改head的代码只有在页面初次渲染时才会生效。如果需要在页面中间修改head的内容，需要借助第三方库。

另外，由于uniapp是跨平台的框架，所以对于一些仅支持H5平台的head标签属性，比如manifest、apple-touch-icon等，在小程序平台是无法生效的。