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

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

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

相关推荐
陈思杰系统思考Jason3 小时前
系统思考—深层结构
百度·微信·微信公众平台·新浪微博·微信开放平台
尚梦7 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac10 小时前
微信小程序的组件
微信小程序
stormjun11 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck11 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie23413 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong14 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序
蜕变菜鸟14 小时前
小程序跳转另一个小程序
小程序
17 小时前
躺平成长-代码开发,利用kimi开发小程序(09)
小程序
20 小时前
微信小程序运营日记(第四天)
微信小程序·小程序