微搭低代码入门03页面管理

目录

  • [1 创建页面](#1 创建页面)
  • [2 页面布局](#2 页面布局)
  • [3 页面跳转](#3 页面跳转)
  • 总结

上一篇我们介绍了应用的基本操作,掌握了应用的概念后接着我们需要掌握页面的常见操作。

1 创建页面

打开应用的编辑器,在顶部导航条点击创建页面图标

在创建页面的时候可以从空白新建,也可以使用模板

除了新建外,如果我们需要复用已经创建的页面的,可以点击页面的三个点,进行克隆和复制

克隆和复制的区别是,克隆是在当前应用里复制一份,而复制可以跨应用

2 页面布局

当我们创建了很多的页面时,需要对页面进行一定的组织。比如我们在PC视图下,通常是提供菜单导航来引导用户使用软件的不同的功能。而在小程序或者H5下,需要通过底部的tab栏导航来引导用户进行页面的切换。

这个时候,我们就要进入到页面布局的设置界面

比如我选择左侧导航,布局模式选择PC

左侧导航允许你设置应用的图标、系统的名称和左侧的菜单树

选中布局导航,在右侧的属性设置区域就可以设置具体的菜单,通常选择好页面,菜单的名称会自动的按照页面的名称进行修改,也可以自己输入内容

设置好布局后,回到页面设计的视图,我们选中页面组件,就可以使用我们设计好的布局了

3 页面跳转

页面跳转是应用搭建很常见的一个场景,通常在小程序里我们在列表页上点击内容的时候,需要跳转到详情页,这就涉及到页面跳转的问题

我们通常给列表页,设置一个点击的事件,在动作里选择打开新页面,选择我们需要跳转的页面即可

有时候在打开页面的时候还需要传入参数到下一个页面,这个时候我们要在目标页设置URL参数

我们通常将URL参数设置为ID,表示数据的唯一标识

再次设置事件的时候,打开页面的时候就会出现我们的id,进行数据绑定就可以

除了可视化设置页面跳转外,还可以通过前端API的方式进行设置,在代码区我们可以新建一个javascript方法

在方法里输入我们的前端API即可

javascript 复制代码
export default function({event, data}) {
$w.utils.navigateTo({
  pageId: "u_chan_pin_xiang_qing", // 页面 Id
  params: { key: "value" },
});
}

这里要注意的是做页面跳转的时候需要传入我们的页面ID,在页面管理点击复制页面ID既可以拿到

像可视化设置的时候我们是在界面上传入参数,用代码的形式我们是设置params传入参数,这里的key可以设置为id,而value可以传入具体的变量,我们在变量章节讲解如何定义变量,传入变量

总结

我们本篇介绍了页面的各种操作,介绍了如何通过事件的形式设置页面跳转,以及如何通过API的方式实现页面的跳转。页面是组成应用的基本单元,还是需要熟练掌握才可以。

相关推荐
jnpfsoft4 小时前
低代码视图真分页实操:API/SQL 接口配置 + 查询字段避坑,数据加载不卡顿
前端·低代码
NocoBase10 小时前
华数传媒用 NocoBase 快速搭建 AI 多模态研发平台
人工智能·低代码·开源
xhload3d11 小时前
WebGL/Canvas 内存泄露分析
低代码·3d·html5·webgl·数字孪生·可视化·软件开发·工业互联网·内存泄漏·轻量化·技术应用·hightopo
踩着两条虫12 小时前
VTJ.PRO低代码快速入门指南
前端·低代码
赵大碗1 天前
Joker 智能开发平台-组件开发
低代码
NocoBase1 天前
11 个在 GitHub 上最受欢迎的开源无代码 AI 工具
低代码·ai·开源·github·无代码·ai agent·airtable·内部工具·app builder
yinmaisoft2 天前
低代码新建表单实操:纯表单 / 列表表单配置 + 表名避坑
低代码
ZKNOW甄知科技4 天前
客户案例 | 派克新材x甄知科技,构建全场景智能IT运维体系
大数据·运维·人工智能·科技·低代码·微服务·制造
蒙奇·D·路飞-5 天前
2025-10-16-TH 开源框架JeecgBoot Pro搭建流程
低代码
葡萄城技术团队5 天前
活字格低代码平台:本地独立部署与数据备份恢复的企业级实践方案
低代码