又省时间又省心,微信小程序记住密码功能大揭秘

这篇具有很好参考价值的文章主要介绍了又省时间又省心,微信小程序记住密码功能大揭秘。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

微信小程序已经成为现代人生活中不可或缺的一部分,但是每次打开小程序都需要重新输入密码,这让人感到有些麻烦。那么,如何实现微信小程序记住密码呢?本文将为大家详细介绍。


实现思路

其实实现的核心思路非常简单,就是通过 wx.setStorageSync()wx.getStorageSync() 方法在登录后将登录的信息进行存储,当我们再次登录时读取存储的登录信息赋值到页面即可。


实现源码

.wxml 文件

<form catchsubmit="formSubmit">
  <view class="formItemBox">
    <view>用户名</view>
    <view>
      <input bindinput="userInput" name="username" model:value="{{ formData.username }}" type="text"
        placeholder="请输入用户名" />
    </view>
  </view>
  <view class="formItemBox">
    <view>密码</view>
    <view>
      <input bindinput="psdInput" name="password" model:value="{{ formData.password }}" type="password"
        placeholder="请输入密码" />
    </view>
  </view>
  <view class="psdBox">
    <checkbox-group bindchange="onChange">
      <checkbox value="1" checked="{{formData.checked}}" />
      <label for="check">记住密码</label>
    </checkbox-group>
  </view>
  <view class="bomBtnBox">
    <button size="mini" formType="submit">提交</button>
  </view>
</form>

.js 文件

Page({
  data: {
    formData: {
      username: "",
      password: "",
      checked: false,
    },
  },
  onLoad: function (options) {
    // 赋值操作
    this.setData({
      'formData.username': wx.getStorageSync("formData").username,
      'formData.password': wx.getStorageSync("formData").password,
      'formData.checked': wx.getStorageSync('formData').checked
    })
  },
  //获取用户名
  userInput(e) {
    this.setData({
      'formData.username': e.detail.value
    })
  },
  //获取密码
  psdInput(e) {
    this.setData({
      'formData.password': e.detail.value
    })
  },
  // 记住密码框事件方法
  onChange(e) {
    this.setData({
      'formData.checked': e.detail.value.includes('1')
    })
  },
  // 模拟登录事件方法
  formSubmit(e) {
    wx.showToast({
      title: '登录成功',
      duration: 1000
    });
    // 如果勾选"记住密码"选框则存储登录信息,反之则清空存储的信息
    this.data.formData.checked == true ? wx.setStorageSync("formData", this.data.formData) : wx.setStorageSync("formData", "");
  },
})

.wxss 文件

page {
    font-size: 28rpx;
}

.formItemBox {
    display: flex;
    align-items: center;
    padding: 20rpx 20rpx 8rpx 20rpx;
    border-bottom: 1px solid gainsboro;
}

.formItemBox view:first-child {
    width: 20%;
    color: #646566;
}

.formItemBox view:last-child {
    width: 80%;
}

.psdBox {
    margin: 14rpx 20rpx 28rpx 20rpx
}

checkbox .wx-checkbox-input {
    width: 28rpx;
    height: 28rpx;
}

checkbox .wx-checkbox-input {
    border-color: #409eff;
    background-color: transparent;
    transition: background-color .3s;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    color: #fff;
    background-color: #409eff;
}

.bomBtnBox {
    margin: 20rpx;
}

.bomBtnBox button {
    width: 100%;
    padding: 6rpx 0rpx;
    color: white;
    background-color: rgb(64, 158, 255);
}

通过上面的代码我们实现了如下的效果:

  • 在页面的 data 中定义一个 formData 对象,包含 usernamepasswordchecked 三个属性,分别用于存储用户名、密码和记住密码的状态;
  • 在页面的 onLoad 方法中,通过 wx.getStorageSync 方法获取之前存储的登录信息,并将其赋值给 formData 对象;
  • 在页面中定义 userInputpsdInput 和 onChange 三个方法,分别用于获取用户名、密码和记住密码框的状态;
  • formSubmit 方法中,模拟登录成功的操作,并根据记住密码框的状态,使用 wx.setStorageSync 方法存储登录信息或清空存储的信息;
  • 在页面的 wxml 中,使用 input 标签绑定 userInputpsdInput 方法,分别获取用户名和密码的输入值;
  • 使用 checkbox 标签绑定 onChange 方法,获取记住密码框的状态;
  • 在提交按钮的点击事件中,调用 formSubmit 方法进行登录操作。

