WeChat 애플릿 로컬 저장 및 로그인 페이지 처리 예시에 대한 자세한 설명

인스턴스 콘텐츠

로그인 인터페이스
로그인 양식 데이터 처리
로그인 양식 데이터 처리(비동기)
로컬 데이터 지우기
로그인 인터페이스:

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;
}

스타일 보기:

양식 관련 속성:

属性名	类型	说明
report-submit	Boolean	是否返回formId用于发送模板消息
bindsubmit	EventHandle	携带form中的数据触发submit事件，event.detail = { value : {"name":"value"} , formId:"" }
bindreset	EventHandle	表单重置时会触发reset事件

th>

속성 이름

유형

설명

보고서 제출

부울

템플릿 메시지 전송 시 formId가 반환되는지 여부

bindsubmit

EventHandle

양식에 데이터를 전달하면 제출 이벤트인 event.detail = { value : {"name":"value"} , formId:"" }

가 트리거됩니다. findreset

EventHandle

양식이 재설정되면 재설정 이벤트가 트리거됩니다.

bindsubmit이 여기서 사용됩니다. 제출된 양식 데이터를 처리합니다.
입력 관련 속성

属性名	类型	默认值	说明
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}

td>

th>

속성 이름

유형

기본값 값

설명

값

문자열

属性名	类型	默认值	说明
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"时，没有点击态效果

입력 상자 내용

type

String

text

입력 유형, 유효한 값 : 텍스트, 숫자, ID 카드, 숫자, 시간, 날짜

비밀번호

부울

false

비밀번호인지 여부 유형

placeholder

String

입력 시 자리 표시자 상자가 비어 있습니다.

placeholder-style

String

placeholder 스타일을 지정하세요

placeholder-class

String

input-placeholder

placeholder의 스타일 클래스 지정

disabled

Boolean

false

비활성화 여부

maxlength

숫자

140

최대 입력 길이, 0으로 설정하면 최대 길이에 제한이 없습니다

자동 초점

부울

false

자동으로 초점을 맞추고 키보드를 당깁니다. 페이지에는 자동 초점 속성을 설정하는 입력이 하나만 있을 수 있습니다

focus

Boolean

false

입력 게인 포커스

bindchange

EventHandle

입력 상자가 포커스를 잃음, 바인딩 변경 이벤트 트리거, event.detail={value:value}

bindinput

EventHandle

날짜/시간 형식의 입력란을 제외하고, 키보드 입력이 발생하면 입력 이벤트가 발생하고, event.detail={value:value}이며, 처리 함수에서 직접 문자열을 반환할 수 있으며, 이는 입력 상자의 내용을 대체합니다.

bindfocus

EventHandle

입력 상자에 포커스가 있을 때 트리거되는 이벤트입니다. Detail = {value:value}

bindblur

EventHandle

입력 시 상자가 포커스를 잃음 Trigger, event.detail = {value:value}

버튼 관련 속성이름 앞에 로딩 아이콘이 있는지 여부

			th>
속성 이름	유형	기본값	설명
크기	문자열	기본값	유효한 값 ​​기본값, 미니
유형	문자열	기본값	버튼 스타일 유형, 유효한 값 기본, 기본값, 경고
plain	Boolean	false	버튼이 비어 있고 배경색이 투명한지 여부
disabled	부울	false	비활성화 여부
로드	부울	false
formType	String	없음	유효한 값: 제출, 재설정, 양식 구성 요소에 사용됩니다. 클릭하면 제출/재설정 이벤트가 트리거됩니다.
hover-class td>	String	button- hover	누른 버튼의 스타일 클래스를 지정합니다. hover-class="none"이면 클릭 효과가 없습니다

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

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

属性名类型必填说明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详解及实例代码

위 내용은 WeChat 애플릿 로컬 저장 및 로그인 페이지 처리 예시에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!