实验四 微信小程序智能手机互联网程序设计(微信程序方向)实验报告

  • 请编写一个用户登录界面,提示输入用户名和密码进行登录; 
  • 代码
  • index.wxml

    <view class="user">

    <form bindreset="">

    <view>用户名:</view><input type="text"name=""/>

    <view>密码:</view><input type="text"name=""/>

    </form>

    <button>用户登录</button>

    </view>

    index.wxss

    /**index.wxss**/

    page{

      /* height: 100vh;

      display: flex;

      flex-direction: column; */

      border: 1rpx solid#ccc;

      background-color:  #000; ;

    }

    .user{

      position: relative;

      width: 100%;

      height: 100vh;

    }

    form {

      position: relative;

      padding-top: 100rpx;

      color: #ccc;

    }

    form view{

      width: 300rpx;

      margin: 0 auto;

      align-items: center;

    }

    form input {

      margin: 0 auto;

      align-items: center;

      border: 1rpx solid#ccc;

      display: block;

      width: 300rpx;

      padding-bottom: 20rpx;

    }

    button{

      width: 100%;

      position: absolute;

      bottom: 0rpx;

    }

    app.json

    {

      "pages": [

        "pages/index/index",

        "pages/logs/logs"

      ],

      "window": {

        "navigationBarTextStyle": "black",

        "navigationStyle": "custom"

      },

      "renderer": "skyline",

      "rendererOptions": {

        "skyline": {

          "defaultDisplayBlock": true,

          "disableABTest": true,

          "sdkVersionBegin": "3.0.0",

          "sdkVersionEnd": "15.255.255"

        }

      },

      "componentFramework": "glass-easel",

      "sitemapLocation": "sitemap.json",

      "lazyCodeLoading": "requiredComponents"

    }

  • 思路

  • 1、搭建WXML框架

    页面可以看做由一个区域构成,这里用一个类名为"user"的view组件包含所有的内容

    .user -> <form> & <button>

    在<form>组件中使用<view>组件表达“用户名:”;使用<input>组件去接收用户名
    在<form>组件中使用<view>组件表达“密码:”;使用另一个<input>组件去接收密码

    在.user之下,紧接着<form>之后使用<button>组件来提供"登录"操作。


    2、WXSS样式设计

    - 设置页面(page)的背景颜色为黑色,并添加一个浅灰色的边框
      - 背景色设置为黑色
      - 边框设置为1rpx的浅灰色(#ccc)实线

    - 设置.user类元素为相对定位,宽度占满整个父元素,高度为视口高度(100vh)
      - 相对定位,使其子元素的绝对定位可以相对于它定位
      - 宽度设置为占满整个可用宽度
      - 高度设置为视口的高度(100vh)

    - 设置form为相对定位,并从顶部偏移100rpx
      - 相对定位
      - 距离顶部的偏移量为100rpx
      - 文本颜色设置为浅灰色

    - 设置form内的view元素宽度为300rpx,自动居中
      - 宽度设置为300rpx
      - 上下边距为0,左右自动调整以实现居中

    - 设置form内的input元素样式,包括边框、块状显示、宽度、底部边距
      - 上边距为0,左右自动调整以实现居中
      - 边框设置为1rpx的浅灰色实线
      - 使input元素以块级元素进行显示
      - 宽度设置为300rpx
      - 底部边距设置为20rpx

    - 设置button按钮绝对定位于父元素底部,宽度占满父元素
      - 绝对定位
      - 定位于父元素的底部
      - 宽度占满父元素的宽度


    3、修改app.json中参数
    将app.json中
    “style”:"v2"
    这段代码删除

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

mysql锁表问题

问题描述 偶尔应用日志会打印锁表超时回滚 org.springframework.dao.CannotAcquireLockException: ### Error updating database. Cause: com.mysql.cj.jdbc.exceptions.MySQLTransactionRollbackException: Lock wait timeout exceeded; try restarting transactionmysql锁…

C刊级 | Matlab实现GWO-BiTCN-BiGRU-Attention灰狼算法优化双向时间卷积双向门控循环单元融合注意力机制多变量回归预测

C刊级 | Matlab实现GWO-BiTCN-BiGRU-Attention灰狼算法优化双向时间卷积双向门控循环单元融合注意力机制多变量回归预测 目录 C刊级 | Matlab实现GWO-BiTCN-BiGRU-Attention灰狼算法优化双向时间卷积双向门控循环单元融合注意力机制多变量回归预测效果一览基本介绍程序设计参考…

ArcGIS Pro打不开Excel?Microsoft驱动程序安装不上?

刚用ArcGIS pro的朋友们可能经常在打开xls或者xlsx文件的时候都会提示&#xff0c;未安装所需的Microsoft驱动程序。 怎么办呢&#xff1f;当然&#xff0c;按照提示装一下驱动就会好吗&#xff1f;有什么状况会出现&#xff1f;有什么临时替代方案呢&#xff1f; 全文目录&a…

C++的并发世界(二)——初识多线程

0.引言 C的并发世界&#xff08;零&#xff09;和C的并发世界&#xff08;一&#xff09;的东西真的对于我这种初学者难以理解&#xff0c;我确定从第一个多线程案例进行学习归纳总结。 1.多线程的目的 ①将耗时的任务进行分解&#xff0c;进行实时响应;   ②充分利用多核CP…

ICMP,ARP协议,免费ARP

ICMP:ping检测链路通断&#xff0c;到目的地的连通性。 internet网控制消息协议&#xff0c;工作在网络层。 ttl超时&#xff0c;也是icmp报文。

LeetCode刷题记(一):1~30题

1. 两数之和 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。 你可以…

直流电源电路(下)

直流电源电路&#xff08;下&#xff09; 综述&#xff1a;本篇文章讲述了直流电源电路的BOOST电路以及DC-DC电路的组成原理。 四、BOOST电路 原理&#xff1a;当mos导通时&#xff0c;电源上的电流给电感充电&#xff0c;通过mos管构成回路&#xff0c;电容放电给负载供电&…

从零实现一个Http服务器

HttpServer HTTPServer项目是一个基于C编写的简单的HTTP服务器实现&#xff0c;用于处理客户端的HTTP请求并提供相应的服务。该项目使用了Socket编程来实现服务器与客户端之间的通信&#xff0c;通过监听指定的端口并接受客户端连接&#xff0c;然后解析HTTP请求并生成对应的H…

Octavia Venture 成立,打造数十亿美元规模的 AI 价值体系

​随着 OpenAI 相继发布 ChatGPT、Sora 等 AIGC 大模型后&#xff0c;AI 赛道的发展迎来了一轮又一轮的热潮&#xff0c;这也让极具想象力的 AI 赛道涌入大量资金&#xff0c;比如英伟达股票市值短时间内从 1 万亿美元暴涨至 2 万亿美元&#xff0c;就是最好的佐证。当然&#…

Maven依赖管理项目构建工具

一、Maven简介 1、为什么学习Maven 1.1、Maven是一个依赖管理工具 ①jar 包的规模 随着我们使用越来越多的框架&#xff0c;或者框架封装程度越来越高&#xff0c;项目中使用的jar包也越来越多。项目中&#xff0c;一个模块里面用到上百个jar包是非常正常的。 比如下面的例…

表白墙项目(JAVA实现)

1、在html里 class使用. id使用# 2、记得引入响应依赖&#xff08;举例lombok&#xff09; 3、messageController package com.example.demo.demos.web; import org.springframework.util.StringUtils; import org.springframework.web.bind.annotation.RequestMapping; i…

惊喜!这一国产数据库认证考试限免了!

今年第一个季度过去了&#xff0c;又到春暖花开时&#xff0c;群里的小伙伴开始躁动不安&#xff0c;焦虑加倍。 有考虑被 cloud 淘汰的&#xff0c;有考虑被共享 emp 的&#xff0c;还有问粗粮 car 能不能当专车开的。 但技术人&#xff0c;更多时间还是在讨论正能量&#xff…

使用纯注解的方式管理bean对象

前置知识&#xff1a; Component , Repository , Controller , Service 这些注解只局限于自己编写的类&#xff0c;而Bean注解能把第三方库中的类实例加入IOC容器中并交给spring管理。 其中&#xff1a; Component一般用于公共类 Repository 用于dao数据访问层 Service 用…

基本电路理论入门讲解系列-电路和电路模型

&#x1f308;个人主页&#xff1a;会编程的果子君 &#x1f4ab;个人格言:“成为自己未来的主人~” 电路 电路概念&#xff1a;把若干个电气设备和电气元件按照一定的方式组合起来&#xff0c;构成电流的通路&#xff0c;此路径的总体称为电路。在电子通信&#xff0c;自…

Spring IoCDI(2)

IoC详解 通过上面的案例, 我们已经知道了IoC和DI的基本操作, 接下来我们来系统地学习Spring IoC和DI的操作. 前面我们提到的IoC控制反转, 就是将对象的控制权交给Spring的IoC容器, 由IoC容器创建及管理对象. (也就是Bean的存储). Bean的存储 我们之前只讲到了Component注解…

SpringBoot项目使用SpringSecurity和JWT实现登录功能

使用SpringSecurity,Redis实现登录功能 首先&#xff0c;思路如下&#xff1a; 登录 ①自定义登录接口 调用ProviderManager的方法进行认证 如果认证通过生成jwt 把用户信息存入redis中 ②自定义UserDetailsService 在这个实现类中去查询数据库 注意配置passwordEncoder为BCry…

数据结构进阶篇 之 【插入排序】详细讲解(直接插入排序,希尔排序)

千万不要因为一件事不会做而失去信心&#xff0c;你又不是只有这一件事不会&#xff0c;你还有很多呢 一、插入排序 1.直接插入排序 InsertSort 1.1 基本思想 1.2 实现原理 1.3 代码实现 1.4 直接插入排序的特性总结 2.希尔排序 ShellSort 2.1 基本思想 2.2 实现原理 …

视觉Transformer和Swin Transformer

视觉Transformer概述 ViT的基本结构&#xff1a; ①输入图片首先被切分为固定尺寸的切片&#xff1b; ②对展平的切片进行线性映射&#xff08;通过矩阵乘法对维度进行变换&#xff09;&#xff1b; ③为了保留切片的位置信息&#xff0c;在切片送入Transformer编码器之前&…

基于vue实现动态table

1、代码 <div style"height: 600px; overflow: scroll;"> <!-- height: 600px; overflow: scroll;作用是超出页面可以滑动 --><div ng-repeat"row in entity.procedureList"><cb-title title"工序{{row.procedireLocation}}&quo…

【保姆级讲解下MySQL中的drop、truncate和delete的区别】

&#x1f308;个人主页:程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…