微信小程序入门一: 简易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>
- 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
看下样式:
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(){
// 页面关闭
}
})
- 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.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>
- 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
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()
直接执行即可实现。
微信小程序入门一: 简易form、本地存储的更多相关文章
- 微信小程序入门学习-- 简易Demo:计算器
简单学习下微信小程序 官网 简易教程 · 小程序 https://mp.weixin.qq.com/debug/wxadoc/dev/ 需要通过开发者工具,来完成小程序创建和代码编辑. 下载安装,运行 ...
- 微信小程序 - Request | 路由跳转 | 本地存储
Request 官方文档 wx.request相当于发送ajax请求 参数 属性 类型 默认值 必填 说明 url string 是 开发者服务器接口地址 data string/object/A ...
- 天河微信小程序入门《四》:融会贯通,form表单提交数据库
天河在阔别了十几天之后终于又回来了.其实这篇文章里的demo是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数 ...
- 微信小程序入门案例
本文通过具体的实例记录微信小程序的入门知识. 1.特点 不需要安装 依赖微信应用 更接近原生APP 丰富的框架及API可达到快速开发的目的 2.工具使用 在开发的过程中可以使用微信开发者工具,更加直观 ...
- 微信小程序入门文档
一 基本介绍 微信专门为小程序开发了一个ide叫做微信开发者工具 最新一版的微信开发者工具,把微信公众号的调试开发工作也集成了进去,可以更换开发模式. https://mp.weixin.qq.com ...
- 微信小程序入门与实战 常用组件API开发技巧项目实战*全
第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...
- 微信小程序入门与实战 从0到1进行细致讲解 涵盖小程序开发核心技能下载
第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...
- 微信小程序入门与实战(最新完整版)教程
微信小程序入门与实战(最新完整版) 如图地址:下载地址在底部 |- 第1章 什么是微信小程序? - 0 B |- 第2章 小程序环境搭建与开发工具介绍 - 0 B |- 第3章 从一个简单的“欢迎“页 ...
- 微信小程序入门基础
微信小程序入门基础 视频教程(https://edu.csdn.net/course/detail/8456?pre_view=1) 第一章.认识小程序 1.工具的下载与安装 2.小程序代码构成 ...
随机推荐
- Noip前的大抱佛脚----数据结构
目录 数据结构 知识点及其应用 线段树 神奇标记 标记不下放 并查集 维护二分图 维护后继位置 堆 可并堆的可持久化 dsu on tree 方式&原理 适用范围 单调队列 尺取合法区间 模板 ...
- IDEA/Git 设置多个push远程仓库或者同时提交多个push仓库
注:写在最上面的这个提交地址将会是唯一的pull地址 具体解决办法: 在隐藏文件.git 下有个config文件,打开,在最后一行添加以下信息 [remote "all"] url ...
- 我们一起来聊聊并发吧,one。
引言 最近工作当中写了一个有关并发的程序,引起了LZ对并发的强烈兴趣.这一下一发不可收拾,LZ用了一个多星期,看完了这本共280+页的并发编程书.之所以能看这么快,其实这主要归功于,自己之前对并发就有 ...
- Winfrom Panel Scroll End 的实现
场景:在一个panel里面有非常多的自定义绘制的控件,在拖拉滚动条的时候,控件的画面上有残影 不知道大家遇到过这种情况没,一直做web的winform经验太少,有更好的解决办法请贡献 首先放出我的解决 ...
- 腾讯云服务器linux Ubuntu操作系统搭建ftp服务器vsftpd
腾讯云服务器linux Ubuntu操作系统安装ftp服务器vsftpd 操作系统: Ubuntu Server 16.04.1 LTS 64位 下面我将系统重装, 一步一步从头开始,安装FTP服务器 ...
- CAN总线波形中ACK位电平为什么会偏高?
摘要:如果CAN总线中有多个节点,在某一点测试CAN总线的波形(CANH和CANL之间)时,会发现在一帧数据的末尾ACK位的差分电平会偏高.网上有关于此问题的一些描述和解释,但孔丙火(微信公众号:孔丙 ...
- Hbase基本用法
hbase 一些重要的解释(杂) 访问habse三种方式 访问hbase table中的行,只有三种方式: 1 通过单个row key访问 2 通过row key的range 3 全表扫描 Row k ...
- 报错android.view.InflateException: Binary XML file line #11: Attempt to invoke virtual method 'boolean
出现这种问题,打开Android monitor的调试信息发现是 android.view.InflateException: Binary XML file line #11: Attempt to ...
- 简单安装与使用虚拟环境virtualenv
安装虚拟环境的命令如下: sudo pip install virtualenv sudo pip install virtualenvwrapper 创建虚拟环境的命令如下: mkvirtualen ...
- R软件中 文本分析安装包 Rjava 和 Rwordseg 傻瓜式安装方法四部曲
这两天,由于要做一个文本分析的内容,所以搜索了一天R语言中的可以做文本分析的加载包,但是在安装包的过程,真是被虐千百遍,总是安装不成功.特此专门写一篇博文,把整个心塞史畅快的释放一下. ------- ...