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

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

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