综合演示：手机移动端记事本网页开发

文档概述

本例程演示如何使用轻语言开发一个手机移动端记事本网站，覆盖三个页面（欢迎页、笔记列表页、撰写笔记页）的页面跳转、参数传递、移动端布局适配、列表渲染、延时执行等典型移动端开发知识点。整个项目仅由前端页面构成，使用模拟数据，不依赖后端服务。

💡 本演示在 .spldg 中通过 类型="wap" 指定页面为移动端类型；运行时请在浏览器开发者工具中将设备模式切换为手机（移动端）以查看效果。

学习目标

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

  • 移动端页面声明：在 .spldg 中为 <页面> 节点设置 类型="wap"
  • 多页面跳转：切换页面(目标页面, 参数) 与 后退页面()
  • 跨页面参数传递与接收：切换页面("...", "id=1") → 取请求参数()
  • 顶部固定标题栏的实现：定位 = "fixed" + 显示层级
  • 右下角悬浮按钮的实现：使用 CSS calc() 结合 vh/vw 视口单位
  • 延时执行：延时执行(回调, 毫秒) 实现欢迎页倒计时跳转
  • 批量布局函数：批量赋值、置组件水平居中、置组件居中
  • 列表框的数据驱动渲染（与留言板演示同源）

涉及组件

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

组件名称作用参考文档
页面<页面 类型="wap">移动端页面根容器文档框架基础类_页面
绝对布局<绝对布局>父级定位容器文档布局类组件_绝对布局
标签<标签>顶部固定标题栏、欢迎语文档文本类组件_标签
列表框<列表框>笔记列表展示文档列表类组件_列表框
图片框<图片框>右下角悬浮书写图标、返回图标文档图像类组件_图片框
单行输入框<单行输入框>输入笔记标题文档文本类组件_单行输入框
编辑框<编辑框>输入笔记正文文档文本类组件_编辑框
按钮<按钮>提交保存文档文本类组件_按钮

📌 原文档列出的「列表框选项」「列表框选项标签」在本演示代码中并未出现——列表项是通过 置请求加载项目回调 中 创建 标签() 动态生成的，与留言板演示同源。详见后文「关键代码解读」。

涉及函数与关键字

以下为本演示代码中出现的轻语言关键字与内置函数：

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

全局函数（页面跳转与参数）：

  • 切换页面(页面名称, 数据值) —— 切换到指定页面，可携带键值对参数（如 "id=1"）
  • 后退页面() —— 返回上一页（基于浏览器 history）
  • 取请求参数() —— 取得从上一页面切换过来时传递的参数，返回对象

全局函数（布局与延时）：

  • 置组件居中(...视图组件) —— 让组件在页面中水平+垂直居中
  • 置组件水平居中(...视图组件) —— 让组件在页面中水平居中
  • 批量赋值(属性名称, 目标值, ...视图组件) —— 批量给多个组件的同一属性赋值
  • 延时执行(子函数, 等待时间) —— 在指定毫秒后执行一次回调

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

  • 移动(左边, 顶边, 宽度, 高度) —— 一次性设置组件位置与尺寸
  • 置被单击回调(回调) —— 设置被单击的回调
  • 顶边对齐到底(目标组件, 偏移量) —— 顶边对齐到目标组件底边
  • 追加内联样式(样式文本) —— 追加 CSS 内联样式

列表框方法：

  • 添加项目(数据对象) —— 追加一条数据
  • 置请求加载项目回调(回调) —— 设置渲染回调
  • 渲染() —— 触发渲染
  • 拉伸内容 = 真 —— 隐藏滚动条、内容全部展开

程序结构与页面导航流

本项目由三个成对的页面文件组成：

欢迎页面.spldg + 欢迎页面.spl     ← 启动页，延时 1.5 秒后跳转列表页
笔记列表页.spldg + 笔记列表页.spl ← 笔记列表，点击项或书写图标跳转撰写页
撰写笔记页.spldg + 撰写笔记页.spl ← 笔记编辑，点击返回图标或保存后后退

页面跳转与参数传递流程：

