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

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

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"
    这段代码删除

相关推荐
Ama_tor1 小时前
mini-program01の系统认识微信小程序开发
微信小程序·小程序
毛毛三由11 小时前
基于svga+uniapp的微信小程序动画组件开发指南
微信小程序·uni-app·notepad++
一只一只妖13 小时前
uniapp小程序无感刷新token
前端·小程序·uni-app
编程毕设14 小时前
基于小程序的智能停车管理系统设计与开发
小程序
Kelaru16 小时前
本地Qwen中医问诊小程序系统开发
python·ai·小程序·flask·project
初晨未凉17 小时前
uniapp返回webview返回小程序并且跳转回webview
小程序·uni-app
Python智慧行囊20 小时前
微信小程序交互精髓:点击操作与状态管理实战
微信小程序·小程序·交互
铲子Zzz1 天前
Java使用接口AES进行加密+微信小程序接收解密
java·开发语言·微信小程序
paopaokaka_luck2 天前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序