YZRHANYU 2022-08-29 16:26 采纳率: 57.1%
浏览 40
已结题

Vue自定义组件在H5端正常 ,在小程序中提示Component is not found in path

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当中用内置浏览器运行查看

img

使用微信小程序开发工具运行

报错

img

img

在微信小程序开发者工具中真机调试 -- Android 端真机调试 === 不显示

在微信小程序开发者工具中真机调试 -- PC 端真机调试 === 显示了

img

  • 写回答

2条回答 默认 最新

  • YZRHANYU 2022-08-30 11:13
    关注

    问题猜测,可能是由于组件所在位置

        // 尝试放到主分包下,可以正常显示
        // 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'
    
    

    但是主分包下由于一些原因不能放东西就很尴尬
    但是问题找到啦~

    总结 :

    错误原因 : 公共组件要在主包,如果再分包,那这个组件只能在分包上使用,其他分包无法使用

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 9月7日
  • 已采纳回答 8月30日
  • 修改了问题 8月29日
  • 创建了问题 8月29日

悬赏问题

  • ¥50 swiftui @query 报错
  • ¥50 怎么解决刷卡或扫码后,点击软件输入框,win10屏幕键盘不会自动弹出的问题
  • ¥15 如何使用arcgispro的训练深度模型,发现water和nowater精度为0?(相关搜索:深度学习)
  • ¥20 matlab作业不太懂呀有问题能给个代码吗
  • ¥15 自制电路图为何无法驱动ESP01S?
  • ¥15 前端加access数据库
  • ¥15 ARCGIS 多值提取到点 ERROR 999999
  • ¥15 mysql异常断电, [MY-011971] [InnoDB]
  • ¥15 uni.onBluetoothDeviceFound熄屏不运行
  • ¥15 求PHDA糖尿病并发症数据集,有偿