微信小程序入门《三》实例：简易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相关属性：

这里用到了bindsubmit ，用于处理提交的表单数据。

input 相关属性

button 相关属性

此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)

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)

实例四: 清除本地数据

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

wx.clearStorage()

wx.clearStorageSync()

直接执行即可实现。