uni-app components组件引入在H5端正常，App端不正常

uni-app components组件引入在H5端正常，App端不正常

操作步骤：

如上图所示

预期结果：

在H5中和App中表现一致，均可展示导入的组件。

实际结果：

在H5展示中正常，在App手机上不能显示导入的组件。

bug描述：

由于这款App的组件比较多且多个页面都要使用，为优化代码，故想法是将需要用到的组件集中在lib包中，通过export导出的方式然后在各个页面对components使用。

信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Mac
PC操作系统版本 macOs 11.6.1
HBuilderX类型 正式
HBuilderX版本 3.2.12
手机系统 iOS
手机系统版本 iOS 14
手机厂商 苹果
手机机型 iphone 7plus
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

Image Image Image Image


更多关于uni-app components组件引入在H5端正常，App端不正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

试试： components: {
lib
}

更多关于uni-app components组件引入在H5端正常，App端不正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


测试过，不行。

import crmCall from ‘@/components/crm/crm-call’ import crmSalesRanking from ‘@/components/crm/crm-sales-ranking’
export default { components: { crmCall, crmSalesRanking }, }
上面是常规写法，双端表现也是正常的。
但是代码如下调整一下，类似export导出，Web端表现依旧正常，App端就不行了。
import crmCall from ‘@/components/crm/crm-call’ import crmSalesRanking from ‘@/components/crm/crm-sales-ranking’ const complib = { crmCall, crmSalesRanking }
export default { components: complib, }

这是一个典型的平台差异问题。在uni-app中，H5平台和App平台（特别是iOS）对ES模块的静态分析能力不同。

核心原因： App端（尤其是iOS）的JavaScript引擎在编译时对组件的静态分析不如H5端灵活。当您使用export导出组件对象，然后在页面中通过components: { ...lib }引入时，App端可能无法正确识别和注册这些组件。

解决方案： 不要使用对象解构或展开的方式在components选项中注册组件。改为直接在components选项中逐个注册组件。

修改示例：

将原来的：

import * as lib from '@/lib/index.js'

export default {
  components: {
    ...lib
  }
}

改为：

import { componentA, componentB, componentC } from '@/lib/index.js'

export default {
  components: {
    componentA,
    componentB,
    componentC
  }
}

或者如果组件较多，可以这样写：

import * as lib from '@/lib/index.js'

export default {
  components: {
    ComponentA: lib.ComponentA,
    ComponentB: lib.ComponentB,
    ComponentC: lib.ComponentC
    // 明确列出每个组件
  }
}
回到顶部