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

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

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

相关推荐
奶糖 肥晨7 小时前
微信小程序隐藏滚动条多种方法教程
微信小程序·小程序·notepad++
计算机学姐7 小时前
基于微信小程序的高校班务管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
sen_shan7 小时前
《微信小程序》第三章:Request封装
微信小程序·小程序
sen_shan7 小时前
《微信小程序》第一章:开发前准备与配置
微信小程序·小程序
游戏开发爱好者88 小时前
HTTPS 内容抓取实战 能抓到什么、怎么抓、不可解密时如何定位(面向开发与 iOS 真机排查)
android·网络协议·ios·小程序·https·uni-app·iphone
stark张宇13 小时前
超越 Hello World:深入小程序 Hybrid 初衷、安全配置与上线全链路
nginx·微信小程序·php
菜鸟una15 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
2501_9151063217 小时前
iOS 混淆与 IPA 加固全流程,多工具组合实现无源码混淆、源码防护与可审计流水线(iOS 混淆|IPA 加固|无源码加固|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者817 小时前
用多工具组合把 iOS 混淆做成可复用的工程能力(iOS混淆 IPA加固 无源码混淆 Ipa Guard)
android·ios·小程序·https·uni-app·iphone·webview
lypzcgf19 小时前
商城小程序数据库表结构文档
数据库·小程序·电商