微信小程序入门三: 简易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()
直接执行即可实现。
博客名称:王乐平博客
博客地址:http://blog.lepingde.com
CSDN博客地址:http://blog.csdn.net/lecepin
微信小程序入门三: 简易form、本地存储相关推荐
- 微信小程序入门三之Flex布局
?遇到的问题 1.tabBar切换,改变导航条的标题 在页面的.json里面编写,注意在根节点写,不要画蛇添足加windows节点!! {"navigationBarTitleText&qu ...
- 微信小程序入门三:轮播图
使用swiper组件,该组件的属性类型以以及功能见下表. 属性名 类型 默认值 说明 最低版本 indicator-dots Boolean false 是否显示面板指示点 indicator-c ...
- 天河微信小程序入门《四》:融会贯通,form表单提交数据库
天河在阔别了十几天之后终于又回来了.其实这篇文章里的demo是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数 ...
- 【微信小程序】微信小程序入门与实战-个人笔记
微信小程序入门与实战 文章目录 微信小程序入门与实战 1 初识微信小程序 1-1 2020版重录说明 1-2 下载小程序开发工具 1-3 新建小程序项目 1-4 小程序appid的注册 1-5 新版小 ...
- 做一个微信小程序给TA——程序猿小白的情人节礼物(微信小程序入门——一文学会小程序开发到发布小程序的全过程)
# 情人节 可送给女朋友 的礼物,或者作为两人的纪念 # 效果展示:微信搜索 "王美美与曾小帅" 小程序即可查看效果 # 微信小程序入门--使用免费后端云(Bmod)搭建留言板 ...
- 微信小程序入门与实战(七月)
微信小程序入门与实战(七月) 第1章 初识微信小程序 第2章 小程序的基本目录结构与文件作用剖析 2-1 小程序页面的4种基本文件类型详解 第3章 rpx响应式单位与flex布局 3-3 新建页面的技 ...
- 微信小程序入门---01
目录 微信小程序入门 一.小程序简介 二.第一个小程序 二.小程序代码的构成 三.WXML模块 四.WXSS 样式 五.JS 逻辑交互 六.组件 七.API 八.WXML 模板语法 - 数据绑定 九. ...
- 微信小程序入门之常用组件(04)
常见组件 重点讲解微信小程序中常见的布局组件 view,text,rich-text,button,image,navigator,icon,swiper, radio,checkbox 等 一.vi ...
- 微信小程序入门七登录注册
上一章介绍了 微信小程序入门六本地缓存和搜索 ,这章介绍小程序的登录注册页面.主要有表单的验证,错误信息的提示,form表单的取值,get / post 请求 ,反馈交互提示框,页面跳转 以及 页面U ...
最新文章
- 使用Netty如何做到单机秒级接收35万个对象
- vlc打开h264参数配置
- html js定义json对象,javascript中的json及对象
- laravel 文件上传
- Activiti操作数据库中文乱码
- jetty 添加basic auth
- Linux-sudo详解
- 融合Thread网路协议 ZigBee新版规范Q3出笼
- SpringBoot2 | Spring IOC 流程中核心扩展接口的12个扩展点源码分析(十一)
- Asp.Net MVC中DropDownListFor的用法(转)
- Thinkphp3.2.3的主从分离事务问题(坑!!!)
- 古典密码算法 java_古典密码算法的实现
- STM32F103 驱动DS18B20
- 【JAVA】每日练习——02
- 音视频技术开发周刊 | 243
- 微信公众号发布图文消息次数达到上限
- 收藏 一句话问答 linux
- Java面试题合集(1)
- web微信js WechatWeb js方法
- js方法ajax return,AJAX_PJBLOG中用到的ajaxjs.几个简单的函数,function $(id) { return document.get - phpStudy...
热门文章
- 【笔记】iOS开发基础笔记二
- 从源代码角度看Struts2返回JSON数据的原理
- 全国80几所重点大学ftp资源库(经常逛逛可能有惊喜哦)很难收集的,知道其他的友友可以留言完善...
- python tip
- 我们应当学会辞旧迎新——《不一样的天空》
- 向量积判断优劣弧_判断经验论文优劣的10条诫命
- r a/b 测试_R中的A / B测试
- pandas基础操作
- 朴素贝叶斯实现分类_关于朴素贝叶斯分类及其实现的简短教程
- 简述yolo1-yolo3_使用YOLO框架进行对象检测的综合指南-第一部分