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

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

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

相关推荐
说私域14 分钟前
开源链动2+1模式、AI智能名片与S2B2C商城小程序:社群经济的数字化重构路径
人工智能·小程序·开源
peachSoda736 分钟前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序
2501_915909061 小时前
iOS 26 文件管理实战,多工具组合下的 App 数据访问与系统日志调试方案
android·ios·小程序·https·uni-app·iphone·webview
云起SAAS2 小时前
ai周公解梦抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·ai周公解梦
Jing_jing_X4 小时前
微信小程序开发踩坑记:从AI工具翻车到找到合适方案
人工智能·ai·小程序·产品运营·个人开发
一匹电信狗5 小时前
【MySQL】数据库的相关操作
linux·运维·服务器·数据库·mysql·ubuntu·小程序
weixin_lynhgworld10 小时前
旧物新生,从二手回收小程序开启绿色生活
小程序·生活·旧物回收
從南走到北11 小时前
智尚招聘求职小程序v1.0.23
微信小程序·小程序
2501_9159184115 小时前
掌握 iOS 26 App 运行状况,多工具协作下的监控策略
android·ios·小程序·https·uni-app·iphone·webview
知识分享小能手16 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程