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

原创 2018年04月17日 15:38:15

效果图:

主要利用小程序的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 })
      },
    })
  },
以上就是完整的表单登陆加储存。
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/baidu_35377957/article/details/79975598

微信小程序 本地多个存储数据

错误写法如图:虽然在调试工具里可以看到数据显示,但在手机上看不到 正确要分开写,如下图:...
  • qq_28129039
  • qq_28129039
  • 2018-01-30 11:16:49
  • 653

微信小程序入门三: 简易form、本地存储

实例内容实例一: 登陆界面在app.json中添加登陆页面pages/login/login,并设置为入口。保存后,自动生成相关文件(挺方便的)。修改视图文件login.wxml ...
  • lecepin
  • lecepin
  • 2017-01-10 21:13:02
  • 20365

微信小程序数据存储与取值

在小程序开发的过程,经常要需要这个页面输入的数据,在下一个页面中进行取值赋值。比如:在A页面input输入框,输入电话号码,点击添加。需要在B页面电话区域中,显示刚刚输入的电话号码。...
  • KoalaShane
  • KoalaShane
  • 2016-12-09 16:11:39
  • 16144

微信小程序例子——使用form表单获取输入框数据

  • 2016年11月07日 16:08
  • 105KB
  • 下载

【微信小程序】小程序读取本地数据

一般情况下,小程序的utils这个文件夹下,我们可以把本地的数据写进去,封装成.js文件,提供对外暴露的接口,然后读取本地数据。如果涉及到一些针对这些数据的处理方法,也可以把方法写好,封装到.js文件...
  • u014755255
  • u014755255
  • 2017-04-26 14:37:02
  • 6439

微信小程序开发之数据存储 参数传递 数据缓存

微信小程序开发内测一个月.数据传递的方式很少.经常遇到页面销毁后回传参数的问题,小程序中并没有类似Android的startActivityForResult的方法,也没有类似广播这样的通讯方式,更没...
  • qq_31383345
  • qq_31383345
  • 2016-11-02 10:24:31
  • 20222

微信小程序中form 表单提交和取值实例详解

我们知道,如果我们直接给 input 添加 bindinput,比如:,那么可以在 onUsernameInput 中直接使用 e.detail.value,即: onUsernameInput :...
  • It_BeeCoder
  • It_BeeCoder
  • 2017-06-24 21:36:37
  • 3299

从本地JSON文件中读取数据

  • u014358913
  • u014358913
  • 2015-08-12 16:32:32
  • 3125

小程序 —— 提交表单清除数据功能的实现

前言 想必许多学习过网页前端的同学都曾经在html中实现过提交表单后自动清除表单数据的功能,然而这在我们小程序开发过程中却是一个比较难的事情了。这里就记录一个模拟此功能的方法,供大家参考。 实现方...
  • csu_passer
  • csu_passer
  • 2017-08-17 16:40:29
  • 2791

微信小程序:全局变量和本地存储什么时候用那个

本篇仅仅算是个人总结,,,相信还有更好的方法 1.本地存储(小程序中的本地存储有同步的) 用户信息、账号(用户登录后的一些基本信息) 2.全局变量 一些可能涉及安全类的 【例】:资源类的,每...
  • qq_28765817
  • qq_28765817
  • 2017-09-08 17:03:33
  • 716
收藏助手
不良信息举报
您举报文章:微信小程序简单的form表单本地储存数据
举报原因:
原因补充:

(最多只允许输入30个字)