uniapp 微信小程序异步调用分包的自定义组件

大家好，欢迎来到IT知识分享网。

需求：在分包subTainxin中创建自定义组件moreFun.vue，需要在主包的pages/index/index页面调用该自定义组件。

步骤流程：

1、在分包subTainxin中创建自定义组件moreFun.vue

<template> <view> <view v-for="(item,index) in funcList" :key="index" class="item_style"> <view class="flex_center"> <view class="order_flag"></view><span>{ 
  {item}}</span> <image src="../../static/images/drag.png" class="order_img flex_right"></image> </view> <view> </view> </view> </view> </template> <script> export default { data() { return { dataList:[], funcList:["胎心","血氧","体重"] } }, } </script> <style> .item_style { background-color: #ffffff; border-radius: 24rpx; height: 96rpx; margin: 24rpx 32rpx; padding:22rpx 24rpx } .flex_center { display: flex; align-items: center; } .order_flag { width:32rpx;height:32rpx; background-color: blue; border-radius: 36rpx; margin-right: 10rpx; } .order_img { width:42rpx;height:32rpx } .flex_right { position:absolute; right:48rpx; } </style>

2、在主包中调用：

2.1 在pages/index/index.vue中

<template> <index-pressure v-if="headerLists[changeText]=='血压'" :chartData="chartDataPressure" :changeText="changeTextPressure" :lastRecord="lastRecord_pressure" :chartSum="chartSumPressure" :stepData="stepData" :measureStagePressure="measureStagePressure"></index-pressure> <more-fun v-else></more-fun> </template> <script> import indexPressure from '../indexPressure/indexPressure.vue' import moreFun from '../../subTaixin/measureHeart/moreFun.vue' export default { components: { indexPressure, moreFun, }, } </script>

2.2 在pages.json中配置

"pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", "navigationStyle": "custom", //设置占位组件 "componentPlaceholder": { "more-fun":"view" } } }, ]

编译之后，在微信开发者工具中显示的信息为：

pages/index/index.json中

{ "navigationBarTitleText": "首页", "navigationStyle": "custom", "componentPlaceholder": { "more-fun": "view" }, "usingComponents": { "index-pressure": "/pages/indexPressure/indexPressure", "more-fun": "/subTaixin/measureHeart/moreFun" } }

在微信开发者工具的模拟器上测试，能调用成功，显示正常，但真机调试时，组件不显示，控制台报错Component is not found in path “subTaixin/measureHeart/moreFun” (using by “pages/index/index”)；

上传到体验版上，扫码测试时又正常。