大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍微信小程序如何实现form表单本地储存数据,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联公司主营洛江网站建设的网络公司,主营网站建设方案,app软件定制开发,洛江h5成都小程序开发搭建,洛江网站营销推广欢迎洛江等地区企业咨询
微信小程序实现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.js Page({ /** * 页面的初始数据 */ 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 }) }, }) },
以上是“微信小程序如何实现form表单本地储存数据”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!