WeChat applet login registration page code

The following is a code example of a simple WeChat applet registration login page:

<!-- index.wxml -->
<view class="container">
  <form bindsubmit="onSubmit">
    <view class="form-group">
      <text>用户名：</text>
      <input type="text" name="username" placeholder="请输入用户名" />
    </view>
    <view class="form-group">
      <text>密码：</text>
      <input type="password" name="password" placeholder="请输入密码" />
    </view>
    <view class="form-group">
      <text>确认密码：</text>
      <input type="password" name="confirmPassword" placeholder="请再次输入密码" />
    </view>
    <button formType="submit">注册</button>
  </form>
  <view class="login">
    <text>已有账号？</text>
    <text class="login-btn" bindtap="goToLogin">登录</text>
  </view>
</view>

<!-- index.js -->
Page({
  onSubmit: function (e) {
    const { username, password, confirmPassword } = e.detail.value;
    if (!username || !password || !confirmPassword) {
      wx.showToast({
        title: "请填写完整信息",
        icon: "none",
      });
      return;
    }
    if (password !== confirmPassword) {
      wx.showToast({
        title: "两次密码不一致",
        icon: "none",
      });
      return;
    }
    // 发送注册请求，注册成功后跳转到登录页
    wx.request({
      url: "注册接口地址",
      method: "POST",
      data: {
        username,
        password,
      },
      success: (res) => {
        wx.showToast({
          title: "注册成功",
          icon: "success",
        });
        wx.navigateTo({
          url: "/pages/login/login",
        });
      },
      fail: (err) => {
        wx.showToast({
          title: "注册失败",
          icon: "none",
        });
      },
    });
  },

  goToLogin: function () {
    wx.navigateTo({
      url: "/pages/login/login",
    });
  },
});

// login.js
Page({
  onSubmit: function (e) {
    const { username, password } = e.detail.value;
    if (!username || !password) {
      wx.showToast({
        title: "请填写完整信息",
        icon: "none",
      });
      return;
    }
    // 发送登录请求，登录成功后跳转到首页
    wx.request({
      url: "登录接口地址",
      method: "POST",
      data: {
        username,
        password,
      },
      success: (res) => {
        wx.showToast({
          title: "登录成功",
          icon: "success",
        });
        wx.switchTab({
          url: "/pages/index/index",
        });
      },
      fail: (err) => {
        wx.showToast({
          title: "登录失败",
          icon: "none",
        });
      },
    });
  },
});

In the above code, the index.wxml file defines the view of the registration page, including the user name, password, input box for confirming the password, the submit button and a link to the login page. The index.js file defines the logic of the registration page. When the user clicks the submit button, a registration request will be sent, and prompts and page jumps will be performed according to the returned result of the request. The login.js file similarly defines the logic for the login page.