Q: Vue自定义组件在H5端正常 ,在小程序中提示Component is not found in path"xxx组件的路径"
情景 : 使用自定义组件写了一个浮动按钮,点击浮动按钮跳转到另一个页面
自定义组件代码
<template>
<view class="floatButton" :style="{ '--right': `${rightPx}px`, '--bottom': `${bottomPx}px` }">
<!-- 浮动按钮 -->
<view class="nav-item nav-item__switch" @click="clickFloatButton()">
<text class='t-icon t-icon-gengduo iconspan'></text>
</view>
</view>
</template>
<script>
import {
getTabBarLinks
} from '@/utils/app.js'
export default {
/**
* 组件的属性列表
* 用于组件自定义设置
*/
props: {
right: {
type: Number,
default: 30
},
bottom: {
type: Number,
default: 100
}
},
data() {
return {
// 弹窗显示控制
isShow: false,
transparent: true
}
},
computed: {
rightPx() {
return uni.upx2px(this.right)
},
bottomPx() {
return uni.upx2px(this.bottom)
}
},
methods: {
/**
* 点击浮动按钮事件
*/
clickFloatButton() {
console.log("1")
this.$emit('onClick');
}
}
}
</script>
<style lang="scss" scoped>
// @import url("@/pages_device/iconfont/iconfont.css");
// @import url("@/pages_device/iconfont/iconfont.css");
@import url("@/static/iconfont/iconfont.css");
@import url("@/pages_device/iconfont/iconfont-weapp-icon.css");
/* 快捷导航 */
.floatButton {
position: fixed;
right: calc(var(--window-right) + var(--right));
bottom: calc(var(--window-bottom) + var(--bottom));
width: 76rpx;
height: 76rpx;
line-height: 1;
z-index: 5;
border-radius: 50%;
}
/* 导航菜单元素 */
.nav-item {
position: absolute;
bottom: 0;
padding: 0;
width: 76rpx;
height: 76rpx;
line-height: 76rpx;
color: #fff;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
text-align: center;
transform: rotate(0deg);
opacity: 0;
}
.nav-item .iconfont {
font-size: 46rpx;
color: transparent;
background-repeat: no-repeat;
}
/* 导航开关 */
.nav-item__switch {
opacity: 1;
}
.iconspan{ /*图标span 调整图标位置*/
display: inline-block;
margin-top: -5rpx; /* 3 */
transform: scale(2); /* 调节 icon 大小*/
vertical-align: middle;
}
</style>
在使用组件的vue 文件 : index.vue 位置引入,使用了相对路径
<script>
import FloatButton from '@/pages_device/components/shortcut/floatButton.vue'
</script>
在 index.vue 中使用
<floatButton @onClick="clickFloatButton()" />
在 hbuilderX当中用内置浏览器运行查看
使用微信小程序开发工具运行
报错
在微信小程序开发者工具中真机调试 – Android 端真机调试 === 不显示
在微信小程序开发者工具中真机调试 – PC 端真机调试 === 显示了
使用微信小程序开发工具运行
报错
在微信小程序开发者工具中真机调试 – Android 端真机调试 === 不显示
在微信小程序开发者工具中真机调试 – PC 端真机调试 === 显示了
问题猜测,可能是由于组件所在位置
// 尝试放到主分包下,可以正常显示
// import FloatButton from '@/components/my/floatButton.vue'
// 放在 device 下会不显示浮动按钮报错 : Component is not found in path "pages_device/components/shortcut/floatButton" (using by "pages/sys/device/index")
import FloatButton from '@/pages_device/components/shortcut/floatButton.vue'
但是主分包下不能放东西就很尴尬(因为微信小程序分包主包大小受限制)
总结 :
错误原因 : 公共组件要在主包,如果再分包,那这个组件只能在分包上使用,其他分包无法使用
主包不能调用分包的组件的,只有分包能调用主包的组件
代理商01 : http://localhost:8083/#/pages_device/device/index
admin : http://localhost:8083/#/pages/sys/device/index
这里的 index 是在主分包下的,所以不能调用 pages_device 里面的组件