综合演示：网页留言板开发

文档概述

本例程演示了如何使用轻语言编写一个简单的本地留言板网站。整个项目仅由前端页面构成，不依赖后端服务与数据库，留言数据保存在内存中的列表框组件内，刷新页面后会清空——适合用来学习轻语言的页面布局、事件驱动、组件批量操作、列表框动态渲染等核心知识点。

💡 本演示为「纯前端 + 内存存储」的入门示例。如需持久化存储留言，可参考文档综合演示：MySQL数据库操作，将留言通过 请求接口 提交到 .sph 后端脚本入库。

学习目标

阅读本文档后，你应当能够掌握以下内容：

  • 轻语言网站项目的「页面布局文件（.spldg）+ 页面逻辑文件（.spl）」成对组织方式
  • 事件驱动编程模型：事件 ... 结束 事件、函数 ... 结束 函数 的语法结构
  • 绝对布局下的相对对齐技巧：置组件水平居中、右侧对齐到、右侧对齐到左、顶边对齐到底
  • 组件尺寸特殊取值 -1（填充父布局）与 -2（匹配内容）的语义
  • 列表框「数据 + 渲染回调」的分离式渲染模式：添加项目 → 置请求加载项目回调 → 渲染
  • 拉姆达表达式（箭头函数）在回调中的写法：(参数) => { ... }
  • 使用 InnerHTML 结合 HTML 标签实现富文本展示

涉及组件

本演示实际使用到的组件如下（按代码出现顺序）：

组件名称作用参考文档
页面<页面>页面根容器，承载标题、宽高等文档框架基础类_页面
绝对布局<绝对布局>父级定位容器，子组件以坐标绝对定位文档布局类组件_绝对布局
标签<标签>显示标题、统计文本、版权信息等文档文本类组件_标签
编辑框<编辑框>多行留言内容输入文档文本类组件_编辑框
表单输入框<表单输入框>单行昵称输入，带标题标签文档文本类组件_表单输入框
按钮<按钮>提交留言文档文本类组件_按钮
列表框<列表框>展示留言列表，按需渲染每一项文档列表类组件_列表框

📌 列表框中的每一项留言并非预置组件，而是在 置请求加载项目回调 中通过 创建 标签() 动态生成的标签组件——这是一种「数据驱动渲染」的模式，详见后文「关键代码解读」。

涉及函数与关键字

以下为本演示代码中出现的轻语言关键字与内置函数，便于 AI 在生成类似代码时准确复用：

关键字： 变量、事件 ... 结束 事件、函数 ... 结束 函数、如果 ... 否则 ... 结束 如果、或、创建、返回

全局函数：

  • 置页面标题(标题) —— 设置浏览器标签页标题
  • 置组件左边(值, 组件1, 组件2, ...) —— 批量设置多个组件的左边距
  • 置组件宽度(值, 组件1, 组件2, ...) —— 批量设置多个组件的宽度
  • 置组件水平居中(组件) —— 让指定组件在页面水平方向居中
  • 弹出提示(文本) —— 浏览器弹出轻提示

组件方法（视图类通用）：

  • 追加内联样式(样式文本) —— 追加 CSS 内联样式，如 "font-size:36px;"
  • 右侧对齐到(目标组件) —— 将当前组件右边缘对齐到目标组件右边缘
  • 右侧对齐到左(目标组件, 偏移量) —— 将当前组件右边缘对齐到目标组件左边缘，可指定间距
  • 顶边对齐到底(目标组件, 偏移量) —— 将当前组件顶边对齐到目标组件底边，可指定间距

列表框方法：

  • 添加项目(数据对象) —— 向列表框数据集合追加一条数据
  • 置请求加载项目回调(回调) —— 设置渲染回调，列表框渲染时会按索引逐项调用，返回值为该项要显示的视图组件
  • 渲染() —— 触发列表框按当前数据集合重新渲染
  • 取项目数() —— 取得当前列表框中的项目数量

程序结构与运行流程

本项目为标准的轻语言网站页面，由成对的两个文件组成：

首页.spldg   ← 页面布局文件（XML 格式，定义组件结构与初始属性）
首页.spl     ← 页面逻辑文件（轻语言代码，定义事件与函数）

