微信小程序表单提交php存储,微信小程序实现form表单本地储存数据

本文实例为大家分享了微信小程序实现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 })

},

})

},

以上就是完整的表单登陆加储存。

希望对大家的学习有所帮助，也希望大家多多支持脚本之家。