欢迎页面 ──(延时 1.5s, 无参数)──> 笔记列表页
                                      │
                                      ├──(图片框1 被单击, 无参数)──> 撰写笔记页
                                      │
                                      └──(列表项被单击, "id=N")──> 撰写笔记页
                                                                    │
                                                                    └──(图片框1/按钮1 保存)──后退--> 笔记列表页

在 撰写笔记页 中通过 取请求参数() 取得 id 字段，用于从接口取回原笔记内容回填到编辑框（本演示为模拟数据）。

数据模型

列表项数据结构：

变量 项目对象 = { }
项目对象.标题 = "这是笔记标题" + i

跨页面传递参数采用键值对文本，接收时取对象属性：

' 传递：切换页面("撰写笔记页","id=" + 被单击索引)
' 接收：变量 参数值 = 取请求参数()
'       调试输出(参数值.id)

程序源代码

欢迎页面.spldg

<?xml version="1.0" encoding="utf-8"?>
<页面 标题="页面标题" 宽度="320" 高度="600" 类型="wap">
  <绝对布局 名称="根布局">
    <标签 名称="标签1" 左边="51" 顶边="128" 高度="52" 宽度="219" 文本="欢迎使用手机端网页笔记" 内容水平对齐方式="center" />
  </绝对布局>
</页面>

欢迎页面.spl

' ****************************************************************************
' 版权说明：Copyright（C） All Rights Reserved VcnStudio
' 程序版本：V1.0
' 程序作者：
' 联系信息：
' 窗口描述：默认首页。
' ****************************************************************************

' ****************************************************************************
' 注意：
'         运行本程序后，请在浏览器中将设备模式调整为手机（移动端）模式
' ****************************************************************************

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

事件 页面加载完毕()
    置组件居中(标签1)
    ' 等待 1.5 秒后切换到笔记列表页面
    延时执行(()=>{
        切换页面("笔记列表页")
    },1500)
结束 事件

笔记列表页.spldg

<?xml version="1.0" encoding="utf-8"?>
<页面 标题="页面标题" 宽度="320" 高度="600" 类型="wap">
  <绝对布局 名称="根布局">
    <标签 名称="标签1" 左边="3" 顶边="0" 高度="40" 宽度="314" 文本="笔记列表" 背景颜色="#408127" 文本颜色="#ffffff" />
    <列表框 名称="列表框1" 左边="3" 顶边="92" 高度="127" 宽度="141" />
    <图片框 名称="图片框1" 左边="252" 顶边="261" 高度="50" 宽度="50" 图片="static/write.png" />
  </绝对布局>
</页面>

笔记列表页.spl

' ****************************************************************************
' 版权说明：Copyright（C） All Rights Reserved VcnStudio
' 程序版本：V1.0
' 文件描述：
' 修改日志：
' ****************************************************************************

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

事件 页面加载完毕()
    ' 让标签1作为顶部标题，且固定
    标签1.内容水平对齐方式 = "center"
    标签1.移动(0,0,"100%","50px")
    标签1.定位 = "fixed"
    标签1.显示层级 = "998"
    ' 让标题文字垂直居中
    标签1.行高 = "50px"
    ' 调整列表框布局和书写图标
    列表框1.移动(0,"50px","100%","100%")
    ' 书写小图标；宽高为 50px
    ' 顶边设置为：页面高度 - 100px ，左边为 页面宽度 - 100px
    ' 这样可以让小图标位于页面的右下角，这里的 calc 是一个CSS内置计算函数，具体使用可自行网上查询
    图片框1.顶边 = "calc(100vh - 100px)"
    图片框1.左边 = "calc(100vw - 100px)" 
    ' 设置显示层级到最上边，这样不会被列表框的内容遮盖
    图片框1.显示层级 = 999
    ' 设置定位为 fixed 固定，这样小图标不会随着页面移动
    图片框1.定位 = "fixed"
    ' 初始化列表框
    初始化笔记列表()
结束 事件

