当前位置: 首页 > news >正文

电商小程序03登录页面开发

目录

  • 1 创建应用
  • 2 创建页面
  • 3 首页功能搭建
  • 4 登录页搭建
  • 5 设置叠加效果
  • 总结

小程序开发在经过需求分析和数据源设计之后,就可以进入到页面开发的阶段了。首先我们需要开发登录的功能。

登录功能要求用户输入用户名和密码,勾选同意用户协议和隐私协议,这样就可以登录小程序了。创建登录功能需要我们先创建应用。

1 创建应用

打开微搭低代码的控制台,点击创建应用,从空白创建
在这里插入图片描述
在这里插入图片描述

2 创建页面

应用创建好了之后我们需要创建一个登录页实现登录的功能,点击创建页面的图标
在这里插入图片描述
输入页面的名称
在这里插入图片描述

3 首页功能搭建

我们在原型里讲了首页顶部会有一个搜索框,搜索框旁边有一个登录按钮,点击的时候就跳转到登录页面。

先切换到首页,展开网格布局,选中第一列
在这里插入图片描述
然后添加一个普通容器,里边放一个单行输入组件和一个按钮组件
在这里插入图片描述
选中单行输入组件,关闭显示标题配置
在这里插入图片描述
模板选择搜索框(填充)
在这里插入图片描述
按钮的内容改为登录,类型改为文字
在这里插入图片描述
选中普通容器,修改布局为横向排列
在这里插入图片描述
选择按钮,设置点击事件
在这里插入图片描述
选择打开页面
在这里插入图片描述
选择登录页
在这里插入图片描述

4 登录页搭建

切换到登录页,先删掉网格布局,添加一个普通容器
在这里插入图片描述
修改页面的宽度为100%,高度为100vh
在这里插入图片描述
设置一个红色的背景色
在这里插入图片描述

在里边添加一个普通容器,继续添加一个图片组件
在这里插入图片描述
设置普通容器的布局为横向排列,居中对齐
在这里插入图片描述
设置图片的宽高是80
在这里插入图片描述
圆角为90
在这里插入图片描述
图片的内容我们从素材里选择即可,一般需要上传企业的LOGO
在这里插入图片描述
然后设置最外层的普通容器,纵向排列,水平垂直居中
在这里插入图片描述
继续往里添加一个普通容器,宽度设置为90%
在这里插入图片描述
圆角设置为20,白色背景
在这里插入图片描述
里边添加两个单行输入组件
在这里插入图片描述
修改单行输入组件,关闭显示标题配置
在这里插入图片描述
设置一下前缀图标
在这里插入图片描述
里边继续添加普通容器,添加两个按钮
在这里插入图片描述
设置普通容器的布局为横向排列,端对齐
在这里插入图片描述
修改内容为立即注册,类型为链接
在这里插入图片描述
继续添加普通容器,里边添加一个按钮
在这里插入图片描述
设置按钮为通栏,然后设置圆角及背景色
在这里插入图片描述
在这里插入图片描述
给普通容器设置一定的内边距,让按钮有一定的间隔
在这里插入图片描述
继续添加普通容器,里边添加单选,两个按钮
在这里插入图片描述
关闭显示标题选项,只保留一个选项
在这里插入图片描述
修改选项值为我已阅读并同意
在这里插入图片描述
将两个按钮的内容分别改为用户协议和隐私协议,类型改为链接
在这里插入图片描述
选中普通容器,布局改为横向排列
在这里插入图片描述
添加两个弹窗组件,添加你的协议内容即可
在这里插入图片描述
关闭默认打开弹窗配置
在这里插入图片描述
在按钮点击的时候,我们设置点击事件,让弹窗显示
在这里插入图片描述
这里我们设置的是组件方法,弹窗
在这里插入图片描述
选择具体的弹窗,选择打开方法
在这里插入图片描述

5 设置叠加效果

我们希望LOGO和我的表单有一个叠加的效果这种就需要设置定位来实现。先选中图片的父容器,设置定位为相对定位
在这里插入图片描述
表单的父容器也设置为相对定位,距底部40
在这里插入图片描述
然后再设置一定的内边距让内容更好看一点
在这里插入图片描述
设置好之后点击实时预览图标就可以看到我们最终的效果
在这里插入图片描述
在这里插入图片描述

