记录一个uniapp小程序端编译时问题

笨笨狗吞噬者2025-06-17 10:03

前言

上周修复了一个 uni-app 小程序端的问题，最初我看到这个问题是在浏览 ask社区的帖子，无意中发现了这个积攒已久的问题，就想着自己尝试解决一下，此篇文章记录整个过程。

问题说明

放一下测试代码

js 复制代码

// index.vue
<template>
  <view> 
    <Test>
      <template #default>#default</template>
    </Test>
  </view>
</template>

<script setup>
import Test from "./Test.vue";
</script>

js 复制代码

// Test.vue
<template>
    <view>
        <slot :a="1"></slot>
    </view>
</template>

显而易见，插槽没生效

解决思路

我最开始的思路的是抹除掉 slot 标签上的 name='d'，也进行了尝试，也生效了，不过后来看到了仓库里的代码

才发现那个不能动，所以就转换了一下思路。既然不能删除，那就添加一个 <slot></slot> 标签充当默认插槽。

实践

最开始我是提了两个，一个处理不带默认内容，一个处理带有默认内容

不过后来同事review的时候，感觉太分散了，想集中到 codegen.ts 文件处理

具体的思路就是在生成代码的时候，判断是否符合以下几个条件

插槽
name='d'
是否有默认内容

根据这个条件，在codegen的时候去默认添加一个空白插槽节点。

还有一些特殊的case，比如有些小程序平台是支持插槽默认内容的，比如抖音和阿里。

像一些不支持的，比如微信，uni-app这边会特殊处理一下

为了兼容这种情况，就需要再考虑一种case，把插槽默认的内容包裹在 slot 标签中。

代码就上面PR截图的最下面几行，感兴趣的掘友可以点击 github.com/dcloudio/un... 查看具体内容。

结语

如有问题，欢迎留言。