微信小程序登录注册页面代码

以下是一个简单的微信小程序注册登录页面的代码示例:

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

上面代码中,index.wxml 文件定义了注册页面的视图,包括用户名、密码、确认密码的输入框以及提交按钮和一个跳转到登录页面的链接。index.js 文件定义了注册页面的逻辑,当用户点击提交按钮时会发送注册请求,并根据请求的返回结果进行提示和页面跳转。login.js 文件类似地定义了登录页面的逻辑。

  • 13
    点赞
  • 127
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

团团很腻害

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值