uni-app里的components编译后的.js文件内容只有Component({})

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

uni-app里的components编译后的.js文件内容只有Component({})

项目信息 详情
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 14.6.1
HBuilderX类型 正式
HBuilderX版本号 4.24
第三方开发者工具版本号 1.0.6
基础库版本号 3.4.2
项目创建方式 HBuilderX

示例代码：

"mp-weixin" : {  
    "appid" : "xxxxx",  
    "setting" : {  
        "coverView" : true,  
        "es6" : false,  
        "postcss" : false,  
        "minified" : false,  
        "enhance" : false,  
        "showShadowRootInWxmlPanel" : true,  
        "packNpmRelationList" : [],  
        "babelSetting" : {  
            "ignore" : [],  
            "disablePlugins" : [],  
            "outputPath" : ""  
        },  
        "ignoreUploadUnusedFiles" : true  
    },  
    "usingComponents" : true,  
    "permission" : {  
        "scope.userLocation" : {  
            "desc" : "你的位置信息将用于小程序位置接口的效果展示"  
        }  
    },  
    "plugins" : {  
        "wxacommentplugin" : {  
            "version" : "latest",  
            "provider" : "xxx"  
        }  
    }  
},

操作步骤：

<template>  
    <view class="c-bottomShare">  
        bottom-sharesdf23  
    </view>  
</template>  

<script>  
export default {  
    mounted() {  
        console.log('mount');  
    },  
};  
</script>  
<style>  
.redc {color:red;}  
</style>

预期结果：

转换后的 .js 是有代码的

实际结果：

只有 Component({})

bug描述：

uniapp 里的 components 文件编译后的 .js 文件内容只有 Component({})


Harmonyos Next教程
4 回复

你好，我也遇到了同样的问题，请问你解决了吗


我也是遇到了这样的问题，已经解决了。

重新建一个项目就没问题了

在 uni-app 中，当你定义一个组件并在项目中引用它时，经过编译后生成的 .js 文件内容可能看起来只有 Component({}) 这样的结构。这实际上是因为 uni-app 在编译过程中，会将组件的模板、样式以及脚本进行打包和处理，最终生成一个简化的、可直接被框架识别的组件定义。

以下是一个简单的示例，展示如何在 uni-app 中定义一个组件，并理解编译后的输出。

1. 定义组件

首先，在 components 目录下创建一个组件文件，例如 MyComponent.vue：

<template>
  <view class="container">
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, uni-app!'
    };
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
</style>

2. 使用组件

在页面的 .vue 文件中引用并使用这个组件，例如 pages/index/index.vue：

<template>
  <view>
    <MyComponent />
  </view>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue';

export default {
  components: {
    MyComponent
  }
};
</script>

3. 编译后的输出

当你运行 uni-app 的构建或预览命令时，uni-app 框架会对你的组件和页面进行编译。编译后的组件 .js 文件可能看起来像这样：

Component({
  data: function () {
    return {
      message: 'Hello, uni-app!'
    };
  },
  // 其他生命周期函数和方法会被自动添加，例如 attached, detached, methods 等
  // 这里为了简洁，只展示了 data 部分
});

注意，编译后的输出中可能不会显式包含模板和样式，因为这些部分通常会被转换成小程序框架能够理解的形式，并嵌入到最终的包中。例如，模板可能被转换成 WXML，样式可能被转换成 WXSS。

总的来说，uni-app 的编译过程会处理你的组件定义，生成适合目标平台（如小程序、H5、App等）的代码。因此，即使编译后的 .js 文件看起来只有 Component({})，实际上它背后包含了复杂的转换和处理过程。

回到顶部