uni-app 设置page-meta后链接带参数h5提示警告

uni-app 设置page-meta后链接带参数h5提示警告

示例代码：

<template>  
<page-meta  
    :background-text-style="bgTextStyle"  
    :background-color="bgColor"  
    :background-color-top="bgColorTop"  
    :background-color-bottom="bgColorBottom"  
    :scroll-top="scrollTop"  
    page-style="color: green"  
    root-font-size="16px"  
  >  
  </page-meta>  
    <view class="page-bg-gray">  
</template>

操作步骤：

npm run dev:h5
访问链接 http://localhost:3000/mobile/user/user_set/user_set?id=1

预期结果：

正常应该没有提示警告

实际结果：

main.ts:45  [Vue warn]: Extraneous non-props attributes (id) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

bug描述：

http://localhost:3000/mobile/user/user_set/user_set?id=1 当设置page-meta后，如果链接带有参数h5下面会提示

main.ts:45  [Vue warn]: Extraneous non-props attributes (id) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

Image


更多关于uni-app 设置page-meta后链接带参数h5提示警告的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

官方有人看看吗，现在的版本还有这个问题

更多关于uni-app 设置page-meta后链接带参数h5提示警告的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你楼一眼这个解释 https://blog.csdn.net/qq_26905813/article/details/134158296

<template> <view> 节点1</view> <view> 节点2</view> <view> A页面跳转B页面携带参数过来就能复现（vue3+ts）</view> </template>

在 uni-app 中使用 page-meta 设置页面元信息时，如果链接中带有参数，H5 端可能会出现警告。这个警告通常是由于 page-meta 的某些属性在 H5 端不被完全支持或处理方式不同导致的。

常见问题及解决方案

  1. 警告信息 通常，H5 端可能会提示类似 [Vue warn]: Unknown custom element: <page-meta> 的警告。这是因为 page-meta 是 uni-app 特有的组件，在 H5 端可能不会被完全识别。

  2. 解决方案

    • 条件编译：你可以使用 uni-app 的条件编译功能，针对不同平台设置不同的元信息。
      <template>
  <!-- #ifdef H5 -->
  <meta name="description" content="H5 页面描述">
  <!-- #endif -->
  <!-- #ifdef MP-WEIXIN -->
  <page-meta :page-style="pageStyle"></page-meta>
  <!-- #endif -->
</template>
    • 动态设置：在 H5 端使用 JavaScript 动态设置 meta 标签。
      export default {
  mounted() {
    if (process.env.VUE_APP_PLATFORM === 'h5') {
      const meta = document.createElement('meta');
      meta.name = 'description';
      meta.content = 'H5 页面描述';
      document.head.appendChild(meta);
    }
  }
}
    • 避免在 H5 端使用 page-meta：如果 page-meta 的功能在 H5 端不是必需的，可以直接在 H5 端不使用 page-meta。

  3. 检查链接参数 如果链接中带有参数，确保这些参数在 H5 端被正确处理。你可以通过 this.$route.query 获取参数，并根据参数动态设置页面元信息。

    export default {
  data() {
    return {
      pageStyle: ''
    };
  },
  mounted() {
    if (this.$route.query.someParam) {
      this.pageStyle = `background-color: ${this.$route.query.someParam};`;
    }
  }
}
回到顶部