函数 初始化笔记列表()
    列表框1.拉伸内容 = 真
    ' 模拟添加一些项目数据
    变量循环(i = 0,30,1)
        变量 项目对象 = { }
        项目对象.标题 = "这是笔记标题" + i
        列表框1.添加项目(项目对象)
    结束循环
    ' 设置监听加载项目时，每个项目的渲染布局排版内容
    列表框1.置请求加载项目回调((项目集合,索引)=>{
        变量 标题标签 = 创建 标签()
        标题标签.字体大小 = "14px"
        标题标签.内边距 = "10px"
        标题标签.文本 = 项目集合[索引].标题
        标题标签.置被单击回调(()=>{
            列表项目被单击(索引)
        })
        返回 标题标签
    })
    列表框1.渲染()
结束 函数

函数 列表项目被单击(被单击索引)
    调试输出("项目被单击：" + 被单击索引)
    ' 切换页面时，将目标索引或笔记ID传递给撰写笔记页面
    ' 在撰写笔记页面，取出传递的ID，然后获取笔记、并将其笔记内容设置到编辑框中
    切换页面("撰写笔记页","id=" + 被单击索引)
结束 函数

事件 图片框1.被单击(源对象,事件源)
    切换页面("撰写笔记页")
结束 事件

撰写笔记页.spldg

<?xml version="1.0" encoding="utf-8"?>
<页面 标题="页面标题" 宽度="320" 高度="706" 类型="wap">
  <绝对布局 名称="根布局">
    <单行输入框 名称="单行输入框1" 左边="15" 顶边="70" 高度="43" 宽度="288" 提示文本="请输入笔记标题" />
    <编辑框 名称="编辑框1" 左边="15" 顶边="136" 高度="431" 宽度="287" 提示文本="请输入笔记内容" />
    <按钮 名称="按钮1" 左边="15" 顶边="593" 高度="42" 宽度="286" 文本="提交" 背景颜色="#408127" 文本颜色="#FFFFFF" />
    <标签 名称="标签1" 左边="0" 顶边="0" 高度="43" 宽度="320" 背景颜色="#408127" 文本颜色="#ffffff" 文本="撰写笔记" />
    <图片框 名称="图片框1" 左边="3" 顶边="1" 高度="42" 宽度="49" 图片="static/back.png" />
  </绝对布局>
</页面>

撰写笔记页.spl

' ****************************************************************************
' 版权说明：Copyright（C） All Rights Reserved VcnStudio
' 程序版本：V1.0
' 文件描述：
' 修改日志：
' ****************************************************************************

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

事件 页面加载完毕()
    初始化调整页面布局()
    ' 获取上个页面传递过来的数据
    变量 参数值 = 取请求参数()
    如果(参数值 != 空)
        ' 这里返回的参数值为一个对象，例如：上个窗口传递的为 id = 1
        ' 那么这里就能直接通过这个参数值调用 id 这个字段
        调试输出(参数值)
        ' 输出id的值
        调试输出(参数值.id)
        ' 根据 id 查询接口获取当前笔记内容、并将其设置到编辑框中
        ' 例如：这里模拟设置
        单行输入框1.内容 = "笔记标题：" + 参数值.id
        编辑框1.内容 = "笔记内容：" + 参数值.id
    结束 如果

结束 事件

函数 初始化调整页面布局()
    ' 与列表页一样，使用标签作为标题栏并固定
    标签1.内容水平对齐方式 = "center"
    标签1.移动(0,0,"100%","50px")
    标签1.定位 = "fixed"
    标签1.显示层级 = "98"
    标签1.行高 = "50px"
    ' 调整返回图标按钮，注意这里：标题栏高度为 50 ，当设置图标为30时
    ' 则剩余空间为 20 ，左边、顶边设置 10 ，即可上下居中
    图片框1.移动(10,10,"30px","30px")
    图片框1.显示层级 = "99" ' 注意小细节哦，显示层级必须在标签标题上面
    ' 批量设置编辑框、按钮宽度为90%
    批量赋值("宽度","90%",单行输入框1,编辑框1,按钮1)
    ' 然后再批量设置将其在页面中水平居中
    置组件水平居中(单行输入框1,编辑框1,按钮1)
    ' 将按钮1调整到编辑框1底部
    按钮1.顶边对齐到底(编辑框1,10)
结束 函数

