微信小程序入门三: 简易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

相关属性：

event.detail = { value : {"name":"value"} , formId:"" }

bindsubmit

input

相关属性

text,number,idcard,digit,time,date

event.detail={value:value}

date/time

input

event.detail={value:value}

return

event.detail = {value:value}

event.detail = {value:value}

button

相关属性

default, mini

primary, default, warn

hover-class="none"

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

wx.setStorageSync(KEY,DATA)

wx.getStorageSync

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)

wx.getStorage(OBJECT)

res = {data: key对应的内容}

实例四: 清除本地数据

wx.clearStorage()

wx.clearStorageSync()