【愚公系列】《微信小程序与云开发从入门到实践》018-实现一个简单的小程序登录页面

<!-- pages/loginDemo/loginDemo.wxml -->
<view class="containerView">
  <view class="header">
    <text>登录/注册</text>
  </view>
  <view class="tip">
    <text>请输入您的账号</text>
  </view>
  <view class="input">
    <input class="accountInput" placeholder="输入账号..." model:value="{{account}}"/>
  </view>
  <view class="input">
    <input class="accountInput" placeholder="输入密码..." password model:value="{{password}}"/>
    <view class="checkbox">
      <checkbox model:checked="{{checked}}"></checkbox>
      <text class="normal">登录/注册即表示同</text>
      <text class="highlight" bindtap="nav1">《隐私协议》</text>
      <text class="normal">与</text>
      <text class="highlight" bindtap="nav2">《服务协议》</text>
    </view>
  </view>
  <view class="buttonView">
    <button type="primary" style="width: 100%;" disabled="{{account.length == 0 || password.length == 0 || !checked}}" bindtap="confirm">确认</button>
  </view>
  <view class="footer">
    <text>微信小程序学习示例代码</text>
  </view>
</view>

// pages/loginDemo/loginDemo.js
Page({
  data: {
    account: "",    // 用户名
    password: "",   // 密码
    checked: false, // 是否勾选协议
  },

  // 确认按钮点击事件
  confirm: function() {
    wx.showModal({
      content: `账号: ${this.data.account}, 密码: ${this.data.password}`,
      title: "进行登录/注册"
    });
  },

  // 跳转隐私协议页面
  nav1: function() {
    wx.showToast({
      title: "跳转隐私协议"
    });
  },

  // 跳转用户协议页面
  nav2: function() {
    wx.showToast({
      title: "跳转用户协议"
    });
  }
});

/* pages/loginDemo/loginDemo.wxss */
.header {
  font-size: 25px;
  margin-left: 20px;
  margin-top: 15px;
  font-weight: bold;
}

.tip {
  margin-left: 20px;
  margin-top: 10px;
  font-size: 13px;
  color: #515151;
}

.input {
  margin-left: 20px;
  width: calc(100% - 40px);
  margin-top: 20px;
}

.accountInput {
  border-bottom: #919191 1px solid;
  height: 40px;
}

.checkbox {
  margin-left: 15px;
  margin-top: 10px;
}

.checkbox checkbox {
  transform: scale(0.7, 0.7);
}

.normal {
  font-size: 12px;
}

.highlight {
  font-size: 12px;
  color: cornflowerblue;
}

.buttonView {
  margin-top: 50px;
  margin-left: 20px;
  width: calc(100% - 40px);
}

.footer {
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
  font-size: 14px;
  color: gray;
}