记录一个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... 查看具体内容。

结语

如有问题,欢迎留言。

相关推荐
李鸿耀3 小时前
主题换肤指南:设计到开发的完整实践
前端
2501_916013744 小时前
iOS 26 系统流畅度检测 从视觉特效到帧率稳定的实战策略
android·macos·ios·小程序·uni-app·cocoa·iphone
带娃的IT创业者8 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
非凡ghost9 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_11069 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白9 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
学习同学10 小时前
从0到1制作一个go语言游戏服务器(二)web服务搭建
服务器·前端·golang
-D调定义之崽崽10 小时前
【初学】调试 MCP Server
前端·mcp
四月_h10 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate11 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端