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

news2024/10/7 4:24:45

目录

  • 1 创建页面
  • 2 页面布局
  • 3 页面跳转
  • 总结

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

1 创建页面

打开应用的编辑器,在顶部导航条点击创建页面图标
在这里插入图片描述
在创建页面的时候可以从空白新建,也可以使用模板
在这里插入图片描述
除了新建外,如果我们需要复用已经创建的页面的,可以点击页面的三个点,进行克隆和复制
在这里插入图片描述
克隆和复制的区别是,克隆是在当前应用里复制一份,而复制可以跨应用

2 页面布局

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

这个时候,我们就要进入到页面布局的设置界面
在这里插入图片描述
比如我选择左侧导航,布局模式选择PC
在这里插入图片描述
左侧导航允许你设置应用的图标、系统的名称和左侧的菜单树
在这里插入图片描述
选中布局导航,在右侧的属性设置区域就可以设置具体的菜单,通常选择好页面,菜单的名称会自动的按照页面的名称进行修改,也可以自己输入内容
在这里插入图片描述
在这里插入图片描述
设置好布局后,回到页面设计的视图,我们选中页面组件,就可以使用我们设计好的布局了
在这里插入图片描述

3 页面跳转

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

我们通常给列表页,设置一个点击的事件,在动作里选择打开新页面,选择我们需要跳转的页面即可
在这里插入图片描述
有时候在打开页面的时候还需要传入参数到下一个页面,这个时候我们要在目标页设置URL参数
在这里插入图片描述
我们通常将URL参数设置为ID,表示数据的唯一标识
在这里插入图片描述
再次设置事件的时候,打开页面的时候就会出现我们的id,进行数据绑定就可以
在这里插入图片描述
除了可视化设置页面跳转外,还可以通过前端API的方式进行设置,在代码区我们可以新建一个javascript方法
在这里插入图片描述
在方法里输入我们的前端API即可
在这里插入图片描述

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的方式实现页面的跳转。页面是组成应用的基本单元,还是需要熟练掌握才可以。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1646830.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

第78天:WAF攻防-菜刀冰蝎哥斯拉流量通讯特征绕过检测反制感知

目录 案例一: 菜刀-流量&绕过&特征&检测 菜刀的流量特征 案例二:冰蝎-流量&绕过&特征&检测 冰蝎使用教程 冰蝎的流量特征 案例三: 哥斯拉-流量&绕过&特征&检测 哥斯拉使用教程 哥斯拉的流量特征…

龙迅LT9211D MIPI桥接到2 PORT LVDS,分辨率支持高达3840*2160*30HZ

龙迅LT9211D描述: Lontium LT9211D是一款高性能的MIPI DSI/CSI- 2到双端口LVDS转换器。LT9211D反序列化输入的MIPI视频数据,解码数据包,并将格式化的视频数据流转换为AP和移动显示面板或摄像机之间的LVDS发射机输出。LT9211D支持最大14 dB输…

基于Springboot+Vue+Java的学生就业管理系统

💞 文末获取源码联系 🙉 👇🏻 精选专栏推荐收藏订阅 👇🏻 🎀《Java 精选实战项目-计算机毕业设计题目推荐-期末大作业》😘 更多实战项目~ https://www.yuque.com/liuyixin-rotwn/ei3…

MYSQL基础架构、执行过程分析、事务的实现、索引的选择、覆盖索引

本文是mysql45讲的1-5的总结 文章目录 基础架构连接器分析器优化器执行器SQL查询执行过程详细执行步骤 SQL更新执行过程重要的日志模块:redo log重要的日志模块:binlog阶段性提交 事务事务隔离的实现启动 索引数据库索引模型InnoDB索引组织结构主键选择…

电源小白入门学习7——USB充电、供电、电源路径管理

电源小白入门学习7——USB充电、供电、电源路径管理 USB充电系统需要考虑的因素开关充电和线性充电充电路径管理输入限流路径管理(动态功率管理)理想二极管帮助提高电池利用率输入过充抑制 上期我们介绍了锂离子电池的电池特性,及充电电路设计…

字节跳动(社招)三面算法原题

TikTok 喘息 继上月通过强制剥离 TikTok 法案后,美国众议院在当地时间 20 日下午以 360 票赞成 58 票反对通过了新的法案:剥离 TikTok 的期限由生效后 165 天调整至 270 天之内,即今年 11 月的美国总统大选后。 之前我们讲过,TikT…

[安全开发]如何搭建一款自己的网安微信机器人

前言 hxd写的一个微信网安机器人。 原理 基于HOOK的微信机器人,以往的机器人大多数为协议机器人,封号概率极大(下面会详细讲解hook和协议的区别),而HOOK机制的大大减小了封号几率。 什么是协议机器人? …

