Código de la página de registro de inicio de sesión del subprograma WeChat

El siguiente es un ejemplo de código de una página de inicio de sesión de registro de subprograma WeChat simple:

<!-- 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",
        });
      },
    });
  },
});

En el código anterior, el archivo index.wxml define la vista de la página de registro, incluido el nombre de usuario, la contraseña, el cuadro de entrada para confirmar la contraseña, el botón de envío y un enlace a la página de inicio de sesión. El archivo index.js define la lógica de la página de registro. Cuando el usuario hace clic en el botón Enviar, se enviará una solicitud de registro y se realizarán avisos y saltos de página de acuerdo con el resultado devuelto de la solicitud. El archivo login.js define de manera similar la lógica de la página de inicio de sesión.

Supongo que te gusta

Origin blog.csdn.net/m0_57790713/article/details/129169841
Recomendado
Clasificación