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

目录

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

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

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

1 创建应用

打开微搭低代码的控制台,点击创建应用,从空白创建
电商小程序03登录页面开发_第1张图片
电商小程序03登录页面开发_第2张图片

2 创建页面

应用创建好了之后我们需要创建一个登录页实现登录的功能,点击创建页面的图标
电商小程序03登录页面开发_第3张图片
输入页面的名称
电商小程序03登录页面开发_第4张图片

3 首页功能搭建

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

先切换到首页,展开网格布局,选中第一列
电商小程序03登录页面开发_第5张图片
然后添加一个普通容器,里边放一个单行输入组件和一个按钮组件
电商小程序03登录页面开发_第6张图片
选中单行输入组件,关闭显示标题配置
电商小程序03登录页面开发_第7张图片
模板选择搜索框(填充)
电商小程序03登录页面开发_第8张图片
按钮的内容改为登录,类型改为文字
电商小程序03登录页面开发_第9张图片
选中普通容器,修改布局为横向排列
电商小程序03登录页面开发_第10张图片
选择按钮,设置点击事件
电商小程序03登录页面开发_第11张图片
选择打开页面
电商小程序03登录页面开发_第12张图片
选择登录页
电商小程序03登录页面开发_第13张图片

4 登录页搭建

切换到登录页,先删掉网格布局,添加一个普通容器
电商小程序03登录页面开发_第14张图片
修改页面的宽度为100%,高度为100vh
电商小程序03登录页面开发_第15张图片
设置一个红色的背景色
电商小程序03登录页面开发_第16张图片

在里边添加一个普通容器,继续添加一个图片组件
电商小程序03登录页面开发_第17张图片
设置普通容器的布局为横向排列,居中对齐
电商小程序03登录页面开发_第18张图片
设置图片的宽高是80
电商小程序03登录页面开发_第19张图片
圆角为90
电商小程序03登录页面开发_第20张图片
图片的内容我们从素材里选择即可,一般需要上传企业的LOGO
电商小程序03登录页面开发_第21张图片
然后设置最外层的普通容器,纵向排列,水平垂直居中
电商小程序03登录页面开发_第22张图片
继续往里添加一个普通容器,宽度设置为90%
电商小程序03登录页面开发_第23张图片
圆角设置为20,白色背景
电商小程序03登录页面开发_第24张图片
里边添加两个单行输入组件
电商小程序03登录页面开发_第25张图片
修改单行输入组件,关闭显示标题配置
电商小程序03登录页面开发_第26张图片
设置一下前缀图标
电商小程序03登录页面开发_第27张图片
里边继续添加普通容器,添加两个按钮
电商小程序03登录页面开发_第28张图片
设置普通容器的布局为横向排列,端对齐
电商小程序03登录页面开发_第29张图片
修改内容为立即注册,类型为链接
电商小程序03登录页面开发_第30张图片
继续添加普通容器,里边添加一个按钮
电商小程序03登录页面开发_第31张图片
设置按钮为通栏,然后设置圆角及背景色
电商小程序03登录页面开发_第32张图片
电商小程序03登录页面开发_第33张图片
给普通容器设置一定的内边距,让按钮有一定的间隔
电商小程序03登录页面开发_第34张图片
继续添加普通容器,里边添加单选,两个按钮
电商小程序03登录页面开发_第35张图片
关闭显示标题选项,只保留一个选项
电商小程序03登录页面开发_第36张图片
修改选项值为我已阅读并同意
电商小程序03登录页面开发_第37张图片
将两个按钮的内容分别改为用户协议和隐私协议,类型改为链接
电商小程序03登录页面开发_第38张图片
选中普通容器,布局改为横向排列
电商小程序03登录页面开发_第39张图片
添加两个弹窗组件,添加你的协议内容即可
电商小程序03登录页面开发_第40张图片
关闭默认打开弹窗配置
电商小程序03登录页面开发_第41张图片
在按钮点击的时候,我们设置点击事件,让弹窗显示
电商小程序03登录页面开发_第42张图片
这里我们设置的是组件方法,弹窗
电商小程序03登录页面开发_第43张图片
选择具体的弹窗,选择打开方法
电商小程序03登录页面开发_第44张图片

5 设置叠加效果

我们希望LOGO和我的表单有一个叠加的效果这种就需要设置定位来实现。先选中图片的父容器,设置定位为相对定位
电商小程序03登录页面开发_第45张图片
表单的父容器也设置为相对定位,距底部40
电商小程序03登录页面开发_第46张图片
然后再设置一定的内边距让内容更好看一点
电商小程序03登录页面开发_第47张图片
设置好之后点击实时预览图标就可以看到我们最终的效果
电商小程序03登录页面开发_第48张图片
电商小程序03登录页面开发_第49张图片

总结

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

你可能感兴趣的:(小程序)