微信小程序实现登录注册

1. 新建工程

项目名称自定义命名，目录自己选择，AppID可以使用注册号，或者去微信公众平台申请一个AppID，开发模式选择小程序，后端服务选择不使用云开发，模板选择JavaScript-基础模板

image-20230505110606751.png

2. 编写WXML文件

删除index.wxml文件中的内容，将以下代码复制到index.wxml中

<view class="container-view">
  <view class="header">
    <text>登录/注册</text>
  </view>
  <view class="tip">
    <text>请输入账号</text>
  </view>
  <view class="input">
    <!-- model:value用于双向绑定，组件中的值发生变化，js中的值也会变化，js中的值发生变化，组件中的值也会变化 -->
    <input type="text" class="account-input" placeholder="请输入账号" model:value="{{account}}" bindinput="accountInput"/>
  </view>
  <view class="input">
    <!-- bindinput键盘输入时，触发的回调 -->
    <input type="password" class="account-input" placeholder="请输入密码" model:value="{{password}}" bindinput="passwordInput"/>
  </view>
  <view class="checkbox">
    <checkbox model:checked="{{checked}}"/>
    <text class="normal">登录/注册即表示同意</text>
    <text class="highlight" bindtap="nav1">《隐私协议》</text>
    <text class="normal">与</text>
    <text class="highlight" bindtap="nav2">《服务协议》</text>
  </view>
  <view class="button-view">
    <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>

3. 编写WXSS文件

.header {
  font-size: 50rpx;
  margin-top: 30rpx;
  margin-left: 40rpx;
  font-weight: bold;
}

.tip {
  margin-left: 40rpx;
  margin-top: 20rpx;
  font-size: 26rpx;
  color: #515151;
}

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

.account-input {
  border-bottom: #919191 solid 2rpx;
  height: 80rpx;
}

.checkbox {
  margin-left: 30rpx;
  margin-top: 20rpx;
}

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

.normal {
  font-size: 24rpx;
}

.highlight {
  font-size: 24rpx;
  color: cornflowerblue;
}

.button-view {
  margin-top: 100rpx;
  margin-left: 40rpx;
  width: calc(100% - 80rpx);
}

.footer {
  position: absolute;
  bottom: 40rpx;
  text-align: center;
  width: 100%;
  font-size: 28rpx;
  color: gray;
}

4. 编写js文件

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    account: "",
    password: "",
    checked: false,
  },

  confirm() {
    // 弹出提示框
    wx.showModal({
      title: '进行登录/注册',
      content: `account: ${this.data.account} password: ${this.data.password}`,
    });
  },

  nav1() {
    // 弹出确认框
    wx.showToast({
      title: '跳转隐私协议',
    });
  },

  nav2() {
    wx.showToast({
      title: '跳转用户协议',
    });
  },

  accountInput() {
    console.log(this.data.account);
  },

  passwordInput() {},

  onLoad() {
    
  },
})

5. 效果图

image-20230505140758366.png