微信小程序 本地存储及登录页面处理实例详解


Posted in Javascript onJanuary 11, 2017

实例内容

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

登录界面:

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>

修改登陆样式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;
}

看下样式:

微信小程序 本地存储及登录页面处理实例详解

form相关属性:

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

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

input 相关属性

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

button 相关属性

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

此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)

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

wx.getStorageSync

属性名 类型 必填 说明
KEY String 本地缓存中的指定的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>

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

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

微信小程序 本地存储及登录页面处理实例详解

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

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

修改一下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)

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

wx.getStorage(OBJECT)

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

实例四: 清除本地数据

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

wx.clearStorage()

wx.clearStorageSync()

直接执行即可实现。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
js遍历子节点子元素附属性及方法
Aug 19 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
js仿iphone秒表功能 计算平均数
Jan 11 #Javascript
jQuery实现限制文本框的输入长度
Jan 11 #Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 #Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 #Javascript
Angularjs中使用layDate日期控件示例
Jan 11 #Javascript
web打印小结
Jan 11 #Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 #Javascript
You might like
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
jQuery JSON的解析方式分享
2011/04/05 Javascript
javascript工具库代码
2012/03/29 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
Jquery性能优化详解
2014/05/15 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
布同 统计英文单词的个数的python代码
2011/03/13 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
python文件及目录操作代码汇总
2020/07/08 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
Weblogc domain问题
2014/01/27 面试题
金智子午JAVA面试题
2015/09/04 面试题
网络编辑职责
2014/03/01 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
国际金融专业自荐信
2014/07/05 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
教你使用Python获取QQ音乐某个歌手的歌单
2022/04/03 Python