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

前言

上周修复了一个 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... 查看具体内容。

结语

如有问题,欢迎留言。

相关推荐
IT_陈寒6 小时前
SpringBoot 3.2新特性盘点:这5个隐藏功能让你的开发效率翻倍 🚀
前端·人工智能·后端
艾小码7 小时前
从入门到精通:JavaScript异步编程避坑指南
前端·javascript
七度光阴;7 小时前
Web后端登录认证(会话技术)
前端·tlias智能辅助系统
菜鸟una8 小时前
【微信小程序 + map组件】自定义地图气泡?原生气泡?如何抉择?
前端·vue.js·程序人生·微信小程序·小程序·typescript
昔人'10 小时前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html
狂团商城小师妹14 小时前
XYlease租赁商城小程序
微信·微信小程序·小程序
岁月宁静15 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
2501_9159090615 小时前
“绑定 HTTPS” 的工程全流程 从证书配置到真机验证与故障排查
网络协议·http·ios·小程序·https·uni-app·iphone
心易行者16 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~16 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts