实例内容

• 登陆界面
• 处理登陆表单数据
• 处理登陆表单数据（异步）
• 清除本地数据
  

登录界面：

在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()

直接执行即可实现。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

# 微信小程序  # 本地存储  # Form  # 处理  # 微信小程序本地存储实现每日签到、连续签到功能  # 微信小程序本地存储增加有效期的方法  # 表单  # 输入框  # 有效值  # 回调  # 请输入  # 必填  # 这两个  # 设置为  # 完后  # 跳转到  # 默认值  # 加载  # 上了  # 就不  # 中有  # 会在  # 希望能  # 很简单  # 可以直接  # 写了 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何快速配置高效服务器建站软件？  非常酷的网站设计制作软件,酷培ai教育官方网站？  b2c电商网站制作流程,b2c水平综合的电商平台？  如何彻底卸载建站之星软件？  Laravel如何部署到服务器_线上部署Laravel项目的完整流程与步骤  Laravel如何安装Breeze扩展包_Laravel用户注册登录功能快速实现【流程】  网易LOFTER官网链接 老福特网页版登录地址  如何在万网主机上快速搭建网站？  如何在阿里云服务器自主搭建网站？  jQuery中的100个技巧汇总  JS碰撞运动实现方法详解  Android自定义listview布局实现上拉加载下拉刷新功能  在Oracle关闭情况下如何修改spfile的参数  Win11怎么修改DNS服务器 Win11设置DNS加速网络【指南】  Laravel如何使用软删除（Soft Deletes）功能_Eloquent软删除与数据恢复方法  网站制作价目表怎么做,珍爱网婚介费用多少？  如何在阿里云购买域名并搭建网站？  Laravel storage目录权限问题_Laravel文件写入权限设置  百度浏览器如何管理插件 百度浏览器插件管理方法  Laravel观察者模式如何使用_Laravel Model Observer配置  制作企业网站建设方案,怎样建设一个公司网站？  如何在阿里云ECS服务器部署织梦CMS网站？  iOS发送验证码倒计时应用  专业商城网站制作公司有哪些,pi商城官网是哪个？  如何挑选高效建站主机与优质域名？  昵图网官网入口 昵图网素材平台官方入口  智能起名网站制作软件有哪些,制作logo的软件？  网站页面设计需要考虑到这些问题  Laravel如何实现邮箱地址验证功能_Laravel邮件验证流程与配置  Laravel怎么导出Excel文件_Laravel Excel插件使用教程  如何快速辨别茅台真假？关键步骤解析  免费的流程图制作网站有哪些,2025年教师初级职称申报网上流程？  简历在线制作网站免费版,如何创建个人简历？  香港服务器租用每月最低只需15元？  Laravel广播系统如何实现实时通信_Laravel Reverb与WebSockets实战教程  Python数据仓库与ETL构建实战_Airflow调度流程详解  Laravel怎么设置路由分组Prefix_Laravel多级路由嵌套与命名空间隔离【步骤】  如何用搬瓦工VPS快速搭建个人网站？  WordPress 子目录安装中正确处理脚本路径的完整指南  如何自定义safari浏览器工具栏？个性化设置safari浏览器界面教程【技巧】  Laravel如何配置.env文件管理环境变量_Laravel环境变量使用与安全管理  高端建站三要素：定制模板、企业官网与响应式设计优化  瓜子二手车官方网站在线入口 瓜子二手车网页版官网通道入口  香港服务器网站生成指南：免费资源整合与高速稳定配置方案  Laravel Debugbar怎么安装_Laravel调试工具栏配置指南  Laravel中的withCount方法怎么高效统计关联模型数量  英语简历制作免费网站推荐,如何将简历翻译成英文？  高防服务器租用指南：配置选择与快速部署攻略  佐糖AI抠图怎样调整抠图精度_佐糖AI精度调整与放大细化操作【攻略】  小视频制作网站有哪些,有什么看国内小视频的网站，求推荐？