微信小程序开发，登录注册实现

已于 2025-05-08 15:49:26 修改
阅读量1.1k 收藏 29
点赞数 36
分类专栏： 微信小程序开发入门 文章标签： 微信小程序 小程序 登录注册
于 2025-05-07 16:04:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jky_yihuangxing/article/details/147767695
版权

文章目录

1. 官方文档教程

  1. https://developers.weixin.qq.com/miniprogram/dev/framework/
  2. 路由跳转的几种方式： https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html
  3. Toast弹框提示：https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html
  4. 数据缓存：https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html

2. 注册实现

  • 编写注册布局文件register.wxml
<!--pages/register/register.wxml-->
<view class="login-container">
    <navigation-bar title="" back="{{true}}" color="white"  class="navigation-bar" />
    <!-- 背景图区域 -->
    <view class="logo-container">
        <image class="logo" src="../../assets/img_login_bg.jpg" mode="" />
    </view>

    <!-- 登录区域 -->
    <view class="login-parent-container">
        <text class="login-title-tips">注册</text>
        <view class="login-username-container">
            <image src="../../assets/img_username.png" mode="" />
            <input placeholder="请输入用户名" bindinput="eventUsernameHandle" />
        </view>

        <view class="login-password-container">
            <image src="../../assets/img_password.png" mode="" />
            <input placeholder="请输入密码" password="true" bindinput="eventPasswordHandle" />
        </view>

        <view class="login-btn-container"> <button bind:tap="onRegisterHandle">注册</button></view>

    </view>

</view>
  • 编写注册样式文件register.wxss，跟后面的登录样式差不多
/* pages/register/register.wxss */
.login-container {
    display: flex;
    height: 100vh;
    flex-direction: column;
    position: relative;

}

.navigation-bar{
    position: absolute;
    z-index: 2000;
}

.logo-container {
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    position: absolute;
}

.logo {
    width: 100%;
    height: 100vh;
}

.login-parent-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); 
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    margin-top: 600rpx;
    padding: 40rpx;
    z-index: 1000;
}


.login-title-tips {
    display: flex;
    width: 100%;
    justify-content: center;
    font-weight: 800;
    font-size: 40rpx;
    line-height: 100rpx;
    color: #ffffff;
}



.login-username-container {
    display: flex;
    flex-direction: row;
    height: 90rpx;
    align-items: center;
    padding-left: 20rpx;
    padding-right: 20rpx;
    background-color: #f5f5f5;
    border-radius: 10rpx;
    margin-top: 20rpx;

}

.login-username-container image {
    width: 40rpx;
    height: 40rpx;
}

.login-username-container input {
    width: calc(100% - 60rpx);
    margin-left: 20rpx;
}


.login-password-container {
    display: flex;
    flex-direction: row;
    height: 90rpx;
    align-items: center;
    padding-left: 20rpx;
    padding-right: 20rpx;
    background-color: #f5f5f5;
    border-radius: 10rpx;
    margin-top: 20rpx;

}

.login-password-container image {
    width: 40rpx;
    height: 40rpx;
}

.login-password-container input {
    width: calc(100% - 60rpx);
    margin-left: 20rpx;
}

.forget-pwd-container {
    margin-top: 30rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.login-btn-container {
    margin-top: 50rpx;
    display: flex;
}

.login-btn-container button {
    width: 100%;
    line-height: 70rpx;
    background-color: #f62b7c;
    color: #ffffff;
}
  • 具体注册逻辑实现register.js
// pages/register/register.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    username: '',
    password: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  eventUsernameHandle(options){
    this.setData({
      username: options.detail.value
    })
  },

  eventPasswordHandle(options){
    this.setData({
      password: options.detail.value
    })
  },

  onRegisterHandle(){
    if(this.data.username==='' || this.data.password ===''){
      wx.showToast({
        title: '注册信息不能为空',
        icon :'error'
      })
      return
    }
    let users =wx.getStorageSync('users') ||[]
    if(users.some(item => item.username === this.data.username)){
        wx.showToast({
          title: '用户名已存在',
          icon: 'error'
        })
      return
    }
    let user ={
      username: this.data.username,
      password: this.data.password
    }
    users.push(user)
    wx.setStorageSync("users",users)

    wx.showToast({
        title: '注册成功',
        icon :'success'
    })

    setTimeout(() => {
      wx.navigateBack()
    },500)

  }
})
  • 效果图

