搜索
首页微信小程序小程序开发微信小程序 本地存储及登录页面处理实例详解

实例内容

 登陆界面
 处理登陆表单数据
 处理登陆表单数据(异步)
 清除本地数据
登录界面:

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相关属性:




属性名 类型 说明
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:&#39;&#39;,
  userPassword:&#39;&#39;,
 },

 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(&#39;userName&#39;, objData.userName);
   wx.setStorageSync(&#39;userPassword&#39;, objData.userPassword);

   //跳转到成功页面
   wx.navigateTo({
    url: &#39;../index/index&#39;
   })
  }
 },

 //加载完后,处理事件 
 // 如果有本地数据,则直接显示
 onLoad:function(options){
  //获取本地数据
  var userName = wx.getStorageSync(&#39;userName&#39;);
  var userPassword = wx.getStorageSync(&#39;userPassword&#39;);

  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)





属性名 类型 必填 说明
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>

这个小实例,会在登陆的时候,将登陆信息存到本地存储,当下次登陆时,如果本地存储中有相应信息,则直接填写上。
效果(再一次运行后,自动填写上了信息):

微信小程序 本地存储及登录页面处理实例详解
实例三: 处理登陆表单数据(异步)
这里采用异步的方式存放数据。
修改一下

login.js
// pages/login/login.js
Page({
 data:{
  userName:&#39;&#39;,
  userPassword:&#39;&#39;,
 },

 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:&#39;userName&#39;, 
    data:objData.userName
   });
   wx.setStorage({
    key:&#39;userPassword&#39;, 
    data:objData.userPassword
   });

   //跳转到成功页面
   wx.navigateTo({
    url: &#39;../index/index&#39;
   })
  }
 },

 //加载完后,处理事件 
 // 如果有本地数据,则直接显示
 onLoad:function(options){
  var that = this;
  //获取本地数据
  wx.getStorage({
   key: &#39;userName&#39;,
   success: function(res){
    console.log(res.data);
    that.setData({userName: res.data});
   }
  });
  wx.getStorage({
   key: &#39;userPassword&#39;,
   success: function(res){
    console.log(res.data);
    that.setData({userPassword: res.data});
   }
  });
 },
 onReady:function(){
  // 页面渲染完成
 },
 onShow:function(){
  // 页面显示
 },
 onHide:function(){
  // 页面隐藏
 },
 onUnload:function(){
  // 页面关闭
 }
})

wx.setStorage(OBJECT)




属性名类型必填说明keyString是本地缓存中的指定的 keydataObject/String是需要存储的内容successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)wx.getStorage(OBJECT)





属性名 类型 必填 说明
key String 本地缓存中的指定的 key
success Function 接口调用的回调函数,res = {data: key对应的内容}
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

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

wx.clearStorage()
wx.clearStorageSync()

直接执行即可实现。
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

您可能感兴趣的文章:

微信小程序(应用号)简单实例应用及实例详解
微信小程序 实战小程序实例
微信小程序 for 循环详解
微信小程序 WXML、WXSS 和JS介绍及详解
微信小程序 数据访问实例详解
微信小程序 参数传递详解
微信小程序 wx:key详细介绍
微信小程序 (十七)input 组件详细介绍
微信小程序 实现列表刷新的实例详解
微信小程序 (三)tabBar底部导航详细介绍
微信小程序 获取微信OpenId详解及实例代码

以上是微信小程序 本地存储及登录页面处理实例详解 的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
微信小程序架构原理基础详解微信小程序架构原理基础详解Oct 11, 2022 pm 02:13 PM

本篇文章给大家带来了关于微信小程序的相关问题,其中主要介绍了关于基础架构原理的相关内容,其中包括了宿主环境、执行环境、小程序整体架构、运行机制、更新机制、数据通信机制等等内容,下面一起来看一下,希望对大家有帮助。

微信小程序云服务配置详解微信小程序云服务配置详解May 27, 2022 am 11:53 AM

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于云服务的配置详解,包括了创建使用云开发项目、搭建云环境、测试云服务等等内容,下面一起来看一下,希望对大家有帮助。

微信小程序常用API(总结分享)微信小程序常用API(总结分享)Dec 01, 2022 pm 04:08 PM

本篇文章给大家带来了关于微信小程序的相关知识,其中主要总结了一些常用的API,下面一起来看一下,希望对大家有帮助。

浅析微信小程序中自定义组件的方法浅析微信小程序中自定义组件的方法Mar 25, 2022 am 11:33 AM

微信小程序中怎么自定义组件?下面本篇文章给大家介绍一下微信小程序中自定义组件的方法,希望对大家有所帮助!

微信小程序实战项目之富文本编辑器实现微信小程序实战项目之富文本编辑器实现Oct 08, 2022 pm 05:51 PM

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于富文本编辑器的实战示例,包括了创建发布页面、实现基本布局、实现编辑区操作栏的功能等内容,下面一起来看一下,希望对大家有帮助。

西安坐地铁用什么小程序西安坐地铁用什么小程序Nov 17, 2022 am 11:37 AM

西安坐地铁用的小程序为“乘车码”。使用方法:1、打开手机微信客户端,点击“发现”中的“小程序”;2、在搜索栏中输入“乘车码”进行搜索;3、直接定位城市西安,或者搜索西安,点击“西安地铁乘车码”选项的“去乘车”按钮;4、根据腾讯官方提示进行授权,开通“乘车码”业务即可利用该小程序提供的二维码来支付乘车了。

微信小程序开发工具介绍微信小程序开发工具介绍Oct 08, 2022 pm 04:47 PM

本篇文章给大家带来了关于微信小程序的相关问题,其中主要介绍了关于开发工具介绍的相关内容,包括了下载开发工具以及编辑器总结等内容,下面一起来看一下,希望对大家有帮助。

简单介绍:实现小程序授权登录功能简单介绍:实现小程序授权登录功能Nov 07, 2022 pm 05:32 PM

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了怎么实现小程序授权登录功能的相关内容,下面一起来看一下,希望对大家有帮助。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境