微信小程序登录注册功能：基本的界面设计

先看示例图片效果：

一、项目背景与功能概述

在微信小程序开发中，登录注册模块是几乎所有应用的基础功能。本文将分享一个完整的微信小程序登录注册功能示例的实现过程，该示例界面包含以下核心功能：

（1）首页展示登录 / 注册双按钮入口
（2）中间展示广告宣传语
（3）自定义背景图片设计
（4）登录按钮交互：点击弹出登录表单
（5）可自行接入抖音登录与手机号登录等方式
（6）提供 “重新选择” 按钮返回初始页面
（7）注册按钮交互：提示跳转逻辑（示例中未实现完整注册页）
该示例适合小程序开发初学者学习基础界面搭建与交互逻辑实现，也可作为实际项目的功能模板进行扩展。

二、界面设计与交互逻辑

2.1 页面结构规划
整个功能界面采用分层设计，视觉结构如下：

顶部区域：静态展示广告宣传语
背景层：自定义背景图片（设置为页面背景）
功能按钮区：居中排列的 “登录” 与 “注册” 按钮
交互层：点击登录按钮后弹出登录框
底部区域：登录方式选择区（抖音 / 手机号）
三、技术实现详解

具体的代码实现如下：

1.js代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    current: 0
  },

  changeClick(e) {
    let tag = e.currentTarget.dataset.type;
    switch (tag) {
      case '0':
        wx.showToast({
          title: '点击注册后应跳转到一个新页面呦~',
          icon: 'none'
        })
        break;
      case '1':
        this.setData({
          current: 1
        })
        break;
      default:
        this.setData({
          current: 0
        })
        break;
    }
  },

  loginClick() {
    wx.showToast({
      title: '点击了登录监听',
      icon: 'none'
    })
  },

  wayClick(e) {
    let tag = e.currentTarget.dataset.type;
    wx.showToast({
      title: '点击使用' + (tag == '0' ? '抖音' : '手机号') + '方式',
      icon: 'none'
    })
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

2.wxml代码：

<view class="bg-img"></view>
<view class="data-box top-box">
  <block wx:if="{{current==0}}">
    <view class="opacity">
      <view class="row-title">
        <view>小程序</view>
        <view>微信搜『蒜鸟编程』</view>
      </view>
      <view class="row-tip">
        已同步至微信小程序、CSDN、抖音、小红书、微信公众号、今日头条以及哔哩哔哩平台，搜索『蒜鸟编程』查看更多呦~
      </view>
      <view class="btn-box">
        <button class="btn btn-0" bind:tap="changeClick" data-type="0">注 册</button>
        <button class="btn btn-1" bind:tap="changeClick" data-type="1">登 录</button>
      </view>
    </view>
  </block>
  <block wx:else>
    <view class="login-box opacity">
      <view class="login-title">『账号登录』</view>
      <view class="level row-input">
        <view class="svg-icon svg-agree svg-m"></view>
        <input placeholder="请输入登录名" maxlength="12" />
      </view>
      <view class="level row-input">
        <view class="svg-icon svg-plat svg-m"></view>
        <input placeholder="请输入6位口令" type="number" maxlength="6" />
      </view>
      <view class="row-pwd" bind:tap="changeClick" data-type="2">重新选择</view>
      <view class="btn-login">
        <button class="btn btn-1" bind:tap="loginClick">登 录</button>
      </view>
    </view>
  </block>
</view>
<view class="data-box way-box level">
  <view class="svg-icon svg-douyin svg-m" bind:tap="wayClick" data-type="0"></view>
  <view class="svg-icon svg-phone svg-m" bind:tap="wayClick" data-type="1"></view>
</view>

3.wxss代码：

page {
  overflow: hidden;
}

.level {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.bg-img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-image: url('https://thumbnail0.baidupcs/thumbnail/70ba81fc1r937c0285f53a73ef295d05?fid=1101400036163-250528-575795020700475&time=1749880800&rt=sh&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-slPn3JUjxYQrF8YKNssu5ElmMYE%3D&expires=8h&chkv=0&chkbd=0&chkpc=&dp-logid=358846454519069257&dp-callid=0&file_type=0&size=c710_u400&quality=100&vuk=-&ft=video');
  background-size: cover;
}

.bg-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://thumbnail0.baidupcs/thumbnail/70ba81fc1r937c0285f53a73ef295d05?fid=1101400036163-250528-575795020700475&time=1749880800&rt=sh&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-slPn3JUjxYQrF8YKNssu5ElmMYE%3D&expires=8h&chkv=0&chkbd=0&chkpc=&dp-logid=358846454519069257&dp-callid=0&file_type=0&size=c710_u400&quality=100&vuk=-&ft=video');
  background-size: cover;
  background-position: center;
  mask-image: linear-gradient(to bottom, black 10%, transparent 100%);
  mask-mode: alpha;
  -webkit-mask-image: linear-gradient(to bottom, black 10%, transparent 100%);
}

