介绍 & lt; !——页面/登录/login.wxml祝辞
& lt; view 类=& # 39;容器# 39;比;
,& lt; form bindsubmit=& # 39;提交# 39;比;
,& lt; view 类=& # 39;行# 39;比;
& lt;才能text>姓名:& lt;/text>
& lt;才能input 类型=& # 39;文本# 39;,name=& # 39;用户名# 39;,占位符=& # 39;请输入姓名& # 39;,价值=https://www.yisu.com/zixun/的{{userName}}/>
<视图类='行'>
<文本>密码:
<视图>
<按钮的表单类型='提交' type='主'>登陆> /*,页面/登录/login.wxss */.container {
,填充:1快速眼动;
,字体大小:0.9快速眼动;
,行高:1.5快速眼动;
,border-shadow: 1 px 1 px # 0099 cc的;
}
.row {
,显示:flex;
,对齐项目:中心;
,margin-bottom: 0.8快速眼动;
}
{.row 文本
,flex-grow: 1;
,text-align:正确的;
}
输入{.row
,字体大小:0.7快速眼动;
,颜色:# ccc;
,flex-grow: 3;
,边界:1 px solid # 0099 cc的;
,显示:inline-block;
,这个特性:0.3快速眼动;
,不必:0,0,0.15 rem # aaa级;
,填充:0.3快速眼动;
}
.row 按钮{
,填充:0,2眼动;
} //,/登录/login.js页面
页面({
,/* *
,*页面的初始数据
,*/,数据:{
,用户名:& # 39;& # 39;
,密码:& # 39;& # 39;
},/* *
,*生命周期函数——监听页面加载
,*/,onLoad: function (选项),{
,
},
,/* *
,*生命周期函数——监听页面初次渲染完成
,*/,onReady: function (), {
,
},
,/* *
,*生命周期函数——监听页面显示
,*/,昂秀:function (), {
,
},
,/* *
,*生命周期函数——监听页面隐藏
,*/,onHide: function (), {
,
},
,/* *
,*生命周期函数——监听页面卸载
,*/onUnload:大敌;function (), {
,
},
,/* *
,*页面相关事件处理函数——监听用户下拉动作
,*/,onPullDownRefresh: function (), {
,
},
,/* *
,*页面上拉触底事件的处理函数
,*/,onReachBottom: function (), {
,
},
,/* *
,*用户点击右上角分享
,*/,onShareAppMessage: function (), {
,
,}
}) 提交:函数(e) {
,console.log (e.detail.value);
,//表单数据
,var objData =, e.detail.value;
,if (objData.userName ,,, objData.passWord) {//异才能步方式储存表单数据
wx.setStorage({才能
,,关键:& # 39;用户名# 39;
,,数据:objData.userName,
})才能
wx.setStorage({才能
,,关键:& # 39;密码# 39;
,,数据:objData.passWord,
})才能
wx.navigateTo({才能
,,url: & # 39; . ./细节/细节# 39;
})才能
,}
,
}, onLoad:, function (选项),{
,var that =,
,wx.getStorage ({
,,关键:& # 39;用户名# 39;
,,成功:函数(res), {
that.setData才能({,用户名:res.data })
,,},
,})
,wx.getStorage ({
,,关键:& # 39;密码# 39;
,,成功:function (res), {
console.log才能(res.data)
that.setData才能({,密码:res.data })
,,},
,})
},
这篇文章主要介绍微信小程序如何实现形式表单本地储存数据,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
微信小程序实现形式表单本地储存数据的具体内容如下
效果图:
主要利用小程序的getStorage来实现异步本地储存。
小程序目录结构如下:
新建项目前,为了简化操作可直接右键新建目录,这样建出来的文件会直接写在app.json中,无需手动添加。
登录。wxml代码:
登录。wxs样式:
重点登录。js来了:
点击登陆时,触发提交函数,如下:
储存好数据后,下次再打开该页面,先判断是否含有数据,有就填充。
