Tui Plus Vapor

Appearance

组件编译增强 ​

tui-vitex 编译器提供了组件编译增强功能，对特定组件进行编译期优化，提高组件的性能和开发体验。

支持的组件 ​

t-view 组件 ​

t-view 是一个特殊的容器组件，它不是简单的 view 包装，而是一个会先参与编译转换、再交给官方编译器处理的特殊组件。

编译增强特性 ​

  1. 主题集成：自动集成主题配置
  2. 公共属性：处理公共事件和属性
  3. 结构优化：优化组件结构
  4. 样式增强：增强样式处理能力

编译过程 ​

ts
// 处理 t-view 组件
function processTView(node) {
  // 添加主题相关属性
  if (!node.props.find(p => p.name === 'theme')) {
    node.props.push({
      name: 'theme',
      value: 'default'
    });
  }
  
  // 优化结构
  if (node.children.length === 1 && node.children[0].type === 'text') {
    // 特殊处理文本节点
  }
  
  return node;
}

t-text 组件 ​

t-text 组件是对原生 text 标签的封装，主要解决小程序端 text 标签中使用 slot 的兼容性问题。

编译增强特性 ​

  1. 插槽兼容：解决小程序端 text + slot 的平台差异
  2. 文本优化：优化文本渲染性能
  3. 样式统一：统一文本样式处理

编译过程 ​

ts
// 处理 t-text 组件
function processTText(node) {
  // 检查是否包含插槽
  const hasSlot = node.children.some(child => child.type === 'slot');
  
  if (hasSlot) {
    // 小程序端需要特殊处理
    if (process.env.UNI_PLATFORM === 'mp-weixin') {
      // 转换为 view 标签
      node.name = 'view';
      node.props.push({
        name: 'class',
        value: 't-text-slot'
      });
    }
  }
  
  return node;
}

t-page 组件 ​

t-page 是页面级别的容器组件，提供了页面级的主题和布局管理。

编译增强特性 ​

  1. 页面布局：统一页面布局管理
  2. 主题应用：自动应用页面主题
  3. 生命周期：增强页面生命周期
  4. 导航栏：优化导航栏配置

编译增强原理 ​

组件转换流程 ​

  1. 识别组件：在编译过程中识别需要增强的组件
  2. 分析结构：分析组件的结构和属性
  3. 应用增强：应用相应的编译增强逻辑
  4. 生成代码：生成优化后的代码

增强处理 ​

ts
// 组件编译增强处理
function enhanceComponent(node, id) {
  switch (node.name) {
    case 't-view':
      return processTView(node);
    case 't-text':
      return processTText(node);
    case 't-page':
      return processTPage(node);
    default:
      return node;
  }
}

使用示例 ​

t-view 组件 ​

html
<t-view class="tbg-pn tp-m">
  <text class="ttl1">Hello World</text>
</t-view>

编译后：

html
<view class="tbg-pn tp-m t-view">
  <text class="ttl1">Hello World</text>
</view>

t-text 组件 ​

html
<t-text class="ttl1">
  Hello <slot></slot>
</t-text>

编译后（小程序端）：

html
<view class="ttl1 t-text-slot">
  Hello <slot></slot>
</view>

t-page 组件 ​

html
<t-page title="首页">
  
</t-page>

编译后：

html
<!-- APP端 -->
<scroll-view class="t-page">
  <!-- 页面内容 -->
</scroll-view>
<!-- 其它端编译结果 -->
<view class="t-page">

</view>

性能优化 ​

  1. 编译期优化：将运行时逻辑移到编译期
  2. 代码精简：移除不必要的代码
  3. 结构优化：优化组件结构
  4. 样式优化：优化样式处理

最佳实践 ​

  1. 合理使用：只在需要的地方使用增强组件
  2. 遵循规范：按照组件的使用规范进行开发
  3. 性能考虑：避免过度使用复杂组件
  4. 兼容性：考虑跨平台兼容性

常见问题 ​

组件不生效 ​

  • 检查组件名称是否正确
  • 确认是否正确引入组件
  • 查看控制台错误信息

编译报错 ​

  • 检查组件使用方式是否正确
  • 确认组件属性是否符合规范
  • 查看编译器错误信息

平台差异 ​

  • 了解不同平台的组件行为差异
  • 使用条件编译处理平台差异
  • 测试不同平台的组件表现

通过组件编译增强，tui-vitex 可以帮助开发者创建更高效、更一致的组件，同时减少平台差异带来的问题。