开发者社区> 游客x2neqpmkqiuce> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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 = "";
                    } 
 
       }

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

 


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
SAP系统和微信集成的系列教程之八:100行代码在微信公众号里集成地图搜索功能
本系列的英文版Jerry写作于2017年,这个教程总共包含十篇文章,发表在SAP社区上。
45 0
SAP系统和微信集成的系列教程之八:100行代码在微信公众号里集成地图搜索功能
(1) 微信开发环境的搭建 (2) 如何通过微信公众号消费API (3) 微信用户关注公众号之后,自动在SAP C4C系统创建客户主数据 (4) 如何将SAP C4C主数据变化推送给微信公众号 (5) 如何将SAP UI5应用嵌入到微信公众号菜单中 (6) 如何通过OAuth2获取微信用户信息并显示在SAP UI5应用中 (7) 使用Redis存储微信用户和公众号的对话记录 (8) 微信公众号的地图集成:100行代码在微信公众号里集成地图搜索功能( 本文 ) (9) 如何将微信用户发送到微信公众号的消息保存到SAP C4C系统
38 0
SAP系统和微信集成的系列教程之八:100行代码在微信公众号里集成地图搜索功能
(1) 微信开发环境的搭建 (2) 如何通过微信公众号消费API (3) 微信用户关注公众号之后,自动在SAP C4C系统创建客户主数据 (4) 如何将SAP C4C主数据变化推送给微信公众号 (5) 如何将SAP UI5应用嵌入到微信公众号菜单中 (6) 如何通过OAuth2获取微信用户信息并显示在SAP UI5应用中 (7) 使用Redis存储微信用户和公众号的对话记录 (8) 微信公众号的地图集成:100行代码在微信公众号里集成地图搜索功能( 本文 ) (9) 如何将微信用户发送到微信公众号的消息保存到SAP C4C系统 (10) 如何在SAP C4C系统直接回复消息给
30 0
SAP系统和微信集成的系列教程之八:100行代码在微信公众号里集成地图搜索功能
SAP系统和微信集成的系列教程之八:100行代码在微信公众号里集成地图搜索功能
34 0
阿里云虚拟主机:怎么查看FTP帐号、密码、IP?怎么查看数据库账号、地址和密码等?
本文介绍阿里云虚拟主机:怎么查看FTP帐号、密码、IP?怎么查看数据库账号、地址和密码等?购买前请先:领取阿里云幸运券,有很多优惠,下文中有领取链接。 购买建议多买几年,年数越多优惠越多。
10897 0
java中静态代码块的用法 static用法详解(转)
(一)java 静态代码块 静态方法区别一般情况下,如果有些代码必须在项目启动的时候就执行的时候,需要使用静态代码块,这种代码是主动执行的;需要在项目启动的时候就初始化,在不创建对象的情况下,其他程序来调用的时候,需要使用静态方法,这种代码是被动执行的. 静态方法在类加载的时候 就已经加载 可以用类名直接调用比如main方法就必须是静态的 这是程序入口两者的区别就是:静态代码块是自动执行的;静态方法是被调用的时候才执行的. 静态方法(1)在Java里,可以定义一个不需要创建对象的方法,这种方法就是静态方法。
1473 0
57
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载