微信小程序开发工具写一个登录界面用户名密码提交登录界面的.js/wxml/wxss/json代码，云函数的代码以及怎么布置

下面是一个简单的微信小程序登录界面的代码示例：

1. login.wxml（登录页面的布局）

<view class="container">
  <view class="title">登录</view>
  <view class="form-group">
    <input placeholder="用户名" bindinput="bindUsernameInput" />
  </view>
  <view class="form-group">
    <input placeholder="密码" type="password" bindinput="bindPasswordInput" />
  </view>
  <button bindtap="login">登录</button>
</view>

2. login.wxss（登录页面的样式）

.container {
  margin: 100px auto;
  width: 300px;
}

.title {
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 10px;
}

button {
  width: 100%;
  background-color: #007aff;
  color: #fff;
  border-radius: 4px;
  padding: 10px;
  font-size: 16px;
}

3. login.js（登录页面的逻辑）

Page({
  data: {
    username: '',
    password: ''
  },

  bindUsernameInput(e) {
    this.setData({
      username: e.detail.value
    })
  },

  bindPasswordInput(e) {
    this.setData({
      password: e.detail.value
    })
  },

  login() {
    const { username, password } = this.data;

    // 调用云函数进行登录验证
    wx.cloud.callFunction({
      name: 'login',
      data: {
        username,
        password
      },
      success(res) {
        console.log('登录成功', res)
        // 登录成功后跳转到其他页面
        wx.redirectTo({
          url: '/pages/home/home'
        })
      },
      fail(err) {
        console.error('登录失败', err)
      }
    })
  }
})

4. cloudfunctions/login/index.js（云函数的代码）

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const { username, password } = event;

  // 进行登录验证，这里仅作示例，实际应用时需要根据实际情况进行验证
  if (username === 'admin' && password === '123456') {
    return {
      code: 0,
      message: '登录成功'
    }
  } else {
    return {
      code: -1,
      message: '用户名或密码错误'
    }
  }
}

5. project.config.json（项目配置文件）

{
  "cloudfunctionRoot": "cloudfunctions",
  "appid": "your-appid",
  "projectname": "your-project-name"
}

在布置云函数时，将 `login` 文件夹拷贝到微信小程序开发工具的 `cloudfunctions` 目录下。然后在开发工具的左侧导航栏中找到“云开发”选项，点击进入云开发控制台。在控制台中，点击“函数服务”选项卡，然后点击“创建函数”按钮。在创建函数的页面中，选择刚刚拷贝的 `login` 函数目录并填写函数名为 `login`，点击“确定”按钮创建函数。

以上就是一个简单的微信小程序登录界面的代码示例，其中包括了登录页面的布局、样式和逻辑，以及云函数的代码和项目配置文件。你可以根据实际需求进行相应的修改和扩展。记得在开发工具中配置好云开发环境，并在云函数中进行实际的登录验证逻辑。