网站建设要用到编程吗,中国各大网站名称,设计师网站十大网站排名,wordpress 您的主题支持1个菜单目录 1 创建应用2 搭建首页总结 我们上一篇介绍了家校互通小程序的需求#xff0c;创建了对应的数据源。有了这个基础的分析之后#xff0c;我们就可以进入到开发阶段了。开发小程序#xff0c;先需要创建应用。 1 创建应用
登录控制台#xff0c;点击创建应用#xff0c… 目录 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;
}之后再放置两个文本组件用来显示提示信息 然后选中我们的我是老师这个普通容器右键进行克隆复制出两份来 设置一定的外边距修改具体的文本内容
总结
我们本篇主要是搭建了首页首页的功能用来辅助用户做身份选择当然页面是需要一定的美化的这个就依赖于设计师具体的设计效果和页面切图。一般是设计师切好图后按照图设置具体的间距和大小我们这一篇只是一个示例。