腾讯云服务器产品特惠集合

腾讯云服务器近期推出了多项特惠活动,以满足不同用户的需求。以下是一些主要的特惠信息: 特惠产品合集页 精选特惠 用云无忧 腾讯云提供了极具竞争力的价格。例如,用户可以找到2核2G3M配置的云服务器,月费低至5.08元;…

【C++之map的应用】

C学习笔记---021 C之map的应用1、map的简单介绍1.1、基本概念1.2、map基本特性 2、map的基本操作2.1、插入元素2.2、访问元素2.3、删除元素2.4、遍历map2.5、检查元素是否存在2.6、获取map的大小2.7、清空map2.8、基本样例 3、map的基础模拟实现4、测试用例4.1、插入和遍历4.2、…

Python查询PostgreSQL数据库

哈喽,大家好,我是木头左! Python与PostgreSQL的连接 需要了解如何在Python中连接到PostgreSQL数据库。这通常涉及到使用一个库,如psycopg2,它是Python中用于PostgreSQL的最流行的适配器。安装psycopg2非常简单&#x…

[Java EE] 多线程(八):CAS问题与JUC包

🌸个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 🏵️热门专栏:🍕 Collection与数据结构 (90平均质量分)https://blog.csdn.net/2301_80050796/category_12621348.html?spm1001.2014.3001.5482 🧀Java …

用 Go map 要注意这个细节,避免依赖他!

有的小伙伴没留意过 Go map 输出、遍历顺序,以为它是稳定的有序的,会在业务程序中直接依赖这个结果集顺序,结果栽了个大跟头,吃了线上 BUG。 有的小伙伴知道是无序的,但却不知道为什么,有的却理解错误? 今…

Flutter笔记:Widgets Easier组件库 - 使用标签(Tag)

Flutter笔记 Widgets Easier组件库 - 使用标签(Tag) - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite:http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this …

滑动窗口 | 1652. 拆炸弹 |LeetCode

文章目录 题目介绍暴力(可以过力扣竟然。不愧是简单题):滑动窗口 祝你天天开心 题目介绍 你有一个炸弹需要拆除,时间紧迫!你的情报员会给你一个长度为 n 的 循环 数组 code 以及一个密钥 k 。 为了获得正确的密码,你需要替换掉每…

【嵌入式笔试题】进程线程笔试题

非常经典的笔试题。 1.进程&线程(16道) 1.1异步IO和同步IO区别? 答案:如果是同步IO,当一个IO操作执行时,应用程序必须等待,直到此IO执行完。 相反,异步IO操作在后台运行,IO操作和应用程序可以同时运行,提高系统性能,提 高IO流量。 解读:在同步文件IO中,线…

IntelliJ IDEA 2024 for Mac:Java开发者的强大助手

IntelliJ IDEA 2024 for Mac是Java开发者不可或缺的强大助手,它凭借卓越的性能和丰富的功能,赢得了广大开发者的青睐。 作为集成开发环境(IDE)的佼佼者,IDEA 2024提供了全面的代码编辑和智能提示功能。它不仅能实时分析…

视频素材哪个软件好用?8个短视频素材高清无水印

在今日这个视觉表现至关重要的时代,获取合适的视频素材成为制作任何类型视频内容的基石。从企业宣传片到社交媒体短视频,高质量的视频素材能够显著提升内容的吸引力和专业度。这里列出了一些全球顶尖的视频素材平台,每一个都能为您的视频项目…

高效转化,智能私信软件策略揭秘

在数字营销的浪潮中,智能私信软件策略正成为提升转化率的重要工具。这种软件以其个性化、自动化的特点,正在重新定义与客户的互动方式,让企业能够更加高效地吸引并留住潜在客户。 智能私信软件的核心在于其高度的定制化和人性化设计。通过大数…

CasaOS玩客云安装memos开源云笔记并实现随时随地远程记笔记

文章目录 前言1. 使用Docker部署memos2. 注册账号与简单操作演示3. 安装cpolar内网穿透4. 创建公网地址5. 创建固定公网地址 前言 本文主要介绍如何在CasaOS玩客云,使用Docker本地部署21.6K stars的热门开源云笔记服务memos,并结合cpolar内网穿透工具打…

Llama3-Tutorial之XTuner微调Llama3个人小助手

Llama3-Tutorial之XTuner微调Llama3个人小助手 使用XTuner微调llama3模型。 参考: https://github.com/SmartFlowAI/Llama3-Tutorial 1. web demo部署 参考上一节内容已经完成web demo部署,进行对话测试, 当前回答基于llama3官方发布的模型进行推理生成&…