主要利用小程序的getStorage来实现异步本地储存。
小程序目录结构如下:
新建项目前,为了简化操作可直接右键新建目录,这样建出来的文件会直接写在app.json中,无需手动添加。
login.wxml代码:
!--pages/login/login.wxml--viewclass='container'formbindsubmit='submit'viewclass='row'text姓名:/textinputtype='text'name='userName'placeholder='请输入姓名'value='{{userName}}'//viewviewclass='row'text密码:/textinputtype='password'name='passWord'placeholder='请输入密码'value='{{passWord}}'//viewviewbuttonform-type='submit'type='primary'登陆/button/view/form/viewlogin.wxss样式:
/pages/login/login.wxss/.container{padding:1rem;font-size:0.9rem;line-height:1.5rem;border-shadow:1px1px#0099CC;}.row{display:flex;align-items:center;margin-bottom:0.8rem;}.rowtext{flex-grow:1;text-align:right;}.rowinput{font-size:0.7rem;color:#ccc;flex-grow:3;border:1pxsolid#0099CC;display:inline-block;border-radius:0.3rem;box-shadow:000.15rem#aaa;padding:0.3rem;}.rowbutton{padding:02rem;}重点login.js来了:
//pages/login/login.jsPage({/页面的初始数据/data:{userName:'',passWord:''},/生命周期函数--监听页面加载/onLoad:function(options){},/生命周期函数--监听页面初次渲染完成/onReady:function(){},/生命周期函数--监听页面显示/onShow:function(){},/生命周期函数--监听页面隐藏/onHide:function(){},/生命周期函数--监听页面卸载/onUnload:function(){},/页面相关事件处理函数--监听用户下拉动作/onPullDownRefresh:function(){},/页面上拉触底事件的处理函数/onReachBottom:function(){},/用户点击右上角分享/onShareAppMessage:function(){}})点击登陆时,触发submit函数,如下:
submit:function(e){console.log(e.detail.value);//表单数据varobjData=e.detail.value;if(objData.userName&&objData.passWord){//异步方式储存表单数据wx.setStorage({key:'userName',data:objData.userName,})wx.setStorage({key:'passWord',data:objData.passWord,})wx.navigateTo({url:'../detail/detail',})}},储存好数据后,下次再打开该页面,先判断是否含有数据,有就填充。
onLoad:function(options){varthat=thiswx.getStorage({key:'userName',success:function(res){that.setData({userName:res.data})},})wx.getStorage({key:'passWord',success:function(res){console.log(res.data)that.setData({passWord:res.data})},})},以上就是完整的表单登陆加储存。













