uni-app 引入 wxcomponents 组件无效

uni-app 引入 wxcomponents 组件无效

开发环境 版本号 项目创建方式
Windows 64位 HBuilderX

产品分类:uniapp/H5

浏览器平台:Chrome
浏览器版本:版本 100.0.4896.127(正式版本)(64 位)

示例代码:

  1. index.js
Component({
  properties: {
    // 这里定义了 innerText 属性,属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
});
  1. index.json
{
  "component": true
}
  1. index.wxml
<view class="list">
  <view>aaaaaaaaaaaaaaaaaaa</view>
  <view>bbbbbbbbbbbbbbbbbbb</view>
</view>
  1. index.wxss
.list {
  background-color: #c00;
}
  1. pages.json
"globalStyle": {
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "uni-app",
  "navigationBarBackgroundColor": "#F8F8F8",
  "backgroundColor": "#F8F8F8",
  "usingComponents": {
    "my-list": "/wxcomponents/lists/index"
  }
},
或页面style
{
  "path" : "pages/list/list",
  "style" :
  {
    "navigationBarTitleText": "列表",
    "enablePullDownRefresh": true
    // "usingComponents": {
    //  "my-list": "/wxcomponents/lists/index"
    // }
  }
}
  1. 页面vue
<view>
  <text>11111111111</text>
  <my-list></my-list>
</view>

操作步骤:

运行到h5或app都报: uni-h5.es.js:14118 [Vue warn]: Failed to resolve component: my-list
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

预期结果:

希望h5或app能正常编译小程序自定义组件(wxcomponents组件)

实际结果:

uni-h5.es.js:14118 [Vue warn]: Failed to resolve component: my-list
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <List>
at <AsyncComponentWrapper>
at <PageBody>
at <Page>
at <Anonymous>
at <KeepAlive>
at <RouterView>
at <Layout>
at <App>

bug描述:

  1. 环境vue3 (setup)

  2. wxcomponents定义
    结构

index.js

index.json

index.wxml

  1. pages.json (globalStyle、页面style都有配置usingComponents,配置内容一模一样)

  2. vue页面引入

  3. h5、app运行效果(无效)

速求解法???


更多关于uni-app 引入 wxcomponents 组件无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

有解决吗 我也是同样的问题

更多关于uni-app 引入 wxcomponents 组件无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


uni-app 中引入微信小程序的 wxcomponents 组件时,可能会遇到组件无效的情况。以下是一些常见的原因和解决方法:

1. 确保路径正确

  • wxcomponents 目录应该放在项目的根目录下,而不是 src 目录下。
  • 确保在 pages.json 中正确配置了 usingComponents,并且路径是正确的。
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "usingComponents": {
    "my-component": "/wxcomponents/my-component/index"
  }
}

2. 检查组件名称

  • 确保组件的名称和标签在页面中使用时一致。
<my-component></my-component>

3. 组件的兼容性

  • 微信小程序的组件并不完全兼容 uni-app,某些组件可能在 uni-app 中无法正常工作。可以尝试使用 uni-app 提供的类似组件替代。

4. 编译模式

  • 确保你使用的是 uni-app 的微信小程序编译模式。可以通过以下命令编译:

    npm run dev:mp-weixin
    

5. 检查控制台错误

  • 打开微信开发者工具,查看控制台是否有错误信息。常见的错误包括路径错误、组件未注册等。

6. 组件的生命周期

  • 微信小程序的组件生命周期与 uni-app 的生命周期可能有所不同,确保组件的生命周期方法在 uni-app 中能够正常触发。

7. 版本兼容性

  • 确保你使用的 uni-app 版本支持 wxcomponents。某些旧版本可能不支持或存在兼容性问题。

8. 组件代码问题

  • 检查 wxcomponents 组件的代码,确保没有语法错误或其他问题。

9. 重新编译

  • 有时候修改了 wxcomponents 中的代码后,可能需要重新编译项目才能生效。

10. 使用 uni-app 原生组件

  • 如果 wxcomponents 组件无法正常工作,可以考虑使用 uni-app 提供的原生组件或插件市场中的替代组件。

示例项目结构

project-root/
├── src/
│   ├── pages/
│   │   └── index/
│   │       ├── index.vue
│   │       └── index.json
├── wxcomponents/
│   └── my-component/
│       ├── index.json
│       ├── index.wxml
│       ├── index.wxss
│       └── index.js
├── pages.json
└── ...
回到顶部