微信小程序的缓存


 wx.setStorageSync();将数据存入小程序的缓存中可以在调试器的storage选项里看到所缓存的数据,

通过wx.setStorageSync()存储的数据可以在任何一个页面的生命周期函数里调用
结合电话号码登录的demo做消息介绍;
大概场景是在小程序的我的页面有登录按钮前往输入号码获取验证码登录的页面,登录页面需要获取到用户的电话号码与验证码以及用户的头像等一并传入我的页面渲染到指定的位置
 
这里首先要在登录页面的input输入框中给定一个bindinput属性可以在用户输入的过程中自动获取相关信息并将获取的信息保存到data中,然后使用wx.request传入后端获取验证码

 

 微信小程序的缓存

 

 

<view class=”login_box”>
  <view class=”login_item”>
    <text class=”phone”>手机号码:</text>
    <input bindinput=”inputPhone” maxlength=”{{11}}” placeholder=”请输入手机号码” value=”{{phone}}” />
  </view>
  <view class=”login_item”>
    <text class=”phone”>验证码:</text>
    <input placeholder=”请输入验证码” value=”{{smsCode}}”/>
    <text class=”code” bindtap=”getCode”>获取验证码</text>
  </view>
  <view>
    <button bindtap=”login” type=”warn” class=”login”>立即登录</button>
  </view>
</view>
 
 
 

 //首先获取号码->将号码作为参数发去后端获取验证码->登录将号码和验证码给后端判断,回调函数里执行跳转链接

    //键盘输入触发获取输入的号码
    inputPhone(event) { 
        //console.log(event)
        this.setData({
          phone: event.detail.value
        })
      },
      //携带号码请求验证码
      getCode() {
        wx.request({
          url: ‘http://81.71.65.4:3006/user/getSmsCode’,
          data: {
            phone: this.data.phone
          },
          success: (res)=> {
            this.setData({
              smsCode: res.data.result.smsCode
            })
          }
        })
      },
      //将验证码和手机号传入后端,进行验证,通过回调函数进行跳转
      login() {
        let _this = this
        wx.getUserProfile({
            desc:’完善信息’,
            success(res){
                var users_head = res.userInfo.avatarUrl;
                var users_name = res.userInfo.nickName;
                _this.setData({
                    users_head:users_head,
                    users_name:users_name
            })
            wx.request({
                url: ‘http://81.71.65.4:3006/user/loginBySmsCode’,
                data: {
                  phone: _this.data.phone,
                  smsCode: _this.data.smsCode,
                },
                success: (res)=> {
                   wx.setStorageSync(‘phone’,_this.data.phone),
                   wx.setStorageSync(‘users_name’,_this.data.users_name),
                   wx.setStorageSync(‘users_head’,_this.data.users_head),
                   wx.switchTab({
                     url: ‘../my/my’,
                   })
                }
            })
        }
    })    
  }
 
 
 
 

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/280318.html

(0)
上一篇 2022年8月13日
下一篇 2022年8月13日

相关推荐

发表回复

登录后才能评论