微信小程序登录页面代码带数据库

微信小程序登录页面需要与数据库进行交互，可以使用云开发的数据库服务。以下是一个简单的示例代码：

1. 在 app.js 中初始化云开发环境：

App({
  onLaunch: function () {
    wx.cloud.init({
      env: 'your-env-id',
      traceUser: true,
    })
  }
})

2. 在登录页面的 js 文件中引入云开发 SDK，并获取登录表单数据：

const db = wx.cloud.database()
const users = db.collection('users')

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

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

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

  login: function() {
    users.where({
      username: this.data.username,
      password: this.data.password
    }).get({
      success: res => {
        if (res.data.length > 0) {
          wx.showToast({
            title: '登录成功'
          })
        } else {
          wx.showToast({
            title: '用户名或密码错误',
            icon: 'none'
          })
        }
      },
      fail: err => {
        wx.showToast({
          title: '登录失败，请重试',
          icon: 'none'
        })
      }
    })
  }
})

3. 在登录页面的 wxml 文件中添加登录表单和按钮：

<view class="login-form">
  <view class="form-item">
    <input type="text" placeholder="请输入用户名" bindinput="bindUsernameInput" />
  </view>
  <view class="form-item">
    <input type="password" placeholder="请输入密码" bindinput="bindPasswordInput" />
  </view>
</view>
<button class="login-button" type="primary" bindtap="login">登录</button>

在这个示例中，我们使用了一个名为 `users` 的数据库集合，其中保存了用户的用户名和密码。在登录时，我们通过 `where` 方法查询数据库，如果用户名和密码匹配，则登录成功，否则提示用户名或密码错误。

请注意，这个示例只是一个简单的示例，实际的登录系统需要更复杂的逻辑和安全措施。