微信小程序入门《三》实例：简易form、本地存储

作者：lecepin，来自授权地址

实例内容

• 登陆界面
• 处理登陆表单数据
• 处理登陆表单数据（异步）
• 清除本地数据

实例一: 登陆界面

在app.json中添加登陆页面pages/login/login，并设置为入口。

a758dbb909e482fce29ce9514f24c515.jpg (43.62 KB, 下载次数: 43)

下载附件

2017-8-27 11:40 上传

保存后，自动生成相关文件（挺方便的）。

c52f9b10ec1b8e2b7d9e1547946e08a4.jpg (31.92 KB, 下载次数: 49)

下载附件

2017-8-27 11:40 上传

修改视图文件login.wxml

<!--pages/login/login.wxml-->
<view class="container">
    <form bindsubmit="formSubmit">
        <view class="row">
            <text>姓 名：</text>
            <input type="text" name="userName" placeholder="请输入用户名" />
        </view>
        <view class="row">
            <text>密 码：</text>
            <input type="password" name="userPassword" placeholder="请输入密码" />
        </view>
        <view class="row">
            <button type="primary" form-type="submit">登陆</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;
}

看下样式：

9a56bb8796544286e70c4232579afeb3.jpg (22.4 KB, 下载次数: 47)

下载附件

2017-8-27 11:40 上传

form相关属性：

这里用到了bindsubmit ，用于处理提交的表单数据。

input 相关属性

button 相关属性

此Demo中将button的formType设置为submit用于激活表单提交事件。

实例二: 处理登陆表单数据

修改login.js

// pages/login/login.js
Page({
  data:{
    userName:'',
    userPassword:'',
  },
  formSubmit:function(e){
    console.log(e.detail.value);//格式 Object {userName: "user", userPassword: "password"}
    //获得表单数据
    var objData = e.detail.value;
    if(objData.userName && objData.userPassword){
      // 同步方式存储表单数据
      wx.setStorageSync('userName', objData.userName);
      wx.setStorageSync('userPassword', objData.userPassword);
      //跳转到成功页面
      wx.navigateTo({
        url: '../index/index'
      })
    }
  },
  //加载完后，处理事件 
  // 如果有本地数据，则直接显示
  onLoad:function(options){
    //获取本地数据
    var userName = wx.getStorageSync('userName');
    var userPassword = wx.getStorageSync('userPassword');
    console.log(userName);
    console.log(userPassword);
    if(userName){
      this.setData({userName: userName});
    }
    if(userPassword){
      this.setData({userPassword: userPassword});
    }
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

这里使用到了wx.getStorageSync和wx.setStorageSync，这里说一下，上面这两个方法类似于HTML5的本地存储，属于同步存储方式。

这两个方法，使用很简单，列下参数：

wx.setStorageSync(KEY,DATA)

wx.getStorageSync

修改一下login.wxml

<view class="row">
    <text>姓 名：</text>
    <input type="text" name="userName" placeholder="请输入用户名" value="{{userName}}" />
</view>
<view class="row">
    <text>密 码：</text>
    <input type="password" name="userPassword" placeholder="请输入密码" value="{{userPassword}}" />
</view>

这个小实例，会在登陆的时候，将登陆信息存到本地存储，当下次登陆时，如果本地存储中有相应信息，则直接填写上。

效果（再一次运行后，自动填写上了信息）：

51f5059eccd67cbfa393370f6dc05365.gif (828.84 KB, 下载次数: 59)

下载附件

2017-8-27 11:40 上传

实例三: 处理登陆表单数据（异步）

这里采用异步的方式存放数据。

修改一下login.js

// pages/login/login.js
Page({
  data:{
    userName:'',
    userPassword:'',
  },
  formSubmit:function(e){
    console.log(e.detail.value);//格式 Object {userName: "user", userPassword: "password"}
    //获得表单数据
    var objData = e.detail.value;
    if(objData.userName && objData.userPassword){
      // 同步方式存储表单数据
      wx.setStorage({
        key:'userName', 
        data:objData.userName
      });
      wx.setStorage({
        key:'userPassword', 
        data:objData.userPassword
      });
      //跳转到成功页面
      wx.navigateTo({
        url: '../index/index'
      })
    }
  },
  //加载完后，处理事件 
  // 如果有本地数据，则直接显示
  onLoad:function(options){
    var that = this;
    //获取本地数据
    wx.getStorage({
      key: 'userName',
      success: function(res){
        console.log(res.data);
        that.setData({userName: res.data});
      }
    });
    wx.getStorage({
      key: 'userPassword',
      success: function(res){
        console.log(res.data);
        that.setData({userPassword: res.data});
      }
    });
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

wx.setStorage(OBJECT)

wx.getStorage(OBJECT)

实例四: 清除本地数据

这里就不详细写了，直接介绍一下这两个清除本地数据的方法。

wx.clearStorage()

wx.clearStorageSync()

直接执行即可实现。

4363358f75807ddf18477dd29d789200.png (16.53 KB, 下载次数: 60)

下载附件

2017-8-27 11:40 上传