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

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