事件 按钮1.被单击(源对象,事件源)
    如果(单行输入框1.内容 == "")
        弹出提示("笔记标题不能为空")
        返回
    结束 如果
    如果(编辑框1.内容 == "")
        弹出提示("笔记内容不能为空")
        返回
    结束 如果
    ' 请求接口保存数据
    弹出提示("保存数据...")
    延时执行(()=>{
        后退页面()
    },1500)
结束 事件

事件 图片框1.被单击(源对象,事件源)
    后退页面()
结束 事件

关键代码解读

1. 移动端页面声明：类型="wap"

<页面 标题="页面标题" 宽度="320" 高度="600" 类型="wap">

在 .spldg 中为 <页面> 节点设置 类型="wap" 即声明该页面为移动端类型，框架会据此适配移动端视口（viewport）、缩放策略等。运行前需在浏览器开发者工具中将设备模式切换为手机查看效果。

2. 顶部固定标题栏的实现

标签1.移动(0,0,"100%","50px")
标签1.定位 = "fixed"
标签1.显示层级 = "998"
标签1.行高 = "50px"
  • 移动(0,0,"100%","50px") 一次性设置：左边 0、顶边 0、宽度 100%、高度 50px
  • 定位 = "fixed" 让标题栏相对视口固定，不随页面滚动
  • 显示层级 = "998" 提高层级避免被列表内容遮挡
  • 行高 = "50px" 与高度一致，使文字垂直居中

3. 右下角悬浮按钮：calc + 视口单位

图片框1.顶边 = "calc(100vh - 100px)"
图片框1.左边 = "calc(100vw - 100px)"
图片框1.显示层级 = 999
图片框1.定位 = "fixed"
  • 100vh 为视口高度、100vw 为视口宽度（与留言板演示中 80vw 同源）
  • calc(100vh - 100px) 即「视口高度减去 100px」，让 50×50 的图标距底/距右各 50px
  • 配合 定位 = "fixed" 实现不随滚动消失的悬浮效果
  • 显示层级 = 999 高于标题栏的 998，保证不被遮挡

4. 欢迎页延时跳转

延时执行(()=>{
    切换页面("笔记列表页")
},1500)
  • 延时执行(回调, 毫秒) 类似 JavaScript 的 setTimeout，仅执行一次
  • 返回值是时钟 ID，可用 销毁延时执行(ID) 取消（本演示未用到）
  • 适合做启动页倒计时、保存成功后延时返回等场景

5. 跨页面参数传递与接收

传递（笔记列表页）：

' 无参数跳转
切换页面("撰写笔记页")
' 带参数跳转，参数为键值对文本
切换页面("撰写笔记页","id=" + 被单击索引)

接收（撰写笔记页）：

变量 参数值 = 取请求参数()
如果(参数值 != 空)
    调试输出(参数值.id)
结束 如果
  • 切换页面 的第二个参数是键值对字符串（如 "id=1"），可携带多个参数（"id=1&name=test"）
  • 取请求参数() 返回对象，直接通过 参数值.字段名 或 参数值["字段名"] 访问
  • 无参数跳转时 取请求参数() 返回 空，需判空处理

6. 批量布局函数

批量赋值("宽度","90%",单行输入框1,编辑框1,按钮1)
置组件水平居中(单行输入框1,编辑框1,按钮1)
  • 批量赋值(属性名称, 目标值, ...组件) 给多个组件的同一属性赋同一值
  • 置组件水平居中(...组件) 让多个组件在页面中水平居中
  • 与留言板演示的 置组件宽度 相比，批量赋值 更通用（可设置任意属性）

7. 列表框数据驱动渲染（与留言板同源）

列表框1.置请求加载项目回调((项目集合,索引)=>{
    变量 标题标签 = 创建 标签()
    标题标签.字体大小 = "14px"
    标题标签.内边距 = "10px"
    标题标签.文本 = 项目集合[索引].标题
    标题标签.置被单击回调(()=>{
        列表项目被单击(索引)
    })
    返回 标题标签
})
列表框1.渲染()

要点：

  • 「数据集合 + 渲染回调」分离式渲染，详见文档综合演示：网页留言板开发
  • 注意：回调内 索引 是闭包捕获的，循环中需保证每次迭代都拿到当前值（轻语言此处按值捕获）
  • 列表项是 创建 标签() 动态生成的标签组件，并通过 置被单击回调 注册点击事件
  • 点击列表项后携带 id 参数跳转到撰写笔记页

