微信小程序入门《三》实例:简易form、本地存储
实例内容
- 登陆界面
- 处理登陆表单数据
- 处理登陆表单数据(异步)
- 清除本地数据
实例一: 登陆界面
在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 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- centos yum更新及删除多余启动项
- React进阶(1)-理解Redux
- MySQL死锁系列-线上死锁问题排查思路
- # 3分钟短文:Laravel路由注册,你必须掌握的“动词”!
- 资深程序员带你解锁Android性能优化五大误区和两大疑点!(附333页性能优化PDF宝典)
- Android大三提前批的钉钉和抖音面筋,阿里挂了HR面,抖音通过收获Offer
- leetcode之键盘行
- 浅析centos 7 自带的 php 5.4升级为 5.6的方法
- Linux内核设备驱动地址映射笔记整理
- Linux中的who命令实例介绍
- Linux十个新手命令分享
- Linux 内核通用链表学习小结
- 从零开始针对 .NET 应用的 DevOps 运营实践 - 运行环境搭建
- 面试问我,创建多少个线程合适?我该怎么说
- C语言链表实例--玩转链表