赞
踩
以下是一个简单的微信小程序注册登录页面的代码示例:
- <!-- 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 文件类似地定义了登录页面的逻辑。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。