运行时流程如下：

  1. 浏览器打开网站 → 执行入口文件 App.spl（本演示未展示，可参考 文档轻语言网站：程序入口文件）
  2. 入口文件调用 切换页面("首页") 加载 首页
  3. 框架解析 首页.spldg 构建 DOM，再执行 首页.spl 中的 页面加载完毕 事件
  4. 用户输入昵称与留言后点击「提交留言」→ 触发 按钮1.被单击 事件
  5. 校验非空 → 构造留言对象 → 加入列表框 → 重新渲染 → 清空输入框 → 更新统计
  6. 浏览器窗口尺寸变化时 → 触发 窗口尺寸被改变 事件 → 重新调用 调整页面布局 完成自适应

数据模型

每条留言以一个轻语言对象表示，结构如下：

变量 留言信息 = { "昵称": "张三", "留言内容": "你好，留言板！" }

该对象作为数据项被 添加项目 加入列表框的数据集合；在渲染回调中通过 项目集合[索引] 取出，访问 .昵称 与 .留言内容 两个属性构造展示内容。

程序源代码

首页.spldg

<?xml version="1.0" encoding="utf-8"?>
<页面 标题="页面标题" 宽度="655" 高度="449">
  <绝对布局 名称="根布局">
    <绝对布局 名称="绝对布局1" 左边="70" 顶边="27" 高度="390" 宽度="512">
      <标签 名称="标签1" 左边="3" 顶边="13" 高度="59" 宽度="244" 文本="我的留言板" />
      <标签 名称="标签2" 宽度="167" 高度="29" 左边="3" 顶边="78" 文本="留言（共有0条留言）" />
      <编辑框 名称="编辑框1" 左边="3" 顶边="113" 高度="80" 宽度="495" />
      <按钮 名称="按钮1" 左边="404" 顶边="213" 高度="31" 宽度="94" 文本="提交留言" />
      <表单输入框 名称="表单输入框1" 左边="185" 顶边="213" 高度="31" 宽度="213" 标题="表单输入框1" />
      <列表框 名称="列表框1" 左边="9" 顶边="250" 高度="98" 宽度="488" />
      <标签 名称="标签3" 左边="155" 顶边="354" 高度="33" 宽度="206" 文本="VcnStudio.Inc © 2025" />
    </绝对布局>
  </绝对布局>
</页面>

首页.spl

' ****************************************************************************
' 版权说明：Copyright（C） All Rights Reserved VcnStudio
' 程序版本：V1.0
' 程序作者：
' 联系信息：
' 窗口描述：简单的留言板演示。
' ****************************************************************************

' 页面变量，整个页面都能使用
变量 页面变量 = "首页"

事件 页面加载完毕()
    置页面标题("我的留言板 - By:VcnStudio")
    
    ' 设置内容布局的宽度始终为浏览器大小的80%
    ' 注意：这里不能使用 % 百分比、只能使用单位 vw
    绝对布局1.宽度 = "80vw"
    
    ' 初始化设置大标题样式及提示内容
    标签1.追加内联样式("font-size:36px;font-weight:700;")
    标签1.宽度 = -1 ' 填充父布局，标签宽度等于父布局
    标签1.高度 = -2 ' 匹配内容，内容多高、标签就多高
    标签1.背景颜色 = "#daffe2"
    '
    编辑框1.提示文本 = "请输入留言内容"
    表单输入框1.标题 = "昵称："
    表单输入框1.提示文本 = "请输入昵称"
    '列表框1.显示模式 = 隐藏元素
    标签3.内容水平对齐方式 = 居中
    标签3.字体大小 = 14
    标签3.文本颜色 = "#2b2b2b"
    
    ' 批量调整组件左边及宽度（占满父布局）
    置组件左边(0,标签1,标签2,编辑框1,列表框1,标签3)
    置组件宽度(-1,标签1,标签2,编辑框1,列表框1,标签3)
    
    ' 调整组件在页面中的布局
    调整页面布局()
    
    ' 初始化列表框及监听其渲染
    列表框1.拉伸内容 = 真
    列表框1.置请求加载项目回调((项目集合,索引)=>{
        变量 局_标签 = 创建 标签()
        局_标签.定位 = ""
        局_标签.行高 = 30
        局_标签.InnerHTML = "用户：<b>" + 项目集合[索引].昵称 + " </b>给你留言：<br>留言内容：" + 项目集合[索引].留言内容
        返回 局_标签
    })
