WeChat 애플릿: 간단한 형식, 로컬 저장소

인스턴스 콘텐츠

로그인 인터페이스

로그인 양식 데이터 처리

로그인 양식 데이터 처리(비동기)

로컬 데이터 지우기

예 1: 로그인 인터페이스

app.json에 로그인 페이지 페이지/로그인/로그인을 추가하고 입구로 설정합니다.

저장 후 해당 파일이 자동으로 생성됩니다(매우 편리함).

login.wxml 보기 파일 수정

" row"Name: text> view class="row"< ; text>Password: text> view class="row"> " form -type="submit">로그인 버튼> 보기> 양식>view>로그인 스타일 수정 login.wxss
/* 페이지/로그인/login.wxss */.container{ 패딩: 1rem; 글꼴 크기: 0.9rem ; 줄 높이: 1.5rem; 테두리 그림자: 1px 1px #0099CC;}.row{ 디스플레이: flex; align-items: center; margin-bottom: 0.8rem;}.row text{ flex-grow: 1 ; 텍스트 -정렬: 오른쪽;}.row 입력{ 글꼴 크기: 0.7rem; 색상: #ccc; flex-grow: 3; 테두리: 1px 솔리드 #0099CC; box-shadow: 0 0 0.15rem #aaa; padding: 0.3rem;}.row 버튼{ padding: 0 2rem;} 스타일 보기:

양식 관련 속성:

속성 이름 유형 설명 report-submit Boolean 템플릿 메시지 전송을 위해 formId를 반환할지 여부bindsubmit EventHandle은 제출 이벤트를 트리거하기 위해 양식에 데이터를 전달합니다. event.detail = { value : {"name ":"value"} , formId:"" } Bindreset EventHandle 여기에서는 제출된 양식 데이터를 처리하기 위해 Bindsubmit이 사용됩니다.
입력 관련 속성

속성 이름 유형 기본값 설명 값 String 입력 상자 유형의 내용 문자열 텍스트 입력 유형, 유효한 값: 텍스트, 숫자, ID 카드, 숫자, 시간, 날짜 비밀번호 Boolean false 여부 비밀번호 유형 자리 표시자 문자열 자리 표시자(입력 상자가 비어 있는 경우) placeholder-style String 자리 표시자의 스타일을 지정합니다. placeholder-class String input-placeholder 자리 표시자의 스타일 클래스를 지정합니다. 비활성화됨 Boolean false maxlength 비활성화 여부 숫자 140 최대 입력 길이, 0으로 설정 최대 길이 자동 초점 제한 Boolean false 자동으로 초점을 맞추고 키보드를 당깁니다. 페이지에는 입력이 하나만 있을 수 있습니다. 입력이 포커스를 얻으려면 자동 포커스 속성을 false로 설정하세요. bininput EventHandle 날짜/시간 유형 이외의 입력 상자, 키보드가 입력되면 입력 이벤트가 트리거됩니다. event.detail={value:value}, 처리 함수는 문자열을 직접 반환하여 해당 내용을 대체합니다. 입력 상자. binfocus EventHandle 입력 상자에 포커스가 있을 때 트리거됨, event.detail = {value:value} binblur EventHandle 입력 상자가 포커스를 잃을 때 트리거됨, event.detail = {value:value}button 관련 속성

속성 이름 유형 기본값 설명 size String default 유효한 값 default, mini type String default 버튼의 스타일 유형, 유효한 값primary, default, warning plain Boolean false 버튼이 비어 있고 배경색이 투명한지 여부disable Boolean false 여부 로딩이 비활성화됨 부울 false 이름 앞에 로딩 아이콘이 있는지 여부 formType 문자열 없음 유효한 값: 제출, 재설정, 양식 구성 요소에 사용됨 클릭하면 각각 제출/재설정 이벤트가 트리거됩니다. 문자열 버튼-호버는 스타일 클래스를 지정합니다. 누른 버튼의. hover-class="none"이면 클릭 상태 효과가 없습니다. 이 데모에서는 양식 제출 이벤트를 활성화하기 위해 버튼의 formType이 설정됩니다.
예 2: 로그인 양식 데이터 처리

login.js 수정
// Pages/login/login.jsPage({ data:{ userName:'', userPassword:'', }, formSubmit :function(e){ console.log(e.detail.value);//Format 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); 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은 지정된 키 데이터 개체/문자열입니다. 로컬 캐시 저장해야 하는 내용입니다. wx.getStorageSync
속성 이름 유형 필수 설명 KEY 문자열 로컬 캐시에 지정된 키입니다.
이름 ：text> view> <클래스 보기 ="row"> < text>Password: text> 로그인 시 작은 예시가 표시됩니다. 로그인 정보를 로컬 저장소에 저장하세요. 다음에 로그인할 때 로컬 저장소에 해당 정보가 있으면 직접 입력하세요.
효과(재실행 후 정보 자동 입력) :

예 3: 로그인 양식 데이터 처리(비동기)

데이터는 여기에 비동기적으로 저장됩니다.
login.js 수정
// Pages/login/login.jsPage({ data:{ userName:'', userPassword:'', }, formSubmit:function(e){ console.log(e.detail .value);//Format 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({ 키: 'userName', 성공: function(res){ console.log(res.data); that.setData({userName: res.data}); } }); . getStorage({ 키: 'userPassword', 성공: function(res){ console.log(res.data); that.setData({userPassword: res.data}); } }), onReady:function() { // 페이지 렌더링 완료}, onShow:function(){ // 페이지 표시}, onHide:function(){ // 페이지 숨김}, onUnload:function(){ // 페이지 닫힘}})wx.setStorage(OBJECT )
속성 이름 유형 필수 설명 key String은 로컬 캐시 데이터에 지정된 키입니다. Object/String은 저장해야 하는 콘텐츠입니다. Success Function 성공한 콜백 함수를 호출하는 인터페이스가 없습니다. 실패 완료 함수 인터페이스 없음 호출 종료 시 콜백 함수(호출 성공 또는 실패 시 실행됨) wx.getStorage(OBJECT)
속성 이름 유형 필수 설명 key 문자열은 로컬 캐시에 지정된 키입니다. Success 함수는 인터페이스가 호출하는 콜백 함수, res = { data: 키에 해당하는 내용} failure Function No 인터페이스 호출에 실패한 콜백 함수 Complete Function No 인터페이스 호출을 종료하는 콜백 함수(성공 및 키 모두) 실패한 호출은 실행됩니다) 예 4: 로컬 데이터 지우기

여기서는 자세히 쓰지 않겠습니다. 이제 로컬 데이터를 지우는 두 가지 방법을 직접 소개하겠습니다.
wx.clearStorage()
wx.clearStorageSync()
직접 실행할 수 있습니다.

더 많은 WeChat 미니 프로그램: 간단한 양식, 로컬 저장 관련 기사는 PHP 중국어 웹사이트를 참고하세요!