8. 保存成功后延时返回

事件 按钮1.被单击(源对象,事件源)
    ' ...非空校验...
    弹出提示("保存数据...")
    延时执行(()=>{
        后退页面()
    },1500)
结束 事件
  • 弹出提示("保存数据...") 给用户即时反馈
  • 延时执行 1.5 秒后调用 后退页面() 返回上一页
  • 后退页面() 基于浏览器 history，与 切换页面 不同——切换页面是压栈新页面，后退页面是弹出当前页

注意事项

  • 运行前切换设备模式：本演示为移动端页面（类型="wap"），在 PC 浏览器中需按 F12 切换为手机模式查看效果。
  • 数据为模拟：列表中的 30 条项目与「根据 id 取笔记内容」均为模拟数据，生产环境需通过 请求接口 调用后端 .sph 接口获取真实数据（参考文档综合演示：MySQL数据库操作）。
  • calc 函数：是浏览器原生 CSS 函数，支持四则运算，注意 + 和 - 运算符两侧必须有空格，否则无效。
  • fixed 定位与 显示层级：使用 fixed 固定组件时，必须设置足够高的 显示层级（如 998/999），否则会被普通流内容遮挡。
  • 闭包变量捕获：在 变量循环 中创建多个组件并绑定回调时，索引 变量的捕获行为需注意——轻语言此处按值捕获，每次迭代得到独立值。
  • 跨页面参数格式：切换页面 的第二参数必须是键值对文本（如 "id=1"），不能直接传对象或 JSON 字符串。
  • 后退页面() vs 切换页面：后退页面 基于浏览器 history 返回上一页，而 切换页面 是跳转到指定页面；两者适用场景不同。

学习要点总结

知识点关键代码适用场景
移动端页面声明类型="wap"手机网站
顶部固定标题栏定位="fixed" + 显示层级 + 行高移动端通用导航栏
悬浮按钮calc(100vh-100px) + fixed写作/返回顶部按钮
延时执行延时执行(回调, 毫秒)启动页跳转、保存后返回
页面跳转切换页面(目标, 参数)多页面导航
后退页面后退页面()返回上一页
跨页面参数传递切换页面("...", "id=1") → 取请求参数()详情页跳转
批量赋值批量赋值("宽度","90%",...)多组件统一样式
水平居中置组件水平居中(...组件)多组件统一对齐
完全居中置组件居中(...组件)启动页 logo 居中
列表渲染置请求加载项目回调 + 渲染()数据驱动列表
闭包回调标题标签.置被单击回调(()=>{...})列表项点击

相关文档

  • 文档框架基础类_页面 —— 页面级事件与 类型="wap" 属性
  • 文档框架基础类_视图 —— 通用方法（移动、定位、显示层级等）
  • 文档布局类组件_绝对布局 —— 绝对布局的使用
  • 文档文本类组件_标签 —— 标签组件（标题栏）
  • 文档文本类组件_编辑框 —— 编辑框的属性与方法
  • 文档文本类组件_单行输入框 —— 单行输入框（标题输入）
  • 文档文本类组件_按钮 —— 按钮的属性与事件
  • 文档图像类组件_图片框 —— 图片框（悬浮按钮、返回图标）
  • 文档列表类组件_列表框 —— 列表框的完整属性与方法
  • 文档前端(JavaScript)函数_窗口操作 —— 切换页面、取请求参数、置组件居中、批量赋值
  • 文档前端(JavaScript)函数_历史类 —— 后退页面 的说明
  • 文档前端(JavaScript)函数_时钟类 —— 延时执行 与 销毁延时执行
  • 文档轻语言网站：轻语言语法速查 —— 关键字、流程控制、拉姆达表达式
  • 文档轻语言网站：循环语句体结构 —— 变量循环 的用法
  • 文档综合演示：网页留言板开发 —— 列表框数据驱动渲染的同源示例
  • 文档综合演示：XML 定义待办事项列表演示 —— 另一个列表渲染示例
  • 文档综合演示：MySQL数据库操作 —— 后端接口与真实数据持久化方案