实现效果

微信小程序记住密码,小程序,前端,小程序文章来源地址https://www.toymoban.com/news/detail-533316.html

到了这里,关于又省时间又省心,微信小程序记住密码功能大揭秘的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【uni-app2.0】实现登录页记住密码功能

    使用uni-app的 uni.setStorageSync() 和 uni.getStorageSync() 方法来存储和读取密码 在登录页中添加一个记住密码的 u-checkbox 选项,并在data里面添加一个 rememberPwd 的布尔值,在每次点击记住密码 change 的时候来记录用户的选择 在点击登录按钮执行的事件中,使用 uni.setStorageSync() 方法将【

    2024年02月15日
    浏览(56)
  • 微信小程序渲染实时时间

    总结一下自己怎么用JS初级的内容来写一个页面实时渲染时间的方法。 util.js文件代码如下: 例如,我要在index.js中引用util.js中的模块formatTime。那么,首先在index.js中定义变量util,使用require函数加载util.js文件。这里必须使用相对路径。 调用函数时,传入new Date()参数,返回值

    2024年02月11日
    浏览(53)
  • 【微信小程序支付功能】uniapp实现微信小程序支付功能

    场景 :要实现公司微信小程序的电商模块微信支付功能 一.实现步骤和思路 在登录状态,登录的时候获取到code,利用code获取到 openid: https://blog.csdn.net/weixin_45308405/article/details/128868377?spm=1001.2014.3001.5501 在manifest.json文件“App模块配置”项的“Payment(支付)”下,勾选“微信支付

    2024年02月11日
    浏览(61)
  • uniapp微信小程序-项目实战修改密码

     图标是使用uview里面的图标,icfont也可以

    2024年02月22日
    浏览(47)
  • 微信小程序做登录密码显示隐藏效果

     在编辑器和苹果手机上面显示就是正常的大小,在安卓手机上面黑点就非常大,需要单独调   安卓手机显示比较大  wxml 注意:在html中的input是通过切换type的属性值来实现隐藏显示的 在微信小程序的input里面type没有password属性 是通过password属性的true或者false来设置是否为密

    2024年02月12日
    浏览(60)
  • 微信小程序获取当前日期时间

    在小程序中获取当前系统日期和时间,可直接拿来使用的常用的日期格式 一般放入utils工具类    参考代码  示例

    2024年02月07日
    浏览(65)
  • 微信小程序 获取当前日期时间

    打印结果: 自定义:

    2024年02月04日
    浏览(67)
  • 微信小程序如何获取当前日期时间

    Hello大家好!我是咕噜铁蛋,获取当前日期时间是小程序中经常会用到的一个功能。因此,在本文中,我通过科技手段给大家收集整理了下,今天我将向大家介绍如何在微信小程序中获取当前日期时间的方法,并分享一些实用技巧和注意事项。 一、获取当前日期时间的方法

    2024年01月23日
    浏览(63)
  • 微信小程序-如何处理时间戳

    此文章用于解决微信在处理后端服务器传来的时间数据时会碰到时间信息被自动转成时间戳的问题。 (1)创建utils目录 创建pages同级目录wxs (2)新建dateUtils.wxs文件,文件内容如下 (3)在对应的page的wxml文件中调用(例如:我是在community.wxml文件中调用该工具) (4)具体调用

    2024年02月11日
    浏览(37)
  • 微信小程序实现获取当前系统时间

    在写获取系统当前的时间的时候,我们首先要前了解一下JS中的Date对象的用法。 //用于获取年份 1、Date().getFullYear() //获取当前月份,注意返回值是0-11,需要在后面+1 2、Date().getMonth() //获取当前日 3、Date().getDate() //获取当前时刻 4、Date().getHours() //获取分钟 5、new Date().getMinut

    2024年02月16日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包