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

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

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

相关推荐
Emma歌小白1 天前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子2 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差2 天前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张2 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬2 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106322 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI2 天前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_177297220692 天前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