微信小程序简单的form表单本地储存数据-小程序多页表单-小程序表单制作-即速应用

微信小程序简单的form表单本地储存数据-小程序多页表单-小程序表单制作

浏览量：2475 时间：2020-04-01 来源：田野的嘴好冰

效果图：
1.主要利用小程序的getStorage来实现异步本地储存。
2.小程序目录结构如下：
新建项目前，为了简化操作可直接右键新建目录，这样建出来的文件会直接写在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/view
3.login.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;}
4.重点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(){}})
5.点击登陆时，触发submit函数，如下：
submit:function(e){console.log(e.detail.value);//表单数据varobjData=e.detail.value;if(objData.userNameobjData.passWord){//异步方式储存表单数据wx.setStorage({key:'userName',data:objData.userName,})wx.setStorage({key:'passWord',data:objData.passWord,})wx.navigateTo({url:'../detail/detail',})}},
6.储存好数据后，下次再打开该页面，先判断是否含有数据，有就填充。
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})},})},以上就是完整的表单登陆加储存。