结束 事件

函数 调整页面布局()
    ' 设置放置界面内容的绝对布局1始终保持在页面中水平居中
    置组件水平居中(绝对布局1)
    ' 将按钮对齐到编辑框1的右侧
    按钮1.右侧对齐到(编辑框1)
    ' 将表单输入框放在按钮的左侧
    表单输入框1.右侧对齐到左(按钮1,10)
结束 函数

事件 按钮1.被单击(源对象,事件源)
	如果(编辑框1.内容 == "" 或 表单输入框1.内容 == "")
        弹出提示("留言内容及昵称不能为空！")
        返回
    结束 如果
    ' 构建一个留言信息对象体、然后将其添加到列表框中、然后渲染一下
    变量 留言信息 = { "昵称":表单输入框1.内容, "留言内容":编辑框1.内容 }
    列表框1.添加项目(留言信息)
    列表框1.渲染()
    ' 清空输入的内容
    编辑框1.内容 = ""
    表单输入框1.内容 = ""
    ' 移动标签3位置、让其始终保持在列表底部
    标签3.顶边对齐到底(列表框1,20)
    ' 修改留言统计标签内容
    标签2.InnerHTML = "留言（共有<span style='color:red;'>"+ 列表框1.取项目数() +"</span>条留言）"
结束 事件

事件 窗口尺寸被改变()
    调整页面布局()
结束 事件

关键代码解读

1. 组件尺寸的特殊取值：-1 与 -2

标签1.宽度 = -1 ' 填充父布局，标签宽度等于父布局
标签1.高度 = -2 ' 匹配内容，内容多高、标签就多高

在轻语言中，给组件的宽度/高度赋值为整数时有特殊语义：

  • -1 表示「填充父布局」（类似 CSS 的 width:100%）
  • -2 表示「匹配内容」（类似 CSS 的 height:auto）
  • 普通整数表示像素值（如 30 等价于 30px）
  • 带单位的字符串需用双引号包裹，如 "80vw"、"100%"

📌 在 .spldg 中设置宽度时可直接写整数；在 .spl 代码中赋值字符串单位时必须加双引号，否则会被当作数值处理。

2. 批量操作函数：变参组件参数

置组件左边(0,标签1,标签2,编辑框1,列表框1,标签3)
置组件宽度(-1,标签1,标签2,编辑框1,列表框1,标签3)

置组件左边、置组件宽度 等函数支持「首参数为值，其后为任意数量的组件引用」的变参形式，可一次性统一多个组件的布局属性，避免对每个组件单独赋值。这是轻语言中常见的「批量布局工具函数」模式。

3. 绝对布局下的相对对齐

虽然父容器是「绝对布局」，但通过一组对齐方法可以让子组件之间产生「相对位置关系」，从而实现类似流式布局的效果：

置组件水平居中(绝对布局1)        ' 让绝对布局1在页面水平居中
按钮1.右侧对齐到(编辑框1)         ' 按钮右边对齐到编辑框右边
表单输入框1.右侧对齐到左(按钮1,10) ' 表单输入框右边对齐到按钮左边，留 10px 间距
标签3.顶边对齐到底(列表框1,20)    ' 版权标签始终跟在列表框下方 20px 处

💡 这些方法都继承自 视图 类，所有可视组件均可使用。完整方法列表见 文档框架基础类_视图。

4. 列表框的数据驱动渲染模式

列表框采用「数据集合 + 渲染回调」分离的设计：

' 第一步：配置渲染回调（每渲染一项就调用一次）
列表框1.置请求加载项目回调((项目集合,索引)=>{
    变量 局_标签 = 创建 标签()       ' 动态创建一个标签作为该项的展示视图
    局_标签.定位 = ""                ' 清除绝对定位，交由列表框接管布局
    局_标签.行高 = 30
    局_标签.InnerHTML = "用户：<b>" + 项目集合[索引].昵称 + " </b>给你留言：<br>留言内容：" + 项目集合[索引].留言内容
    返回 局_标签                     ' 返回该项要显示的视图组件
})

' 第二步：添加数据
变量 留言信息 = { "昵称":..., "留言内容":... }
列表框1.添加项目(留言信息)

' 第三步：触发渲染
列表框1.渲染()

