微信小程序> 微信小程序简单的form表单本地储存数据

微信小程序简单的form表单本地储存数据

浏览量:3009 时间: 来源:田野的嘴好冰

效果图:小程序

主要利用小程序的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.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 })      },    })  },
以上就是完整的表单登陆加储存。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