总结

本篇我们主要讲解了微搭低代码的布局知识,带着大家实现了一个登录页的功能,总体上用低代码设置布局还是非常简洁明了的,不需要去掌握太多的CSS知识,只需要设置属性具体的配置就可以,赶紧照着教程练习一下吧。

相关文章:

电商小程序03登录页面开发

目录 1 创建应用2 创建页面3 首页功能搭建4 登录页搭建5 设置叠加效果总结 小程序开发在经过需求分析和数据源设计之后,就可以进入到页面开发的阶段了。首先我们需要开发登录的功能。 登录功能要求用户输入用户名和密码,勾选同意用户协议和隐私协议&…...

聊聊PowerJob的CleanService

序 本文主要研究一下PowerJob的CleanService CleanService Slf4j Service public class CleanService {private final DFsService dFsService;private final InstanceInfoRepository instanceInfoRepository;private final WorkflowInstanceInfoRepository workflowInstance…...

Qt QML学习(一):Qt Quick 与 QML 简介

参考引用 QML和Qt Quick快速入门全面认识 Qt Widgets、QML、Qt Quick 1. Qt Widgets、QML、Qt Quick 区别 1.1 QML 和 Qt Quick 是什么关系? 1.1.1 从概念上区分 QML 是一种用户界面规范和标记语言,它允许开发人员创建高性能、流畅的动画和具有视觉吸引…...

Kylin系统下Qt的各种中文问题解决思路

一、编译生成的程序运行,中文乱码 这个比较简单。 Windows下基本就是编码格式设置。ini中文问题,见QSettings读取ini中文key方法。 其他Linux版本没玩过,不清楚。Kylin系统下基本就是缺中文的字库。找个好的中文字库,放到目录下即可,系统目录/usr/lib/fonts,qt的安装目…...

C 练习实例69-约瑟夫环

题目&#xff1a;有n个人围成一圈&#xff0c;顺序排号。从第一个人开始报数&#xff08;从1到3报数&#xff09;&#xff0c;凡报到3的人退出圈子&#xff0c;问最后留下的是原来第几号的那位。 代码&#xff1a; #include <stdio.h> int main() {int n8;int table[n]…...

【Qt Design】界面介绍

文章目录 前言Widget Box&#xff08;工具箱&#xff09;对象查看器Qt Design属性编译器sizePolicy内容 信号/槽编辑器资源浏览器ui文件编辑完窗口后查看代码在Pycharm中添加QtDesign 前言 Widget Box&#xff08;工具箱&#xff09; 提供很多控件 对象查看器 对象查看区域…...

Makefile编译原理 make 中的路径搜索_1

一.make中的路径搜索 问题&#xff1a;在实际的工程项目中&#xff0c;所有的源文件和头文件都放在同一个文件夹中吗&#xff1f; 实验1 &#xff1a; VPATH 引子 mhrubuntu:~/work/makefile1/17$ ll total 28 drwxrwxr-x 4 mhr mhr 4096 Apr 22 00:46 ./ drwxrwxr-x 7 mhr m…...

蓝桥杯每日一题------背包问题(一)

点击可观看配套视频讲解 背包问题 阅读小提示&#xff1a;这篇文章稍微有点长&#xff0c;希望可以对背包问题进行系统详细的讲解&#xff0c;在看的过程中如果有任何疑问请在评论区里指出。因为篇幅过长也可以进行选择性阅读&#xff0c;读取自己想要的那一部分即可。 前言…...

面试 JavaScript 框架八股文十问十答第八期

面试 JavaScript 框架八股文十问十答第八期 作者&#xff1a;程序员小白条&#xff0c;个人博客 相信看了本文后&#xff0c;对你的面试是有一定帮助的&#xff01;关注专栏后就能收到持续更新&#xff01; ⭐点赞⭐收藏⭐不迷路&#xff01;⭐ 1&#xff09;实现call、apply…...

【机器学习】单变量线性回归

文章目录 线性回归模型&#xff08;linear regression model&#xff09;损失/代价函数&#xff08;cost function&#xff09;——均方误差&#xff08;mean squared error&#xff09;梯度下降算法&#xff08;gradient descent algorithm&#xff09;参数&#xff08;parame…...

《计算思维导论》笔记:10.4 关系模型-关系运算

《大学计算机—计算思维导论》&#xff08;战德臣 哈尔滨工业大学&#xff09; 《10.4 关系模型-关系运算》 一、引言 本章介绍数据库的基本数据模型&#xff1a;关系模型-关系运算。 二、什么是关系运算 在数据库理论中&#xff0c;关系运算&#xff08;Relational Operatio…...

QT+OSG/osgEarth编译之八十四:osgdb_osg+Qt编译(一套代码、一套框架,跨平台编译,版本:OSG-3.6.5插件库osgdb_osg)

文章目录 一、osgdb_osg介绍二、文件分析三、pro文件四、编译实践一、osgdb_osg介绍 osgDB是OpenSceneGraph(OSG)库中的一个模块,用于加载和保存3D场景数据。osgDB_osg是osgDB模块中的一个插件,它提供了对OSG格式的支持。 OSG格式是OpenSceneGraph库使用的一种二进制文件…...

【Redis快速入门】初识Redis、Redis安装、图形化界面

个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名大三在校生&#xff0c;喜欢AI编程&#x1f38b; &#x1f43b;‍❄️个人主页&#x1f947;&#xff1a;落798. &#x1f43c;个人WeChat&#xff1a;hmmwx53 &#x1f54a;️系列专栏&#xff1a;&#x1f5bc;️…...

Linux(Ubuntu) 环境搭建:Nginx

注&#xff1a;服务器默认以root用户登录 NGINX 官方网站地址&#xff1a;https://nginx.org/en/NGINX 官方安装文档地址&#xff1a;https://nginx.org/en/docs/install.html服务器的终端中输入以下指令&#xff1a; # 安装 Nginx apt-get install nginx # 查看版本信息 ngi…...

快速手动完成 VS 编写脚本自动化:如何选取最高效的工作方式?

那些不懂技术的朋友们可能会觉得&#xff0c;写代码写脚本不就是敲敲键盘嘛&#xff0c;搞那么高科技做什么&#xff0c;直接手工点点鼠标不就完事了。 这种看法很常见&#xff0c;但实际情况要复杂得多。 首先&#xff0c;手工操作虽然对于短期和小规模的任务来说似乎更快&am…...

FAST角点检测算法

FAST&#xff08;Features from Accelerated Segment Test&#xff09;角点检测算法是一种快速且高效的角点检测方法。它通过检测每个像素周围的连续像素集合&#xff0c;确定是否为角点。以下是 FAST 角点检测算法的基本流程&#xff1a; FAST 角点检测算法的基本过程主要包括…...

Python中使用opencv-python进行人脸检测

Python中使用opencv-python进行人脸检测 之前写过一篇VC中使用OpenCV进行人脸检测的博客。以数字图像处理中经常使用的lena图像为例&#xff0c;如下图所示&#xff1a; 使用OpenCV进行人脸检测十分简单&#xff0c;OpenCV官网给了一个Python人脸检测的示例程序&#xff0c;…...

牛客网 DP3跳台阶扩展问题

在原始跳台阶问题上&#xff0c;我们知道只走1&#xff0c;2阶台阶的话&#xff0c;可以推出来斐波那契数列的形式进行计算操作。但是&#xff0c;在这里就是1&#xff0c;2&#xff0c;3&#xff0c;...n阶台阶了。其实思路是一样的。 在原始台阶问题&#xff0c;我们的状态方…...

ARM汇编[1] 打印格式化字符串(printf

文章目录 写在前面关键知识简单加减乘除函数调用和循环系统调用栈的使用 GDB调试示例代码 写在前面 如果您对ARM汇编还一无所知的话请先参考ARM汇编hello world 本篇不会广泛详细的列举各种指令&#xff0c;仍然只讲解最关键的部分&#xff0c;然后使用他们来完成一个汇编程序…...

Java 集合、迭代器

Java 集合框架主要包括两种类型的容器&#xff0c;一种是集合&#xff08;Collection&#xff09;&#xff0c;存储一个元素集合&#xff0c;另一种是图&#xff08;Map&#xff09;&#xff0c;存储键/值对映射。Collection 接口又有 3 种子类型&#xff0c;List、Set 和 Queu…...

在 Docker 中启动 ROS2 里的 rivz2 和 rqt 出现错误的解决方法

1. 出现错误&#xff1a; 运行 ros2 run rivz2 rivz2 &#xff0c;报错如下 &#xff1a; No protocol specified qt.qpa.xcb: could not connect to display :1 qt.qpa.plugin: Could not load the Qt platform plugin "xcb" in "" even though it was f…...

使用securecrt+xming通过x11访问ubuntu可视化程序

windows使用securecrtxming通过x11访问ubuntu可视化程序 windows机器IP&#xff1a;192.168.9.133 ubuntu-desktop20.04机器IP&#xff1a;192.168.9.190 windows下载xming并安装 按照图修改xming配置 开始->xming->Xlaunch 完成xming会在右下角后台运行 windows在…...

红队打靶练习:HEALTHCARE: 1

目录 信息收集 1、arp 2、nmap 3、nikto 4、whatweb 目录探测 1、gobuster 2、dirsearch WEB web信息收集 gobuster cms sqlmap 爆库 爆表 爆列 爆字段 FTP 提权 信息收集 本地提权 信息收集 1、arp ┌──(root㉿ru)-[~/kali] └─# arp-scan -l Inte…...

Java IO:概念和分类总结

前言 大家好&#xff0c;我是chowley&#xff0c;刚看完Java IO方面内容&#xff0c;特此总结一下。 Java IO Java IO&#xff08;输入输出&#xff09;是Java编程中用于处理输入和输出的API。它提供了一套丰富的类和方法&#xff0c;用于读取和写入数据到不同的设备、文件和…...

【Linux】基本命令(下)

目录 head指令 && tail指令 head指令 tail指令 find指令 grep指令 zip/unzip指令 tar指令 时间相关的指令 date显示 1.在显示方面&#xff0c;使用者可以设定欲显示的格式&#xff0c;格式设定为一个加号后接数个标记&#xff0c;其中常用的标记列表如下&…...

腾讯云游戏联机服务器配置价格表,4核16G/8核32G/4核32G/16核64G

2024年更新腾讯云游戏联机服务器配置价格表&#xff0c;可用于搭建幻兽帕鲁、雾锁王国等游戏服务器&#xff0c;游戏服务器配置可选4核16G12M、8核32G22M、4核32G10M、16核64G35M、4核16G14M等配置&#xff0c;可以选择轻量应用服务器和云服务器CVM内存型MA3或标准型SA2实例&am…...

面试经典150题——长度最小的子数组

​"In the midst of winter, I found there was, within me, an invincible summer." - Albert Camus 1. 题目描述 2. 题目分析与解析 首先理解题意&#xff0c;题目要求我们找到一个长度最小的 连续子数组 满足他们的和大于target&#xff0c;需要返回的是子数组的…...

业务流程

一、需求分析和设计&#xff1a; 在项目启动阶段&#xff0c;需要与业务人员和产品经理充分沟通&#xff0c;了解业务需求&#xff0c;并根据需求进行系统设计和数据库设计。这一阶段的输出通常是需求文档、系统架构设计、数据库设计等。 1.需求文档 需求文档是一份非常重要…...

ChatGPT Plus如何升级?信用卡付款失败怎么办?如何使用信用卡升级 ChatGPT Plus?

ChatGPT Plus是OpenAI提供的一种高级服务&#xff0c;它相较于标准版本&#xff0c;提供了更快的响应速度、更强大的功能&#xff0c;并且用户可以优先体验到新推出的功能。 尽管许多用户愿意支付 20 美元的月费来订阅 GPT-4&#xff0c;但在实际支付过程中&#xff0c;特别是…...

Spring 如何配置 bean (XML 方式)

请直接看原文:Spring 如何配置 bean (XML 方式)_spring 在哪配置bean 文件-CSDN博客 -------------------------------------------------------------------------------------------------------------------------------- Java Bean 如何配置配置到 spring 容器中 基于 XM…...

揭秘外观模式:简化复杂系统的关键设计策略

前言 外观模式&#xff08;Facade Pattern&#xff09;是一种结构型设计模式&#xff0c;它隐藏了系统的复杂性&#xff0c;并向客户端提供了一个可以访问系统的接口。这种类型的设计模式向现有的系统添加一个接口&#xff0c;来隐藏系统的复杂性。这种模式涉及到一个单一的类…...

Nginx 命令(Ubuntu)

常用命令&#xff1a; 1.查看错误日志&#xff1a; sudo vim /var/log/nginx/error.log 2.重新加载 nignx sudo systemctl reload nginx 3.立即停止Nginx服务。如果Nginx正在运行&#xff0c;它将被终止 sudo systemctl stop nginx 4. 禁止Nginx服务在系统重启时自动启…...

从github上拉取项目到pycharm中

有两种方法&#xff0c;方法一较为简单&#xff0c;方法二用到了git bash&#xff0c;推荐方法一 目录 有两种方法&#xff0c;方法一较为简单&#xff0c;方法二用到了git bash&#xff0c;推荐方法一方法一&#xff1a;方法二&#xff1a; 方法一&#xff1a; 在github上复制…...

python从入门到精通(十八):python爬虫的练习案列集合

python爬虫的练习 1.爬取天气网的北京城市历史天气数据1.1 第一种使用面向对象OOP编写爬虫1.2 第二种使用面向过程函数编写爬虫 1.爬取天气网的北京城市历史天气数据 1.1 第一种使用面向对象OOP编写爬虫 import re import requests from bs4 import BeautifulSoup import xlw…...

2.12作业

第一题&#xff1a;段错误。 第二题&#xff1a;hello world 第三题&#xff1a;hello 第四题&#xff1a;world 第五题&#xff1a; a: int a; b: int*a; c: int a0;int *p&a;int **q&p; d: int a[10]; e: int *a[10]; …...

树莓派4B(Raspberry Pi 4B) 使用docker搭建单机版nacos

树莓派4B&#xff08;Raspberry Pi 4B&#xff09; 使用docker搭建单机版nacos ⚠️ 由于树莓派上的芯片是ARM架构&#xff0c;而官方推出的docker镜像不适用于ARM架构&#xff0c;所以想用树莓派搭建最新版的Nacos服务的小伙伴们可以忽略我这篇文章了。本文基于nacos 2.0.4&am…...

C++入门学习(二十七)跳转语句—continue语句

当在循环中遇到continue语句时&#xff0c;它会跳过当前迭代剩余的代码块&#xff0c;并立即开始下一次迭代。这意味着continue语句用于跳过循环中特定的执行步骤&#xff0c;而不是完全终止循环。 直接看一下下面的代码更清晰&#xff1a; 与上一节的break语句可以做一下对比…...

JPEG图像格式加速神经网络训练--使用DCT训练CNN

JPEG图像格式加速神经网络训练 JPEG图像格式加速神经网络训练工作原理DCT系数与JPEG直接利用DCT系数阶段 1: 数据准备步骤 1: 读取JPEG文件结构步骤 2: 提取量化表和Huffman表步骤 3: 解析图像数据步骤 4: 反量化步骤 5: 获取DCT系数 阶段 2: 输入处理预处理 1: 正规化&#xf…...

【代码】Processing笔触手写板笔刷代码合集

代码来源于openprocessing&#xff0c;考虑到国内不是很好访问&#xff0c;我把我找到的比较好的搬运过来&#xff01; 合集 参考&#xff1a;https://openprocessing.org/sketch/793375 https://github.com/SourceOf0-HTML/processing-p5.js/tree/master 这个可以体验6种笔触…...

Junit常用注解

注解是方法的“标签” 说明每个方法的“职责” Q:总共有那些注解? 参见官方的API文档 0.常用主机及其特点 BeforeClass 只会执行一次必须用static修饰常用来初始化测试需要的变量 Before 会执行多次&#xff08;只要写一次&#xff09;在每个Test执行执行之前执行可以和…...

【机器学习】支持向量机(SVM)

支持向量机&#xff08;SVM&#xff09; 1 背景信息 分类算法回顾 决策树 样本的属性非数值 目标函数是离散的 贝叶斯学习 样本的属性可以是数值或非数值目标函数是连续的&#xff08;概率&#xff09; K-近邻 样本是空间&#xff08;例如欧氏空间&#xff09;中的点目标函…...

C语言指针全解

1.什么是指针&#xff1a; 指针是存放地址的地方&#xff0c;是内存中最小单元的地址&#xff08;编号&#xff09;&#xff0c;内存被分为一个个小的单元格&#xff0c;每一格有一个字节。比如说int a0&#xff1b;a会占据四个字节的大小&#xff0c;每个字节对应单元格都有自…...

rtt设备io框架面向对象学习-看门狗设备

1.看门狗设备基类 / components / drivers / include / drivers /下的watchdog.h 定义了如下看门狗设备基类 struct rt_watchdog_device { struct rt_device parent; const struct rt_watchdog_ops *ops; }; 看门狗设备基类的方法定义如下 struct rt_watchdog_ops { rt_err_…...

加固平板电脑丨三防智能平板丨工业加固平板丨智能城市管理

随着智能城市的不断发展&#xff0c;人们对于城市管理的要求也在不断提高&#xff0c;这就需要高效、智能的城市管理平台来实现。而三防平板就是一款可以满足这一需求的智能设备。 三防平板是一种集防水、防尘、防摔于一体的智能平板电脑&#xff0c;它可以在复杂的环境下稳定运…...

Redis的配置文件

目录 前言&#xff1a; 一、 Units 二、 INCLUDES 三、 NETWORK 3.1 bind 3.2 protected-mode 3.3 port 3.4 tcp-backlog 3.5 timeout 3.6 tcp-keepalive 3.7 示例演示 四、 GENERAL 4.1 daemonize 4.2 pidfile 4.3 loglevel 4.4 logfile 4.5 databases 五、…...

懒人精灵 之 Lua 捕获 json解析异常 ,造成的脚本停止.

Time: 2024年2月8日20:21:17 by:MemoryErHero 1 异常代码 Expected value but found T_END at character 12 异常代码 Expected value but found T_OBJ_END at character 223 处理方案 - 正确 json 示范 while true do--Expected value but found T_END at character 1--Ex…...

Python 列表操作详解

Python 是一种流行的编程语言&#xff0c;它以其简洁的语法和强大的功能而闻名。在 Python 中&#xff0c;列表是一种常用的数据结构&#xff0c;它可以包含任意类型的元素&#xff0c;并且可以随时添加或删除元素。在这篇文章中&#xff0c;我们将详细介绍 Python 列表的一些常…...

【Jenkins】Jenkins关闭Jenkins关闭、重启

目录 一、Jenkins关闭、重启 二、Jenkins服务的启动、停止方法。 一、Jenkins关闭、重启 1.关闭Jenkins 只需要在访问jenkins服务器的网址url地址后加上exit&#xff0c;关闭Jenkins服务。 例如&#xff1a;http://localhost:8081/exit 2.重启Jenkies 只有在Jenkins服务启动…...

【Linux】学习-动静态库

动静态库 头文件与库的区别 头文件一般而言&#xff0c;是声明和宏定义。头文件是在预处理阶段使用的 库文件是已经编译好的二进制代码。是一种目标文件&#xff0c;库文件是在链接阶段使用的 对于头文件和库我们可以这样理解&#xff0c;就是头文件提供的是一个函数的声明&…...

人工智能之数学基础【最小二乘法】

原理 最小二乘法由勒让德(A.M.Legendre)于1805年在其著作《计算彗星轨道的新方法》中提出,主要思想是最小化误差二次方和寻找数据的最佳匹配函数,利用最小二乘法求解未知参数,使得理论值与观测值之差(即误差,或称为残差)的二次方和达到最小,即: E = ∑ i = 1 n ϵ …...