微信小程序简单的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 })
      },
    })
  },
以上就是完整的表单登陆加储存。
  • 8
    点赞
  • 50
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值