自己做一个简单的登录微信小程序

好的，下面是一个简单的登录微信小程序的实现步骤：

1. 创建一个新的微信小程序项目，打开微信开发者工具，在项目目录下创建以下文件：

pages/
  index/
    index.js
    index.wxml
    index.wxss

2. 在 `index.wxml` 文件中添加以下代码：

<view class="container">
  <view class="title">微信小程序登录</view>
  <view class="form">
    <view class="input-group">
      <text class="label">用户名：</text>
      <input class="input" placeholder="请输入用户名" bindinput="onUsernameInput" />
    </view>
    <view class="input-group">
      <text class="label">密码：</text>
      <input class="input" type="password" placeholder="请输入密码" bindinput="onPasswordInput" />
    </view>
  </view>
  <button class="button" bindtap="onLogin">登录</button>
</view>

3. 在 `index.wxss` 文件中添加以下样式：

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #333;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.form {
  width: 300rpx;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 20rpx;
  box-sizing: border-box;
}

.input-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10rpx;
}

.label {
  width: 80rpx;
  text-align: right;
  margin-right: 20rpx;
}

.input {
  flex: 1;
  height: 50rpx;
  padding: 0 10rpx;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.button {
  width: 300rpx;
  height: 50rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 4px;
  margin-top: 20rpx;
  text-align: center;
  line-height: 50rpx;
}

4. 在 `index.js` 文件中添加以下代码：

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

  onUsernameInput(event) {
    this.setData({
      username: event.detail.value
    })
  },

  onPasswordInput(event) {
    this.setData({
      password: event.detail.value
    })
  },

  onLogin(event) {
    if (!this.data.username) {
      wx.showToast({
        title: '请输入用户名',
        icon: 'none'
      })
      return
    }
    if (!this.data.password) {
      wx.showToast({
        title: '请输入密码',
        icon: 'none'
      })
      return
    }
    wx.showModal({
      title: '提示',
      content: '登录成功！',
      showCancel: false
    })
  }
})

5. 测试小程序，可以通过微信开发者工具的模拟器或在手机上运行测试，输入用户名和密码后点击登录按钮可以弹出提示框表示登录成功。

以上就是一个简单的微信小程序登录的实现步骤，你可以根据自己的需要进行修改和扩展。