微信小程序的缓存
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',
})
}
})
}
})
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· winform 绘制太阳,地球,月球 运作规律
· 上周热点回顾(3.3-3.9)