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

这里使用到了wx.getStorageSyncwx.setStorageSync,这里说一下,上面这两个方法类似于HTML5的本地存储,属于同步存储方式。

这两个方法,使用很简单,列下参数:

wx.setStorageSync(KEY,DATA)

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

实例四: 清除本地数据

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

wx.clearStorage()

wx.clearStorageSync()

直接执行即可实现。

发表评论

电子邮件地址不会被公开。 必填项已用*标注