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

目录

  • 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", // 页面 Idparams: { key: "value" },
});
}

这里要注意的是做页面跳转的时候需要传入我们的页面ID,在页面管理点击复制页面ID既可以拿到
在这里插入图片描述
像可视化设置的时候我们是在界面上传入参数,用代码的形式我们是设置params传入参数,这里的key可以设置为id,而value可以传入具体的变量,我们在变量章节讲解如何定义变量,传入变量

总结

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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

screen

sLinux:screen命令——命令行的窗口操作_screen命令关闭窗口-CSDN博客文章浏览阅读4.2k次。功能:管理命令行终端切换的软件,常用于远程连接Linux过程中,同时使用多个命令行窗口。在窗口运行中的程序,记住窗口名字前面的…

nodejs实战——搭建websocket服务器

本博客主要介绍websocket服务器库安装,并举了一个简单服务器例子。 服务器端使用websocket需要安装nodejs websocket。 cd 工程目录 # 此刻我们需要执行命令: sudo npm init上述命令创建package.json文件,系统会提示相关配置。 我们也可以使…

一款开源的原神工具箱,专为现代化 Windows 平台设计,旨在改善桌面端玩家的游戏体验

Snap.Hutao 胡桃工具箱是一款以 MIT 协议开源的原神工具箱,专为现代化 Windows 平台设计,旨在改善桌面端玩家的游戏体验。通过将既有的官方资源与开发团队设计的全新功能相结合,提供了一套完整且实用的工具集,且无需依赖任何移动设…

im即时通讯源码/仿微信app源码+php即时通讯源码带红包+客服+禁言等系统php+uniapp开发

即时通讯(IM)系统是现代互联网应用中不可或缺的一部分,它允许用户进行实时的文本、语音、视频交流。随着技术的发展,IM系统的功能越来越丰富,如红包、客服、禁言等。本文将探讨如何使用PHP语言开发一个功能完备的即时通讯系统,包括…

如何让 PDF 书签从杂乱无序整洁到明丽清新

1、拉取书签(详细步骤看文末扩展阅读) 原状态 —— 杂乱无序 自动整理后的状态 —— 错落有致,但摩肩接踵 2、开始整理 全选自动整理后的书签,剪切 访问中英混排排版优化 - 油条工具箱 https://utils.fun/cn-en 1 粘贴 → 2 …

Linux下安装snaphu

1、官网下载安装包 2、解压,移动文件夹到/usr/local/下 3、在/usr/local/下创建man,在man下创建man1文件夹 4、进入到snaphu的src文件夹里,执行sudo make,如果报错 在这个 Makefile 中,-arch x86_64 是 macOS 特定的…

最近惊爆谷歌裁员

Python团队还没解散完,谷歌又对Flutter、Dart动手了。 什么原因呢,猜测啊。 谷歌裁员Python的具体原因可能是因为公司在进行技术栈的调整和优化。Python作为一种脚本语言,在某些情况下可能无法提供足够的性能或者扩展性,尤其是在…

[Unity常见小问题]打包ios后无法修改模型透明度

问题 在Editor下可以使用如下代码去修改模型的材质的透明度,但是打包ios后无法对透明度进行修改且没有任何warning和error using System.Collections; using System.Collections.Generic; using UnityEngine;public class NewBehaviourScript : MonoBehaviour {[R…

2010-2022年上市公司彭博ESG披露评分、分项得分数据

2010-2022年上市公司彭博ESG披露评分、分项得分数据 1、时间:2010-2022年 2、来源:Bloomberg ESG 指数 3、指标:股票代码、股票简称、年份、ESG披露评分、环境披露评分、社会信息披露评分、治理披露评分 4、范围:上市公司 5、…

RocketMQ SpringBoot 3.0不兼容解决方案

很多小伙伴在项目升级到springBoot3.0版本以上之后,整合很多中间件会有很多问题,下面带小伙伴解决springBoot3.0版本以上对于RocketMQ 不兼容问题 报错信息 *************************** APPLICATION FAILED TO START *************************** Des…

基于alpha shapes的边缘点提取(matlab)

1、原理介绍 由Edelsbrunner H提出的alpha shapes算法是一种简单、有效的快速提取边界点算法。其克服了点云边界点形状影响的缺点,可快速准确提取边界点。如下图所示,对于任意形状的平面点云,若一个半径为a的圆,绕其进行滚动&…

第五十三节 Java设计模式 - 工厂模式

Java设计模式 - 工厂模式 工厂模式是一种创建模式,因为此模式提供了更好的方法来创建对象。 在工厂模式中,我们创建对象而不将创建逻辑暴露给客户端。 例子 在以下部分中,我们将展示如何使用工厂模式创建对象。 由工厂模式创建的对象将是…

Fireworks AI和MongoDB:依托您的数据,借助优质模型,助力您开发高速AI应用

我们欣然宣布 MongoDB与 Fireworks AI 正携手合作 让客户能够利用生成式人工智能 (AI) 更快速、更高效、更安全地开展创新活动 Fireworks AI由 Meta旗下 PyTorch团队的行业资深人士于 2022 年底创立,他们在团队中主要负责优化性能、提升开发者体验以及大规模运…

解决python/pycharm中import导入模块时报红却能运行的问题

一、问题 导入时报红,如下 二、解决 右键单击项目,将项目Mark Directory as→Sources Root 三、效果 报红消失 学习导航:http://www.xqnav.top

TCP的三次握手过程

TCP是面向连接的、可靠的、基于字节流的传输层通信协议。 TCP是面向连接的协议,所以使用 TCP前必须先建立连接,而建立连接是通过三次握手来进行的。 TCP包头结构 在讲解三次握手的过程之前,我们先来看一下 TCP包的结构: TCP包…

MybatisPlus也能轻松生成三层架构代码?

👩🏽‍💻个人主页:阿木木AEcru 🔥 系列专栏:《Docker容器化部署系列》 《Java每日面筋》 💹每一次技术突破,都是对自我能力的挑战和超越。 目录 一、前言三层架构的流程图为什么使用…

Linux:进程信号(一)信号的产生

目录 一、信号是什么? 二、Linux信号 三、信号处理方式 四、信号的产生 1、 通过终端按键产生信号 2、调用系统函数向进程发信号 3、 硬件异常产生信号 一、信号是什么? 在生活中,有许多信号,比如红绿灯,下课铃声…

Unity MeshRenderer 入门

概述 在项目制作过程中,肯定缺少不了模型的使用,那就一定接触过MeshRenderer,也许还有你不理解的地方,接下来让我们来学习一下这部分的内容吧。 Mesh Filter(网格过滤器) Mesh:提供一个网格的参考&#xf…

uniapp 禁止截屏(应用内,保护隐私)插件 Ba-ScreenShot

禁止截屏(应用内,保护隐私) Ba-ScreenShot 简介(下载地址) Ba-ScreenShot 是一款uniapp禁止应用内截屏的插件,保护隐私,支持禁止截屏、放开截屏 截图展示 也可关注博客,实时更新最…

Kalign 3:大型数据集的多序列比对

之前一直用的是muscle,看到一个文章使用了Kalign,尝试一下吧 安装 wget -c https://github.com/TimoLassmann/kalign/archive/refs/tags/v3.4.0.tar.gz tar -zxvf v3.4.0.tar.gz cd kalign-3.4.0 mkdir build cd build cmake .. make make test su…