微信小程序登录注册页面代码
<!-- 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 文件类似地定义了登录页面的逻辑。
上一篇:
uniapp开发微信小程序-2.页面制作
下一篇:
python微信机器人制作教程+源码