在这里插入图片描述

3. 登录实现

  • 编写登录样式文件login.wxml
<!--pages/login/login.wxml-->
<view class="login-container">

<!-- 背景图区域 -->
    <view class="logo-container">
        <image class="logo" src="../../assets/img_login_bg.jpg" mode="" />
    </view>

<!-- 登录框 -->
    <view class="login-parent-container">
        <text class="login-title-tips">登录</text>
        <view class="login-username-container">
            <image src="../../assets/img_username.png" mode="" />
            <input placeholder="请输入用户名"  bindinput="eventUsernameHandle" value="{{username}}" />
        </view>

        <view class="login-password-container">
            <image src="../../assets/img_password.png" mode="" />
            <input placeholder="请输入密码" password="true" bindinput="eventPasswordHandle" value="{{password}}" />
        </view>

        <view class="forget-pwd-container">
            <view class="forget-pwd-left-container">
                <switch  type="checkbox"  checked="{{isLogin}}"  bindchange="checkboxChange" />
                <text>记住密码</text>
            </view>
            <view class="forget-pwd-right-container" bind:tap="onRegisterHandle">
                <text class="tips">还没有账号？</text>
                <text class="register-text">注册</text>
            </view>

        </view>

        <view class="login-btn-container"> <button bind:tap="onLoginHandle">登录</button></view>

    </view>



</view>
  • 编写登录样式文件login.wxss
/* pages/login/login.wxss */

.login-container {
    display: flex;
    height: 100vh;
    flex-direction: column;
    position: relative;

}

.logo-container {
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    position: absolute;
}

.logo {
    width: 100%;
    height: 100vh;
}

.login-parent-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); 
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    margin-top: 600rpx;
    padding: 40rpx;
    z-index: 1000;
}


.login-title-tips {
    display: flex;
    width: 100%;
    justify-content: center;
    font-weight: 800;
    font-size: 40rpx;
    line-height: 100rpx;
    color: #ffffff;
}



.login-username-container {
    display: flex;
    flex-direction: row;
    height: 90rpx;
    align-items: center;
    padding-left: 20rpx;
    padding-right: 20rpx;
    background-color: #f5f5f5;
    border-radius: 10rpx;
    margin-top: 20rpx;

}

.login-username-container image {
    width: 40rpx;
    height: 40rpx;
}

.login-username-container input {
    width: calc(100% - 60rpx);
    margin-left: 20rpx;
}


.login-password-container {
    display: flex;
    flex-direction: row;
    height: 90rpx;
    align-items: center;
    padding-left: 20rpx;
    padding-right: 20rpx;
    background-color: #f5f5f5;
    border-radius: 10rpx;
    margin-top: 20rpx;

}

.login-password-container image {
    width: 40rpx;
    height: 40rpx;
}

.login-password-container input {
    width: calc(100% - 60rpx);
    margin-left: 20rpx;
}

.forget-pwd-container {
    margin-top: 30rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.forget-pwd-container .forget-pwd-left-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #ffffff;
}

.forget-pwd-container .forget-pwd-right-container {
    display: flex;
    flex-direction: row;
}

.forget-pwd-right-container .tips {
    font-size: 22rpx;
    color: #ffffff;
}

.forget-pwd-right-container .register-text {
    font-size: 22rpx;
    color: #ffb241;
}

.login-btn-container {
    margin-top: 50rpx;
    display: flex;
}

.login-btn-container button {
    width: 100%;
    line-height: 70rpx;
    background-color: #f62b7c;
    color: #ffffff;
}
  • 具体注册逻辑实现login.js
// pages/login/login.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    username: '',
    password: '',
    isLogin: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      isLogin: wx.getStorageSync('isLogin') || false
    })

    if (this.data.isLogin){
     let user = wx.getStorageSync("user")
      this.setData({
        username: user.username,
        password: user.password
      })
    }

  },

  eventUsernameHandle(options) {
    this.setData({
      username: options.detail.value
    })
  },
  eventPasswordHandle(options) {
    this.setData({
      password: options.detail.value
    })
  },

  /**
   * 是否记住密码
   */
  checkboxChange(options) {
    this.setData({
      isLogin:options.detail.value
    })

    //保存
    wx.setStorageSync("isLogin",this.data.isLogin)

  },

  /**
   * 登录
   */
  onLoginHandle(options){
    if(this.data.username==='' || this.data.password ===''){
      wx.showToast({
        title: '登录信息不能为空',
        icon :'error'
      })
      return
    }
     let users =wx.getStorageSync('users') || []
     if(users.some(item => item.username === this.data.username && item.password === this.data.password)){
       wx.showToast({
         title: '登录成功',
         icon: 'success'
       })
       let user ={
         username: this.data.username,
         password: this.data.password
       }
       //保存当前用户登录信息
       wx.setStorageSync("user",user)

       setTimeout(()=>{
         wx.switchTab({
           url: '/pages/index/index',
         })
       },500)

     }else {
       wx.showToast({
         title: '用户名或密码错误',
         icon: 'error'
       })
     }
  },

  onRegisterHandle() {
    wx.navigateTo({
      url: '/pages/register/register',
    })
  },
})
  • 效果图

