2022-03-18 工作记录--Wechat applet-登录时记住账号

1、实现效果

（1）进入登陆页面，输入账号，勾选“记住账号”👇

（2）点击登录，登录成功后，本地里获取到输入的账号👇

（3）退出登录，回到登陆页面，上次登陆的账号自动渲染出来，且“记住账号”被自动勾选上👇

2、前言

主要通过wx.getStorageSync和wx.setStorageSync来读取本地里的数据。

3、思路分析

• 第一步、在data里写个保存账号的username（初始值为''，用来进行页面渲染）
• 第二步、在data里写个判断是否勾选”记住账号“的checked（初始值为false）
• 第三步、监听登陆页面加载，通过wx.getStorageSync('')读取本地的account和checked，若没有account，就传个空的字符串；最后将其分别赋值给data里的username（手机号）和checked
• 第四步、判断是否勾选记住账号，并将结果赋值给data里的checked
• 第五步、判断是否登陆成功：
  • 若登录成功 且 data里的checked为true，就通过wx.setStorageSync('account',this.data.username);将data里的username赋值给本地的account；若data里的checked为false，就通过wx.setStorageSync('account','');将本地里account的值清空；
  • 若登录成功，通过wx.setStorageSync('checked',this.data.checked);将data里的checked赋值给本地的checked。

4、步骤对应代码

第一步和第二步的对应代码

/**
 * 页面的初始数据
*/
data: {
   username: "", // 账号
   checked: false, // 是否勾选 记住账号
},

第三步的对应代码

/**
  * 生命周期函数--监听页面加载
*/
onLoad: function (options) {
   this.setData({
        username: wx.getStorageSync('account') ? wx.getStorageSync('account') : '',
        checked: wx.getStorageSync('checked')
   })

},

第四步的对应代码【复选框参自考Vant Weapp里的Checkbox】

// 判断是否勾选记住账号
onChange(event) {
   this.setData({
       checked: event.detail,
   });
},

第五步的对应代码

if (res.sta == 2000) { // 若账号登录成功
   Toast({
      type: 'success',
      message: res.msg,
      onClose: () => {
      
         if(this.data.checked == true) {
              wx.setStorageSync('account',this.data.username); // 若账号登录成功 且 勾选了“记住账号”，就将该账号存到本地的account里去
         } else {
              wx.setStorageSync('account',''); // 若账号登录成功 但 未勾选“记住账号”，就将本地的account里里的值清空
         }
         wx.setStorageSync('checked',this.data.checked); // 若账号登录成功，就将是否勾选“记住账号”的结果存到本地的checked里去
         
      }
    })
} else {
    Toast({
      type: 'error',
      message: res.message,
    })
}