万网主机 wordpress,seo对网店的作用有哪些,十大正规交易平台排名,对门户网站建设的见解目录 1 创建应用2 创建页面3 首页功能搭建4 登录页搭建5 设置叠加效果总结 小程序开发在经过需求分析和数据源设计之后#xff0c;就可以进入到页面开发的阶段了。首先我们需要开发登录的功能。 登录功能要求用户输入用户名和密码#xff0c;勾选同意用户协议和隐私协议… 目录 1 创建应用2 创建页面3 首页功能搭建4 登录页搭建5 设置叠加效果总结 小程序开发在经过需求分析和数据源设计之后就可以进入到页面开发的阶段了。首先我们需要开发登录的功能。 登录功能要求用户输入用户名和密码勾选同意用户协议和隐私协议这样就可以登录小程序了。创建登录功能需要我们先创建应用。
1 创建应用
打开微搭低代码的控制台点击创建应用从空白创建
2 创建页面
应用创建好了之后我们需要创建一个登录页实现登录的功能点击创建页面的图标 输入页面的名称
3 首页功能搭建
我们在原型里讲了首页顶部会有一个搜索框搜索框旁边有一个登录按钮点击的时候就跳转到登录页面。
先切换到首页展开网格布局选中第一列 然后添加一个普通容器里边放一个单行输入组件和一个按钮组件 选中单行输入组件关闭显示标题配置 模板选择搜索框填充 按钮的内容改为登录类型改为文字 选中普通容器修改布局为横向排列 选择按钮设置点击事件 选择打开页面 选择登录页
4 登录页搭建
切换到登录页先删掉网格布局添加一个普通容器 修改页面的宽度为100%高度为100vh 设置一个红色的背景色
在里边添加一个普通容器继续添加一个图片组件 设置普通容器的布局为横向排列居中对齐 设置图片的宽高是80 圆角为90 图片的内容我们从素材里选择即可一般需要上传企业的LOGO 然后设置最外层的普通容器纵向排列水平垂直居中 继续往里添加一个普通容器宽度设置为90% 圆角设置为20白色背景 里边添加两个单行输入组件 修改单行输入组件关闭显示标题配置 设置一下前缀图标 里边继续添加普通容器添加两个按钮 设置普通容器的布局为横向排列端对齐 修改内容为立即注册类型为链接 继续添加普通容器里边添加一个按钮 设置按钮为通栏然后设置圆角及背景色 给普通容器设置一定的内边距让按钮有一定的间隔 继续添加普通容器里边添加单选两个按钮 关闭显示标题选项只保留一个选项 修改选项值为我已阅读并同意 将两个按钮的内容分别改为用户协议和隐私协议类型改为链接 选中普通容器布局改为横向排列 添加两个弹窗组件添加你的协议内容即可 关闭默认打开弹窗配置 在按钮点击的时候我们设置点击事件让弹窗显示 这里我们设置的是组件方法弹窗 选择具体的弹窗选择打开方法
5 设置叠加效果
我们希望LOGO和我的表单有一个叠加的效果这种就需要设置定位来实现。先选中图片的父容器设置定位为相对定位 表单的父容器也设置为相对定位距底部40 然后再设置一定的内边距让内容更好看一点 设置好之后点击实时预览图标就可以看到我们最终的效果
总结
本篇我们主要讲解了微搭低代码的布局知识带着大家实现了一个登录页的功能总体上用低代码设置布局还是非常简洁明了的不需要去掌握太多的CSS知识只需要设置属性具体的配置就可以赶紧照着教程练习一下吧。
