用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

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

天下雪 2017-1-11 00:32

作者:lecepin,来自授权地址实例内容登陆界面处理登陆表单数据处理登陆表单数据(异步)清除本地数据实例一: 登陆界面在app.json中添加登陆页面pages/login/login,并设置为入口。保存后,自动生成相关文件(挺方便 ...

作者:lecepin,来自授权地址

实例内容

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

实例一: 登陆界面

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

保存后,自动生成相关文件(挺方便的)。

修改视图文件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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

修改登陆样式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;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

看下样式:

form相关属性:

属性名类型说明
report-submitBoolean是否返回formId用于发送模板消息
bindsubmitEventHandle携带form中的数据触发submit事件,event.detail = { value : {"name":"value"} , formId:"" }
bindresetEventHandle表单重置时会触发reset事件

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

input 相关属性

属性名类型默认值说明
valueString输入框的内容
typeStringtextinput的类型,有效值:text,number,idcard,digit,time,date
passwordBooleanfalse是否是密码类型
placeholderString输入框为空时占位符
placeholder-styleString指定placeholder的样式
placeholder-classStringinput-placeholder指定placeholder的样式类
disabledBooleanfalse是否禁用
maxlengthNumber140最大输入长度,设置为0的时候不限制最大长度
auto-focusBooleanfalse自动聚焦,拉起键盘。页面中只能有一个input设置auto-focus属性
focusBooleanfalse使得input获取焦点
bindchangeEventHandle输入框失去焦点时,触发bindchange事件,event.detail={value:value}
bindinputEventHandle除了date/time类型外的输入框,当键盘输入时,触发input事件,event.detail={value:value},处理函数可以直接return一个字符串,将替换输入框的内容。
bindfocusEventHandle输入框聚焦时触发,event.detail = {value:value}
bindblurEventHandle输入框失去焦点时触发,event.detail = {value:value}

button 相关属性

属性名类型默认值说明
sizeStringdefault有效值default, mini
typeStringdefault按钮的样式类型,有效值primary, default, warn
plainBooleanfalse按钮是否镂空,背景色透明
disabledBooleanfalse是否禁用
loadingBooleanfalse名称前是否带 loading 图标
formTypeString有效值:submit, reset,用于form组件,点击分别会触发submit/reset事件
hover-classStringbutton-hover指定按钮按下去的样式类。当hover-class="none"时,没有点击态效果

此Demo中将buttonformType设置为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(){
    // 页面关闭
  }
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55

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

这两个方法,使用很简单,列下参数:

wx.setStorageSync(KEY,DATA)

属性名类型必填说明
keyString本地缓存中的指定的key
dataObject/String需要存储的内容

wx.getStorageSync

属性名类型必填说明
KEYString本地缓存中的指定的key

修改一下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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

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

效果(再一次运行后,自动填写上了信息):


实例三: 处理登陆表单数据(异步)

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

修改一下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(){
    // 页面关闭
  }
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64

wx.setStorage(OBJECT)

属性名类型必填说明
keyString本地缓存中的指定的 key
dataObject/String需要存储的内容
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

wx.getStorage(OBJECT)

属性名类型必填说明
keyString本地缓存中的指定的 key
successFunction接口调用的回调函数,res = {data: key对应的内容}
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

实例四: 清除本地数据

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

wx.clearStorage()

wx.clearStorageSync()

直接执行即可实现。


鲜花
鲜花 (2)
鸡蛋
鸡蛋

刚表态过的朋友 (2 人)

分享至 : QQ空间
收藏
原作者: lecepin 来自: 授权地址

相关阅读