在这里插入图片描述

4. 演示效果

在这里插入图片描述

5. 关于作者其它项目视频教程介绍

本人在b站录制的一些视频教程项目，免费供大家学习

  1. Android新闻资讯app实战：https://www.bilibili.com/video/BV1CA1vYoEad/?vd_source=984bb03f768809c7d33f20179343d8c8
  2. Androidstudio开发购物商城实战：https://www.bilibili.com/video/BV1PjHfeXE8U/?vd_source=984bb03f768809c7d33f20179343d8c8
  3. Android开发备忘录记事本实战：https://www.bilibili.com/video/BV1FJ4m1u76G?vd_source=984bb03f768809c7d33f20179343d8c8&spm_id_from=333.788.videopod.sections
  4. Androidstudio底部导航栏实现：https://www.bilibili.com/video/BV1XB4y1d7et/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
  5. Android使用TabLayout+ViewPager2实现左右滑动切换：https://www.bilibili.com/video/BV1Mz4y1c7eX/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
微信小程序开发之注册登录
duke_ding2的博客
06-17 6585
微信小程序开发之注册登录
微信小程序——登录注册的简单实现
m0_64813192的博客
03-17 7136
微信小程序——登录注册的简单实现
微信小程序开发——注册登录（需要云服务器支撑噢）
m0_61883479的博客
10-27 1297
微信小程序开发——注册登录（需要云服务器支撑噢） 1、app.js代码 2、云环境下面构建的login云函数的index.js文件代码 3、pages下面的mine，mine下面的index.js代码 4、pages下面的mine，mine下面的index.json代码 步骤一 通过 npm 安装 步骤二 修改 app.json 步骤三 构建 npm 包 5、pages下面的mine，mine下面的index.wxml代码
微信小程序实现登录注册
最新发布
商城app+新闻app+备忘录记事本app视频教程在某站【浩宇软件开发】
01-07 2786
本人在b站录制的一些视频教程项目，免费供大家学习。
微信小程序注册流程及APPID获取（完整版图文教程）
热门推荐
Captinyoo的博客
03-03 7万+
本文将图文介绍微信小程序注册、完善小程序账号信息、添加项目成员和体验成员和获取小程序ID（AppID）及小程序密钥（AppSecret）的详细流程，旨在提供简明的入门指导和实践建议。微信小程序提供了一个简单而直接的方式，让开发者能够快速开始他们的小程序开发旅程。开发者需要访问微信公众平台的官方网站，并选择“小程序”作为注册类型。这个过程中，你会被要求提供一些基本信息，包括但不限于你的个人或企业信息。值得注意的是，根据你的开发目的选择正确的账号类型非常重要，因为它会影响到你可以使用的微信小程序功能和权限。
Springboot实现微信小程序注册登录及微信登录.zip
03-10
微信小程序是腾讯公司基于微信平台推出的一种轻量级应用形态，它无需用户下载安装即可在微信内直接使用。自2017年正式上线以来，小程序凭借其便捷性、易获取性和出色的用户体验迅速获得市场认可，并成为连接线上线下...
微信小程序开发.pdf
06-18
综上所述，微信小程序开发不仅涉及到账号注册、开发环境搭建、代码编写等技术性工作，还需要关注产品需求分析、UI设计、数据库设计等多个方面的工作。开发者在进行微信小程序开发时，应全面考虑这些因素，以确保最终...
2024微信小程序登录注册界面代码，包含当前界面的所有源码，使用手机验证码注册或账号登录
09-06
在微信小程序中，创建一个既能实现登录又能进行注册的界面是一项常见的需求。本文将通过分析提供的标题、描述和部分源代码，深入讲解如何构建这样一个高效且简洁的登录注册界面。 从WXML（微信小程序的标记语言）...
微信小程序点餐系统微信小程序开发实战
06-07
项目实战中提供的"点餐demo"可能是已经完成部分功能的源代码，学习者可以通过阅读和修改这些代码，加深对微信小程序开发的理解。同时，也可以参考这个示例来构建自己的点餐系统。 六、小程序开发注意事项 1. 规范...
微信小程序登陆注册功能的实现代码
12-13
我们在开发小程序时，难免会用到登陆注册功能。通常小程序有为我们提供用户授权登陆的功能，但是这个只能获取用户的头像和昵称，我们该怎么样来实现小程序账号密码的注册和登陆呢，今天就来手把手的带大家学习小程序...
微信小程序的注册登录
12-04
微信小程序的注册登录，聚合工程与单结构工程 单结构工程：项目用到的内容均放在一个项目中。 常不采用，只用在小、以后不做大的或是 demo 的项目。 聚合工程。首先使用 Maven 搭建框架，然后把各个子工程构建成聚合工程。
微信小程序登陆注册代码
04-18
微信小程序的一个登陆注册代码，纯前端实现效果，注册成功进行登陆，列表显示所有用户的名称，点击进入可查看具体的用户信息
微信小程序的用户注册登陆是怎么实现的
mywaya2333的博客
02-24 3230
这个过滤器的作用是验证请求中的JWT Token，如果验证通过，则设置用户的认证信息到Spring Security上下文中，从而实现用户的身份认证。JWT（JSON Web Token）是一种用于在网络上传输信息的基于 JSON 的开放标准（RFC 7519），主要用于在用户和服务器之间传递安全可靠的信息。在微信小程序中，开发者可以选择使用 JWT 来生成和验证用户的登录态 Token，以实现用户注册登录的功能。这段代码是Spring Security中的配置代码，用于配置HTTP请求的安全性。
微信小程序实现登录注册页面
m0_52457734的博客
07-26 1万+
小程序登录注册页面
微信小程序——如何实现账号的注册、登录？
qq_54462755的博客
06-07 8699
微信小程序——如何实现账号的注册、登录？
微信小程序开发入门教程-小程序账号注册及开通
低代码布道师的博客
06-15 2648
17年小程序开始公测，经过5年的发展，无论从组件、开发工具、api、生态、社区，都已经发展的非常成熟了。如果17年年初你看小程序，觉得无需安装即用即走还是一个理念的话。站在今天看过去，往往是先提出一个先进的理念，然后再不断的朝着目标迈进。其实不仅是程序员会学习各种各样的技术，非程序员有时候也想把自己的想法落地，看着自己开发的应用程序随着日积月累，用户越来越多，知名度也越来越高。从0到1开发一款应用，并接受市场的检验无疑是美妙的。但人总是有分工，有人提出美好的愿景，有人得扎扎实实的落地。那小程序如何落地呢？其
微信小程序之———登录注册！
perry
02-07 3万+
好了，我觉得有必要对前一阶段的小程序开发过程中的一些经验写出来，总结一下，今天呢，就来总结一下小程序登录注册相关的流程和开发过程中需要注意的问题，好了，废话不多说，开始咯！ 一：登录 思路： 当用户在未登录状态下点击“登录”按钮之后，执行login函数，先用wx.login获取登录凭证code，encryptedData和iv， 然后把这三个参数发送过去，取回来is
微信小程序 实现注册、登录功能（表单校验、错误提示）
信徒博客
05-21 1万+
我的qq 2038373094 我做的是微信小程序、网站、手机app，后端java+前端vue、bootstrap框架、原生的html+css+js都会 做过律师在线咨询系统、共享农场手机app、在线心理咨询系统
微信小程序注册开发流程详解
重生之我不会写代码
11-25 1161
一。注册小程序，网址：https://mp.weixin.qq.com/ 1.点击立即注册 2. 注册小程序，（小程序也能注册其他的，这里流程都一样，这里用小程序为例子） 3.信息填写 进去之后填写信息就可以了，切记注意邮箱的要求 注册完成后就可以登录了 二，下载编辑器（开发工具） 1.最左侧有开发工具 2.选择下载版本，这里下载稳定版 网址：https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

浩宇软件开发

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

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

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

打赏作者

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

抵扣说明：

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

余额充值