需求:在分包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");
上传到体验版上,扫码测试时又正常。