运用微信小程序开发工具设计一个小程序用户登录界面，在界面上输入用户名、密码，还布局有登录按钮和选择保存密码，当选择了保存密码，点击登录后就可以保存用户名和密码，下次运行时用户名与密码就会自动填入。当保存密码成功时，在调试器Console面板输出保存成功提示信息。

好的，以下是实现的步骤：

1. 在微信开发者工具中创建一个新的小程序项目。

2. 在 app.json 文件中添加以下代码：

"pages": [
  "pages/login/login"
],

这样就创建了一个名为 login 的页面。

3. 在 pages 文件夹下创建一个 login 文件夹，然后在 login 文件夹中创建 login.wxml、login.js、login.wxss 和 login.json 文件。

4. 在 login.wxml 文件中添加以下代码：

<view class="container">
  <view class="input-area">
    <input type="text" placeholder="请输入用户名" bindinput="onUsernameInput" />
  </view>
  <view class="input-area">
    <input type="password" placeholder="请输入密码" bindinput="onPasswordInput" />
  </view>
  <view class="btn-area">
    <button class="login-btn" bindtap="onLogin">登录</button>
  </view>
  <view class="checkbox-area">
    <label class="checkbox">
      <checkbox bindchange="onSavePasswordChange" />
      <text>记住密码</text>
    </label>
  </view>
</view>

这里我们创建了一个输入框和一个密码框，以及一个登录按钮和一个选择保存密码的复选框。

5. 在 login.js 文件中添加以下代码：

Page({
  data: {
    username: '',
    password: '',
    savePassword: false
  },
  onUsernameInput: function (e) {
    this.setData({
      username: e.detail.value
    })
  },
  onPasswordInput: function (e) {
    this.setData({
      password: e.detail.value
    })
  },
  onSavePasswordChange: function (e) {
    this.setData({
      savePassword: e.detail.value
    })
  },
  onLogin: function () {
    if (this.data.savePassword) {
      wx.setStorageSync('username', this.data.username)
      wx.setStorageSync('password', this.data.password)
      console.log('保存成功')
    }
    wx.showToast({
      title: '登录成功',
      icon: 'success',
      duration: 2000
    })
  },
  onLoad: function () {
    const username = wx.getStorageSync('username')
    const password = wx.getStorageSync('password')
    if (username && password) {
      this.setData({
        username: username,
        password: password,
        savePassword: true
      })
    }
  }
})

这里我们定义了四个事件处理函数，分别是输入用户名、输入密码、选择保存密码和登录按钮。在登录按钮点击事件中，如果选择了保存密码，则使用 wx.setStorageSync() 方法将用户名和密码保存到本地缓存中，并在调试器 Console 面板输出保存成功提示信息。否则，只是显示一个登录成功的提示框。在页面加载时，我们使用 wx.getStorageSync() 方法从本地缓存中读取保存的用户名和密码，如果有，则自动填充到输入框中。

6. 在 login.wxss 文件中添加以下代码：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 30rpx;
  box-sizing: border-box;
}

.input-area {
  width: 100%;
  margin-bottom: 30rpx;
}

.input-area input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #ccc;
  border-radius: 5rpx;
  font-size: 32rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.btn-area {
  width: 100%;
  margin-bottom: 30rpx;
}

.login-btn {
  width: 100%;
  height: 80rpx;
  border: none;
  border-radius: 5rpx;
  font-size: 36rpx;
  color: #fff;
  background-color: #007aff;
}

.checkbox-area {
  display: flex;
  align-items: center;
}

.checkbox {
  display: flex;
  align-items: center;
}

.checkbox text {
  font-size: 28rpx;
  margin-left: 10rpx;
}

这里是样式文件，主要是对各个元素进行了布局和样式设置。

7. 最后，在 app.json 文件中添加以下代码：

"window": {
  "navigationBarTitleText": "登录"
},

这里是设置小程序的标题栏文本。

好了，现在我们已经完成了一个简单的用户登录界面，并且可以保存用户名和密码。