UniApp+UviewUI实战之记住账号密码

简介: UniApp+UviewUI实战之记住账号密码

前言

实际开发中,为了方便用户进行登录以及为了用户的体验感,在密码框下常常会添加一个复选框用作记住账号密码。话不多说,直接步入主题。

image.png

核心代码

HTML

  <u-form-item prop="rememberPsw">
          <u-checkbox-group>
            <u-checkbox v-model="loginForm.rememberPsw" shape="circle" @change="loginForm.rememberPsw=!loginForm.rememberPsw" label="记住账号密码"></u-checkbox>
          </u-checkbox-group>
        </u-form-item>

JS

  data() {
      return {
                  loginForm: {
          rememberPsw: true,
        }
            }
         },
      mounted() {
      //页面加载完成,获取本地存储的账号及密码  
      const Phone = uni.getStorageSync('Phone');//我这边是通过手机号进行登录
      const userPwd = uni.getStorageSync('userPwd');
      if (Phone && userPwd) {
        this.loginForm.Phone = Phone;
        this.loginForm.userPwd = userPwd;       
      } else {
        this.loginForm.Phone = "";
        this.loginForm.userPwd = "";        
      }
    },
        methods: {
            //写在OBJECT参数名是success的登录请求里面
            if (!this.loginForm.rememberPsw) { //用户勾选“记住密码”
      console.log("记住密码")
      uni.setStorageSync('Phone', this.loginForm.Phone);
      uni.setStorageSync('userPwd', this.loginForm.userPwd);
      } else { //用户没有勾选“记住密码”
        console.log("没有记住密码")
        uni.removeStorageSync('Phone');
        uni.removeStorageSync('userPwd');
        his.loginForm.Phone = "";
        this.loginForm.userPwd = "";
          } 
       }

当你退出登录后,重新登录时就会发现账号和密码已经出现在输入框中。

 


相关文章
|
6月前
|
前端开发
uniapp 实战 -- app 的自动升级更新(含生成 app 发布页)
uniapp 实战 -- app 的自动升级更新(含生成 app 发布页)
1469 1
|
6月前
uniapp实战 —— 猜你喜欢(含滚动触底分页加载)
uniapp实战 —— 猜你喜欢(含滚动触底分页加载)
75 3
|
6月前
|
存储
uniapp实战 -- 个人信息维护(含选择图片 uni.chooseMedia,上传文件 uni.uploadFile,获取和更新表单数据)
uniapp实战 -- 个人信息维护(含选择图片 uni.chooseMedia,上传文件 uni.uploadFile,获取和更新表单数据)
196 2
|
6月前
uniapp实战 —— 弹出层 uni-popup (含vue3子组件调父组件的方法)
uniapp实战 —— 弹出层 uni-popup (含vue3子组件调父组件的方法)
659 1
|
6月前
uniapp实战 —— 轮播图【数字下标】(含组件封装,点击图片放大全屏预览)
uniapp实战 —— 轮播图【数字下标】(含组件封装,点击图片放大全屏预览)
132 1
|
6月前
|
小程序 开发者
uniapp实战 —— 开发微信小程序的调试技巧
uniapp实战 —— 开发微信小程序的调试技巧
521 1
|
6月前
|
前端开发
uniapp 实战 -- 创建 uni-admin 项目,部署到 uniCloud 前端网页托管(免费云空间)
uniapp 实战 -- 创建 uni-admin 项目,部署到 uniCloud 前端网页托管(免费云空间)
423 0
|
6月前
uniapp实战 —— 竖排多级分类展示
uniapp实战 —— 竖排多级分类展示
84 0
|
6月前
|
JavaScript 前端开发 开发者
uniapp实战 —— 骨架屏
uniapp实战 —— 骨架屏
171 0

相关实验场景

更多