这篇文章主要介绍微信小程序如何实现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: #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表单本地储存数据”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。