家校互通小程序实战开发02首页搭建

目录

  • 1 创建应用
  • 2 搭建首页
  • 总结

我们上一篇介绍了家校互通小程序的需求,创建了对应的数据源。有了这个基础的分析之后,我们就可以进入到开发阶段了。开发小程序,先需要创建应用。

1 创建应用

登录控制台,点击创建应用,点击从空白创建
在这里插入图片描述
应用创建好之后,我们先需要选择构建的模式
在这里插入图片描述
目前微搭支持三种构建模式,分别是H5、小程序、PC,其中H5、PC都是需要通过域名访问,区别是适配屏幕的大小不同。而小程序在发布的时候需要你提前注册好小程序,并且备案和通过认证,才可以发布。

我们这里可以先选择H5,因为本次我们的登录是准备自己实现,所以H5和小程序是区别不太大的。

2 搭建首页

首页搭建的时候,我们提供给用户一个身份选择的界面,为了美观一点,我们通常使用基础布局组件来搭建页面。基础布局组件通常由普通容器、图标、文本组件三个组成。

先放入一个普通容器来做基础的布局
在这里插入图片描述
然后需要设置一下容器的样式,切换到样式,我们先给一点内边距
在这里插入图片描述
然后在里边添加一个普通容器再套一个文本组件
在这里插入图片描述
这个时候我们可以给内层的普通容器设置一点内边距,然后再设置一个居中的效果
在这里插入图片描述
为了让页面有一个对比的效果,可以将页面的背景色设置为灰色,值为239,239,239
在这里插入图片描述
为了美观,我们需要放值两个图片来显示一个组合的效果
在这里插入图片描述
第一个图片我们设置为裁剪填满,宽100%,高140px

:root {width: 100%;height: 140PX;border-bottom-right-radius: 20px;border-bottom-left-radius: 20px;
}

在这里插入图片描述
第二个图片我们设置宽80px,高80px,圆角设置为90°,定位设置成相对定位,距底部50,左边150
在这里插入图片描述

:root {width: 80PX;height: 80PX;border-radius: 90px;background: none;position: relative;left: 150px;bottom: 50px;
}

然后在图片下发放置一个文本组件,用来显示学校的名称
在这里插入图片描述

:root {font-size: 20px;text-align: center;font-weight: bolder;position: relative;bottom: 40px;
}

之后再放置两个文本组件,用来显示提示信息
在这里插入图片描述
然后选中我们的我是老师这个普通容器,右键进行克隆,复制出两份来
在这里插入图片描述
设置一定的外边距,修改具体的文本内容
在这里插入图片描述

总结

我们本篇主要是搭建了首页,首页的功能用来辅助用户做身份选择,当然页面是需要一定的美化的,这个就依赖于设计师具体的设计效果和页面切图。一般是设计师切好图后按照图设置具体的间距和大小,我们这一篇只是一个示例。

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

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

相关文章

[c]统计数字

题目描述 某次科研调查时得到了n个自然数,每个数均不超过1500000000(1.5*109)。已知不相同的数不超过10000个,现在需要统计这些自然数各自出现的次数,并按照自然数从小到大的顺序输出统计结果。 输入描述: 第1行是整数…

Linux阶段性项目——FTP服务器

一、FTP服务概述 ​FTP为File Transfer Protocol的缩写,即文件传输协议,是TCP/IP 协议族中的协议之一。FTP是一个用于在计算机网络上在客户端和服务器之间进行文件传输的应用层协议。RFC 959定义了FTP协议规范。是互联网上使用的最广泛的文件传输协议&a…

File Inclusion(Pikachu)

File Inclusion(local) 这里随便点击一个提交 观察url,显示是一个文件file1.php 可以直接通过url修改这个文件 找到自己的文件(本地文件)shell.php的路径写上去 就可以看到 File Inclusion(remote) 提交的是一个目标…

大带宽服务器怎么选

大带宽服务器怎么选 在选择时,需要考虑的因素包括:   - 业务需求:不同的业务类型对服务器的性能要求不同。例如,文件和数据库服务器、邮件服务器、web服务器、多媒体服务器、终端服务器的需求就各不相同。   - 成本&#xff1…

C#教程(四):多态

1、介绍 1.1 什么是多态 在C#中,多态性(Polymorphism)是面向对象编程中的一个重要概念,它允许不同类的对象对同一消息做出响应,即同一个方法可以在不同的对象上产生不同的行为。C#中的多态性可以通过以下几种方式实现…

JVM基础篇---02

为什么需要用户自定义类加载器: 扩展类加载器的功能: Java的默认类加载器主要有三个,分别是引导类加载器、扩展类加载器和应用程序类加载器。其中,引导类加载器和扩展类加载器是由JVM实现的,用户无法修改其行为。而应用…

促进家校沟通的方法有哪些

