微信小程序实现form表单本地储存数据
微信(小程序)  /  管理员 发布于 3年前   182
本文实例为大家分享了微信小程序实现form表单本地储存数据的具体代码,供大家参考,具体内容如下
效果图:
主要利用小程序的getStorage来实现异步本地储存。
小程序目录结构如下:
新建项目前,为了简化操作可直接右键新建目录,这样建出来的文件会直接写在app.json中,无需手动添加。
login.wxml代码:
login.wxss样式:
/* pages/login/login.wxss */.container{ padding: 1rem; font-size: 0.9rem; line-height: 1.5rem; border-shadow: 1px 1px #0099CC;}.row{ display: flex; align-items: center; margin-bottom: 0.8rem;}.row text{ flex-grow: 1; text-align: right;}.row input{ font-size: 0.7rem; color: #ccc; flex-grow: 3; border: 1px solid #0099CC; display: inline-block; border-radius: 0.3rem; box-shadow: 0 0 0.15rem #aaa; padding: 0.3rem;}.row button{ padding: 0 2rem;}
重点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); //表单数据 var objData = 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) { var that = this wx.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 }) }, }) },
以上就是完整的表单登陆加储存。
希望对大家的学习有所帮助,也希望大家多多支持。
博主 在
2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..xiaoB 在
2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..BUG4 在
你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..博主 在
go语言+beego框架中获取get,post请求的所有参数中评论 @ t1 直接在router.go文件中配就ok..Jade 在
如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号