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

巴扎黑
풀어 주다: 2018-05-15 14:26:55
원래의
13517명이 탐색했습니다.

인스턴스 콘텐츠

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

app.json
로그인 후 복사

에 랜딩페이지

pages/login/login
로그인 후 복사

를 추가하고 입구로 설정하세요.
WeChat 애플릿 로컬 저장 및 로그인 페이지 처리 예시에 대한 자세한 설명
저장 후 관련 파일이 자동으로 생성됩니다(매우 편리함).
WeChat 애플릿 로컬 저장 및 로그인 페이지 처리 예시에 대한 자세한 설명
보기 파일 수정

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;
}
로그인 후 복사

스타일 보기:
WeChat 애플릿 로컬 저장 및 로그인 페이지 처리 예시에 대한 자세한 설명
양식 관련 속성:




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


속성 이름유형설명
보고서 제출 부울템플릿 메시지 전송 시 formId가 반환되는지 여부
bindsubmitEventHandle 양식에 데이터를 전달하면 제출 이벤트인 event.detail = { value : {"name":"value"} , formId:"" }
가 트리거됩니다. findreset EventHandle양식이 재설정되면 재설정 이벤트가 트리거됩니다.
bindsubmit이 여기서 사용됩니다. 제출된 양식 데이터를 처리합니다.
입력 관련 속성





属性名类型默认值说明
valueString
输入框的内容
typeStringtextinput的类型,有效值:text,number,idcard,digit,time,date
passwordBooleanfalse是否是密码类型
placeholderString
输入框为空时占位符
placeholder-styleString
指定placeholder的样式
placeholder-classStringinput-placeholder指定placeholder的样式类
disabledBooleanfalse是否禁用
maxlengthNumber140最大输入长度,设置为0的时候不限制最大长度
auto-focusBooleanfalse自动聚焦,拉起键盘。页面中只能有一个input设置auto-focus属性
focusBooleanfalse使得input获取焦点
bindchangeEventHandle
输入框失去焦点时,触发bindchange事件,event.detail={value:value}
bindinputEventHandle
除了date/time类型外的输入框,当键盘输入时,触发input事件,event.detail={value:value},处理函数可以直接return一个字符串,将替换输入框的内容。
bindfocusEventHandle
输入框聚焦时触发,event.detail = {value:value}
bindblurEventHandle
输入框失去焦点时触发,event.detail = {value:value}

< /tr> td>< /tr>

속성 이름유형기본값 값설명
문자열




属性名类型默认值说明
sizeStringdefault有效值default, mini
typeStringdefault按钮的样式类型,有效值primary, default, warn
plainBooleanfalse按钮是否镂空,背景色透明
disabledBooleanfalse是否禁用
loadingBooleanfalse名称前是否带 loading 图标
formTypeString有效值:submit, reset,用于form组件,点击分别会触发submit/reset事件
hover-classStringbutton-hover指定按钮按下去的样式类。当hover-class="none"时,没有点击态效果
입력 상자 내용
typeStringtext입력 유형, 유효한 값 : 텍스트, 숫자, ID 카드, 숫자, 시간, 날짜
비밀번호부울false 비밀번호인지 여부 유형
placeholderString<🎜>입력 시 자리 표시자 상자가 비어 있습니다.
placeholder-styleString<🎜>placeholder 스타일을 지정하세요
placeholder-classStringinput-placeholderplaceholder의 스타일 클래스 지정
disabledBooleanfalse비활성화 여부
maxlength숫자140최대 입력 길이, 0으로 설정하면 최대 길이에 제한이 없습니다
자동 초점 부울false자동으로 초점을 맞추고 키보드를 당깁니다. 페이지에는 자동 초점 속성을 설정하는 입력이 하나만 있을 수 있습니다
focusBooleanfalse 입력 게인 포커스
bindchangeEventHandle<🎜> 입력 상자가 포커스를 잃음, 바인딩 변경 이벤트 트리거, event.detail={value:value}
bindinputEventHandle<🎜 > 날짜/시간 형식의 입력란을 제외하고, 키보드 입력이 발생하면 입력 이벤트가 발생하고, event.detail={value:value}이며, 처리 함수에서 직접 문자열을 반환할 수 있으며, 이는 입력 상자의 내용을 대체합니다.
bindfocusEventHandle<🎜>입력 상자에 포커스가 있을 때 트리거되는 이벤트입니다. Detail = {value:value}
bindblurEventHandle<🎜>입력 시 상자가 포커스를 잃음 Trigger, event.detail = {value:value}
<🎜><🎜>버튼 관련 속성<🎜><🎜><🎜>< td>이름 앞에 로딩 아이콘이 있는지 여부
<🎜><🎜><🎜><🎜>< /tr>
속성 이름유형기본값설명
크기문자열기본값유효한 값 ​​기본값, 미니
유형< /td>문자열기본값버튼 스타일 유형, 유효한 값 기본, 기본값, 경고
plainBooleanfalse버튼이 비어 있고 배경색이 투명한지 여부
disabled 부울false비활성화 여부
로드부울< /td>false
formTypeString 없음유효한 값: 제출, 재설정, 양식 구성 요소에 사용됩니다. 클릭하면 제출/재설정 이벤트가 트리거됩니다.
hover-classStringbutton- 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)





属性名类型必填说明
keyString本地缓存中的指定的key
dataObject/String需要存储的内容

wx.getStorageSync





属性名类型必填说明
KEYString本地缓存中的指定的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>
로그인 후 복사

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

WeChat 애플릿 로컬 저장 및 로그인 페이지 처리 예시에 대한 자세한 설명
实例三: 处理登陆表单数据(异步)
这里采用异步的方式存放数据。
修改一下

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)





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

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

wx.clearStorage()
로그인 후 복사
wx.clearStorageSync()
로그인 후 복사

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

您可能感兴趣的文章:

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

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