“家校沟通是教育中的重要一环,它可以帮助教师和家长更好地了解和关心孩子,共同促进孩子的健康成长。但是,在实际操作中,如何才能有效地促进家校沟通呢? 定期家长会:每个学期开始和结束时,以及期…

【Unity6.0+AI】Sentis加载模型识别手写数字案例实现

按照国际惯例,看效果: 素材准备: 自己在PS中绘制黑底白字手写字体,导出jpg,尺寸28*28! 素材设置 基本步骤 准备工作:从 ONNX Model Zoo 下载手写识别 ONNX 模型文件 【下载模型】MNIST 手写数字识别模型 mnist-12.onnx,并将其拖入项目窗口的 Assets 文件夹。 【下载模…

vue根据身份证获取年龄/生日/性别,根据年龄获取生日,根据生日获取年龄

首先根据身份证获取年龄/生日/性别 handleBlur(data) {let idCard data.target.value;let sex null;let birth null;let myDate new Date();let month myDate.getMonth() 1;let day myDate.getDate();let age 0;if (idCard.length 18) {age myDate.getFullYear() - i…

每日一题-----逆序字符串

大家好我是Beilef,在一个美好的下午我意外接触到编程并且产生了兴趣,哈哈我要努力成为一个跨界者,让我们一起加油吧O(∩_∩)O 文章目录 目录 文章目录 前言 大家好请上车 一、逆序字符串 题⽬描述: 输⼊⼀个字符串,写…

7.7、kali linux环境下搭建DVWA

目录 一、资料下载准备工作 1.1、DVWA源代码下载 二、开启Apache、mysql服务 2.1、下载Apache2文件 2.2、开启Apache2服务 方法一:开启Apache2服务(手动) 方法二:开启Apache2服务(系统自启动) 2.3、…

量子密码学简介

量子密码学(英语:Quantum cryptography)泛指利用量子力学的特性来加密的科学。量子密码学最著名的例子是量子密钥分发,而量子密钥分发提供了通信两方安全传递密钥的方法,且该方法的安全性可被信息论所证明。目前所使用…

blackbox黑盒监控部署(k8s内)tensuns专用

一、前言 部署在k8s中需要用到deployment、configmap、service服务 二、部署 创建存放yaml的目录 mkdir /opt/blackbox-exporter && cd /opt/blackbox-exporter 编辑blackbox配置文件,使用configmap挂在这 vi configmap.yaml apiVersion: v1 kind: Confi…

连续时间LQR和离散时间LQR笔记

文章目录 连续时间LQR理解离散时间LQR理解参考资料 本文是根据下面参考资料里的1和2对应的讲座内容所做的笔记 连续时间LQR理解 假设一个系统可以被表示为如下形式的状态方程: x ˙ A x B u ( 1.1 ) \dot{x} Ax Bu \qquad \qquad (1.1) x˙AxBu(1.1) 式中的 x…

C#与VisionPro联合编程

C#与VisionPro联合 1. 参照康耐视提供的样例2. 参照样例写一个1. 创建工程2. 添加引用3. 声明变量4. 初始化5. 刷新队列6. 用户数据获取7. 跨线程访问Windows控件--委托8. 显示图像9. 释放资源 3. 代码4. 资源下载 1. 参照康耐视提供的样例 C:\Program Files\Cognex\VisionPro…

详解Java多线程、线程池及线程同步(synchronized关键字、悲观锁、乐观锁)——通俗易懂版!!!

1.进程与线程定义 进程包含线程,如一个百度网盘进程,该进程的线程可以有上传,下载。 2.创建线程的三种方式 方式1-继承Thread类 方式2-实现Runnabled接口 1.常规写法 2.匿名内部类写法 方式3-实现Callable接口 示例代码: f1.get…

CAD objectArx 在操作mfc时出现“不支持尝试执行的操作“

问题原因: ARX中对话框通常继承自CAcUiDialog,CAcUiDialog 构造函数有个参数 HINSTANCE hInstance,默认为 NULL,指定了对话框资源所在DLL进程。如果没有指定该参数,在创建对话框(DoModal或Create&#xff…

湘潭大学-软件工程-大题浅析

前言 因为打印的资料只有少数几份有答案,所以这个部分比较简短 大题包括分析,设计, UML图,四个大题,占40分 应用设计题 1.建立软件公司的对象模型 矩形方框表示对象,只需要把题干所有信息用图表示出来即…

记一次应急响应练习(windows)

记一次应急响应练习(windows) windows: 1.请提交攻击者攻击成功的第一时间,格式:YY:MM:DD hh:mm:ss 答:2023/04/29:22:44:32 思路: 看见桌面的小皮面板,进入小皮的安装目录。发现…

IDEA相关操作

目录 连接MySQL IDEA配置Maven 配置全局Maven 导入Maven项目 方法一 方法二 安装Mybatisx插件 连接MySQL 填写user和Password之后测试连接 如果是第一次连接需要联网下载数据库连接驱动,安装提示下载即可 如果显示如下错误需要更改时区 Server returns …