.data-box {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.top-box {
  padding: 10% 10% 25% 10%;
  background: linear-gradient(to top, #F2E7E5, rgba(0, 0, 0, 0));
}

.way-box {
  padding-bottom: 3%;
  justify-content: center;
}

.row-title {
  font-size: 60rpx;
  color: white;
}

.row-tip {
  margin-top: 20rpx;
  font-size: 26rpx;
  color: rgb(82, 81, 81);
}

.btn-box {
  margin-top: 10%;
  margin-bottom: 15%;
}

.btn {
  width: 100%;
  border-radius: 50rpx;
  margin: 6% 0;
}

.btn::after {
  border: none;
}

.btn-login {
  margin-top: 5%;
  margin-bottom: 10%;
}

.btn-0 {
  color: #f5759f;
  background-color: #ffffff;
}

.btn-1 {
  color: white;
  background-color: #f5759f;
}

.svg-m {
  margin: 0 20rpx;
  height: 40rpx;
  width: 40rpx;
}

/* 登录 */
.login-box {
  margin-bottom: 30%;
  padding: 10% 20rpx 1rpx 20rpx;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 20rpx;
}

.login-title {
  text-align: center;
  color: #fff;
  font-size: x-large;
  margin-bottom: 10%;
}

.row-input {
  background-color: #fff;
  padding: 25rpx 15rpx;
  border-radius: 50rpx;
  margin: 30rpx 0;
  color: #474747;
}

.row-pwd {
  font-size: 28rpx;
  text-align: right;
  margin-right: 20rpx;
  color: rgb(207, 205, 205);
}

/* 动画样式 */
.opacity {
  opacity: 0;
  animation: topFadeIn 0.8s forwards;
}

@keyframes topFadeIn {
  to {
    opacity: 1;
  }
}

4、json代码：

{
  "usingComponents": {},
  "navigationStyle": "custom"
}

四、功能亮点与扩展方向

4.1 已实现的核心亮点

多登录方式支持：同时集成抖音登录与手机号登录，满足不同用户习惯
模态框交互设计：登录表单采用弹出形式，不破坏页面整体结构
广告功能：广告宣传语，提升运营推广能力
响应式布局：适配不同尺寸的手机屏幕，保证界面美观

4.2 可扩展优化方向，需要有需要的客户自行完善

注册功能完善：实现完整的注册页面，包含账号密码设置、短信验证等；
登录状态管理：添加本地存储，保存用户登录状态，实现自动登录；
安全增强：添加密码加密、防刷机制、登录异常检测等安全措施；
第三方集成：扩展微信登录、QQ 登录等更多第三方登录方式；

五、效果展示与源码获取

5.1 界面效果说明

首页展示：背景图片覆盖整个页面，中部居中排列登录 / 注册按钮
登录模态框：点击登录按钮后，弹出登录窗口，显示两种登录方式
交互反馈：点击按钮有明确的点击态反馈，操作后显示 Toast 提示登录状态

5.2 源码获取方式

完整的实现中含有动态樱花雨特效背景，需进我的主页在下载处查看，或点击https://download.csdn/download/weixin_45465881/91019956链接进入查看下载完整版~

这个示例适合作为小程序入门项目，开发者可以在此基础上扩展更多业务逻辑，如用户信息完善、密码登录、社交账号绑定等功能。在实际项目中，还需要结合后端 API 实现真实的身份验证与数据存储。更多示例，请关注 蒜鸟编程（微信小程序 / 抖音 / 小红书/微信公众号/微博****等同名称），在这里，编程与生活的边界从未如此清晰，期待与大家共同成长！后续将围绕编程技术持续更新更多实践示例，如果在实现过程中遇到问题，或者有更好的优化建议，欢迎在评论区交流讨论！