从 0 到 1 实现CloudBase云开发 + 低代码全栈开发活动管理小程序(12)

第 12 章：组件渲染引擎

"编辑器负责生产数据，渲染引擎负责消费数据。"

渲染引擎 (Rendering Engine) 是连接数据与界面的最后一公里。它不仅运行在用户端的展示页，也运行在编辑器内部（作为预览）。

12.1 运行时 vs 编辑时

在我们的架构中，组件 (src/components/ActivityDesign/widget/*) 被设计为双模态：

vue 复制代码

<!-- widget/Button.vue -->
<script setup>
const props = defineProps({
  mode: { type: String, default: 'view' }, // 'view' | 'edit'
  isPreview: Boolean
})

const handleClick = () => {
  // 编辑模式下，点击不触发业务逻辑，而是被外层捕获用于选中
  if (props.mode === 'edit' && !props.isPreview) return

  // 运行时逻辑：跳转报名页
  uni.navigateTo({ url: '/pages/registration/index' })
}
</script>

这种设计保证了所见即所得。编辑器里看到的组件，和最终用户看到的组件，使用的是同一套代码。

12.2 动态组件渲染

虽然我们在编辑器里使用了 v-if/v-else-if 来枚举组件，但在最终的活动详情页 (pages/activity/detail) ，我们通常会封装一个纯粹的渲染器组件 ActivityRenderer。

vue 复制代码

<template>
  <view class="activity-renderer">
    <view v-for="item in components" :key="item.id" class="widget-wrapper" :style="item.style">
      <!-- 这里的组件只负责展示，没有任何编辑逻辑 -->
      <ImageWidget v-if="item.type === 'image'" :item="item" />
      <TextWidget v-else-if="item.type === 'text'" :item="item" />
      <!-- ... -->
    </view>
  </view>
</template>

12.3 样式计算与应用

组件的样式来源有两个：

Preset Styles (预设样式): 组件内部写死的 CSS，比如按钮的圆角、阴影。
Config Styles (配置样式): 用户在属性面板设置的颜色、字号。

在 Widget 内部，我们将配置映射为内联样式：

javascript 复制代码

const style = computed(() => ({
  fontSize: props.item.config.fontSize + 'rpx',
  color: props.item.config.color,
  textAlign: props.item.config.align,
  fontWeight: props.item.config.bold ? 'bold' : 'normal'
}))

12.4 性能优化技巧

当页面包含大量组件（如长图文页面）时，渲染可能会卡顿。

按需加载 : 只有进入视口的组件才加载图片资源（UniApp 的 image 组件自带 lazy-load）。
层级优化: 尽量减少嵌套。我们的 Widget 内部结构非常扁平。
静态提升: 对于不依赖配置的静态部分，Vue 编译器会自动优化。

本章小结：组件化思想贯穿了从数据库设计、编辑器实现到前端渲染的始终。通过这套体系，我们不仅实现了"可配置"，更实现了"可维护"和"可扩展"。

至此，可视化编辑器的核心秘密已全部揭晓。接下来的章节，我们将介绍一些锦上添花的高级特性，比如文件上传和海报生成。

下一章（13-文件上传与云存储）