uni-app分包A的组件A1引用了分包B的组件B1应该怎么配置

发布于 1周前 作者 yuanlaile 来自 Uni-App

uni-app分包A的组件A1引用了分包B的组件B1应该怎么配置

原生小程序（微信、支付宝）写法

组件A1.json

{
  "usingComponents": {
    "B1": "/xxx/xxx"
  },
  "componentPlaceholder": {
    "B1": "view"
  }
}
Harmonyos Next教程
9 回复

正常情况下，跨分包的资源、代码依赖默认情况下是不可靠的，因为分包加载有先后顺序，如果必须实现该业务，那只能用分包异步化来处理。


问下，uniapp里面的分包异步化应该怎么处理？ 就是实现上面那种配置

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/placeholder.html#配置

给你发这个文档就是啊 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/placeholder.html#配置
{
“subPackages”: [{
“root”: “subpackageA1/”,
“pages”: [{
“path”: “pageA1”,
“style”: {
“navigationBarTitleText”: “分包页面A”,
“usingComponents”: {
“three-js”: “/pages-three/threeJs/threeJs” // 组件的路径
},
“componentPlaceholder”: {
“three-js”: “view” // 未完成时的占位组件
}
}
}]
}]
} 你必须在子包的某个页面中，去使用这个组件，否则打包的时候会找不到文件。只要在子包的某个页面，导入并渲染了组件，打包的时候就会在文件中了 然后在subpackageA1的页面中使用这个组件，就可以正常使用了，但是用代码查看器是看不到的，这没有关系，功能正常就行。

感谢回答，我想了解的是pageA1里面的组件，引用 /pages-three/threeJs/threeJs，应该怎么配置

我给你写了一个demo demo中是分包subpackageA1调用存在subpackageB1的threeJs组件 subpackageA1没有引入是因为遵循uniapp的easyCom规则，当然你也可以手动引入 如果帮助到你请点赞哦！

还是感谢回答，我想问的是pageA1里面的组件(不是pageA1页面本身，而是pageA1里面的组件)，引用 /pages-three/threeJs/threeJs，应该怎么配置

回复 g***@163.com: 铁子 pageA1页面本身就是组件，vue所有的页面都是组件，只是每个人定义不同

在uni-app中，如果你的分包A的组件A1需要引用分包B的组件B1，这涉及到跨分包的模块引用问题。uni-app对于跨分包引用有一定的限制和配置要求。以下是一个示例，展示了如何在uni-app项目中配置跨分包组件引用。

1. 配置pages.json

首先，确保在pages.json中正确配置了分包。例如：

{
  "pages": [
    // 主包页面
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
    // 其他主包页面...
  ],
  "subPackages": [
    {
      "root": "pages/packageA/",
      "pages": [
        {
          "path": "a1/a1",
          "style": {
            "navigationBarTitleText": "A1"
          }
        }
      ],
      "name": "packageA"
    },
    {
      "root": "pages/packageB/",
      "pages": [
        {
          "path": "b1/b1",
          "style": {
            "navigationBarTitleText": "B1"
          }
        }
      ],
      "name": "packageB"
    }
  ]
}

2. 在组件A1中引用组件B1

由于直接跨分包引用组件在uni-app中是不被支持的，你需要通过全局注册或者利用import和export的方式进行间接引用。但是，由于分包加载的独立性，直接引用通常不可行。一个可行的方案是将B1组件的功能抽象为一个JS模块或Vuex状态管理，然后在A1中引用这个模块。

不过，如果你只是想在A1中展示B1组件的UI，且两个分包都会被加载（例如，通过路由跳转），你可以考虑将B1组件的注册逻辑放在一个公共的地方（如主包或某个全局注册文件），然后在A1中通过组件标签引用。

注意：以下方式不是直接跨分包引用，而是绕过限制的方法。

3. 示例代码（假设全局注册B1组件）

在主包或某个公共文件中全局注册B1组件：

// 在main.js或某个全局文件中
import Vue from 'vue';
import B1 from '@/pages/packageB/b1/b1.vue';

Vue.component('B1Component', B1);

然后在A1组件中使用：

<template>
  <view>
    <B1Component />
  </view>
</template>

<script>
export default {
  name: 'A1'
};
</script>

总结

直接跨分包引用组件在uni-app中并不被支持，但你可以通过全局注册组件、使用Vuex或抽象为JS模块等方式实现功能上的跨分包共享。上述示例展示了如何通过全局注册组件的方式间接实现跨分包引用。

回到顶部