微信小程序实现form表单本地储存数据
网络编程 2021-07-04 15:51www.168986.cn编程入门
这篇文章主要为大家详细介绍了微信小程序实现form表单本地储存数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现form表单本地储存数据的具体代码,供大家参考,具体内容如下
效果图
主要利用小程序的getStorage来实现异步本地储存。
小程序目录结构如下
新建项目前,为了简化操作可直接右键新建目录,这样建出来的文件会直接写在app.json中,无需手动添加。
login.wxml代码
<!--pages/login/login.wxml--> <view class='container'> <form bindsubmit='submit'> <view class='row'> <text>姓名:</text> <input type='text' name='userName' placeholder='请输入姓名' value='{{userName}}'/> </view> <view class='row'> <text>密码:</text> <input type='password' name='passWord' placeholder='请输入密码' value='{{passWord}}'/> </view> <view> <button form-type='submit' type='primary'>登陆</button> </view> </form> </view>
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: #c; 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', suess: function(res) { that.setData({ userName: res.data }) }, }) wx.getStorage({ key: 'passWord', suess: function (res) { console.log(res.data) that.setData({ passWord: res.data }) }, }) },
以上就是完整的表单登陆加储存。
希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程