要点：

  • 添加项目 只是向数据集合追加一条记录，不会立即产生 DOM
  • 必须调用 渲染() 后，框架才会遍历数据集合，按索引回调取每一项的视图
  • 回调返回的视图由列表框自动添加到容器中，开发者无需手动 添加组件
  • 回调内 创建 标签() 动态生成的组件，需设置 .定位 = "" 以便由列表框统一布局
  • 拉伸内容 = 真 表示隐藏滚动条、内容全部展开

5. 拉姆达表达式（箭头函数）作为回调

列表框1.置请求加载项目回调((项目集合,索引)=>{
    ' 回调体
    返回 局_标签
})

轻语言支持 (参数) => { 语句 } 形式的拉姆达表达式（编译为 JavaScript 箭头函数），常用于事件回调和异步回调中。详见 文档轻语言网站：轻语言语法速查 中的「拉姆达表达式」一节。

6. 富文本展示：InnerHTML 与 HTML 标签

标签2.InnerHTML = "留言（共有<span style='color:red;'>"+ 列表框1.取项目数() +"</span>条留言）"

通过 InnerHTML 属性可注入 HTML 片段，实现加粗（<b>）、换行（<br>）、带样式（<span style='...'>）的富文本展示。注意样式值使用单引号包裹，以避免与轻语言字符串的双引号冲突。

7. 事件驱动与页面自适应

事件 窗口尺寸被改变()
    调整页面布局()
结束 事件

窗口尺寸被改变 是页面级事件（详见 文档框架基础类_页面），浏览器窗口尺寸变化时触发。本演示将布局逻辑封装到 调整页面布局 函数中，在「页面加载完毕」和「窗口尺寸被改变」两处统一调用，实现内容随窗口宽度（80vw）变化而水平居中并保持组件相对位置。

注意事项

  • 本演示的留言数据仅存于浏览器内存中，刷新页面后会丢失；如需持久化，可改用后端接口（参考 文档综合演示：MySQL数据库操作）或使用 保存配置/读取配置 函数将数据写入浏览器本地存储（参考 文档综合演示：XML 定义待办事项列表演示）。
  • 宽度单位使用 vw（视口宽度的百分比）而非 %，因为绝对布局的百分比是基于父元素宽度，而 vw 始终基于浏览器视口，更适合做整页自适应。
  • 列表框1.拉伸内容 = 真 会让列表框隐藏滚动条、随内容增高，因此底部版权标签需用 顶边对齐到底 动态跟随，避免被内容遮挡。
  • 代码中的注释使用单引号 '，不能使用 // 或 /* */，详见 文档轻语言网站：轻语言语法速查。

学习要点总结

知识点关键代码适用场景
页面文件成对组织首页.spldg + 首页.spl所有轻语言网站页面
事件驱动事件 页面加载完毕() / 事件 按钮1.被单击(...)用户交互响应
自定义函数函数 调整页面布局()复用逻辑
尺寸特殊值宽度 = -1 / 高度 = -2自适应布局
批量布局置组件宽度(-1, 组件1, 组件2, ...)统一多个组件属性
相对对齐右侧对齐到 / 右侧对齐到左 / 顶边对齐到底绝对布局下的相对定位
列表框渲染置请求加载项目回调 + 渲染()数据驱动列表展示
动态创建组件创建 标签()在回调中按需生成视图
拉姆达回调(参数) => { ... }异步与事件回调
富文本InnerHTML加粗、换行、行内样式
窗口自适应事件 窗口尺寸被改变()响应式布局

相关文档

  • 文档轻语言网站：工程项目结构 —— 了解 .spl/.spldg 等文件类型的命名约定
  • 文档轻语言网站：程序入口文件 —— 了解 App.spl 与 网站被访问 事件
  • 文档轻语言网站：轻语言语法速查 —— 关键字、运算符、流程控制、函数、拉姆达表达式
  • 文档框架基础类_视图 —— 所有可视组件的公共属性与方法（含对齐方法）
  • 文档框架基础类_页面 —— 页面级事件（页面加载完毕、窗口尺寸被改变等）
  • 文档列表类组件_列表框 —— 列表框的完整属性、方法与示例
  • 文档综合演示：XML 定义待办事项列表演示 —— 类似的列表渲染模式，含本地持久化
  • 文档综合演示：MySQL数据库操作 —— 后端接口与数据库持久化方案