위 챗 애플 릿 개발 데이터 캐 시 기초 지식 분석 및 활용 사례 상세 설명

알림:여기에 본문 이 기록 하고 자 하 는 대략적인 내용 을 추가 할 수 있 습 니 다.
예 를 들 어 인공지능 이 계속 발전 하면 서 기계 학습 이라는 기술 도 점점 중요 해 지고 많은 사람들 이 기계 학습 을 시 작 했 기 때문에 본 고 는 기계 학습 의 기초 내용 을 소개 했다.
제시:다음은 본 글 의 본문 내용 이 고 다음 사례 는 참고 할 수 있 습 니 다.
1.위 챗 데이터 캐 시 는 무엇 입 니까?
실제 개발 에서 하나의 데 이 터 를 사용 할 때 우 리 는 api 인 터 페 이 스 를 호출 하여 얻 은 다음 에 페이지 에 렌 더 링 해 야 한다.그러나 일부 데 이 터 는 자주 사용 해 야 한다.만약 에 사용 할 때마다 api 인 터 페 이 스 를 호출 해 야 한다 면 매우 번 거 로 울 것 이다.데이터 캐 시 는 이 문 제 를 해결 합 니 다.저 희 는 특정한 api 를 처음 호출 하여 데 이 터 를 얻 는 동시에 데 이 터 를 캐 시 할 수 있 습 니 다.그러면 나중에 사용 하 는 과정 에서 캐 시 구역 을 통 해 직접 얻 을 수 있 습 니 다.그러면 프로그램의 효율 을 높 일 수 있 습 니 다.예 를 들다.두 번 째 로 위 챗 에 로그 인 할 때 저 희 는 로그 인 작업 을 하지 않 았 습 니 다.그러나 저희 의 이미지 데이터 가 페이지 에 렌 더 링 된 것 을 발 견 했 습 니 다.이것 은 다시 로그 인 할 때 그림 의 주 소 는 캐 시 구역 에서 얻 은 것 이기 때문에 본 고 에서 도 이 인 스 턴 스 를 조작 할 것 입 니 다.위 챗 애플 릿 의 데이터 캐 시 는 js 중의 localstorage 와 유사 합 니 다.
2.데이터 캐 시 api 사용 방법 과 분석
1.데이터 저장
wx.setStorageSync(string key, any data)

wx.setStorageSync("name","  ") 

wx.setStorage(Object object)

wx.setStorage({
 data: "  ",
 key: 'name1',
 }) 

이 코드 를 실행 하면 디 버 깅 구역 storage 에 다음 과 같은 데이터 가 나타 납 니 다.

2.데이터 읽 기
wx.getStorageSync(string key)

var b=wx.getStorageSync('name')
 console.log(b);

Object wx.getStorageInfoSync()

var a=wx.getStorage({
 key: 'name1',
 })
 a.then(e=>{
 console.log(e.data);
 
 })

xx.getStorageInfoSync()는 promise 대상 을 얻 었 기 때문에 then 방법 으로 e.data 를 통 해 캐 시 영역 데 이 터 를 얻 습 니 다.
이 코드 를 실행 하면 디 버 깅 영역 console 에서 다음 과 같은 데이터 가 나타 납 니 다.

3.데이터 wx.removeStorage 삭제(개체 개체)

 wx.removeStorage({
 key: 'name1',
 })

wx.removeStorageSync(‘name')

wx.removeStorageSync('name')

이 코드 를 실행 하면 디 버 깅 구역 storage 에서 다음 과 같은 데이터 가 삭 제 됩 니 다.
4.모든 데 이 터 를 삭제 합 니 다.

wx.clearStorage()
wx.clearStorageSync()

3.api 분석
위의 다 중 api 는 두 가지 유형 으로 나 눌 수 있 습 니 다.하 나 는 sync 가 있 는 것 이 고 하 나 는 가지 고 있 지 않 습 니 다.사실은 sync 가 있 는 것 은 비동기 api 이 고 동기 api 가 없 는 것 입 니 다.이것 도 sync 가 있 는 이 부분 api 는 promise 대상 을 얻 었 습 니 다.여 기 는 wx.setStorageSync(),wx.setStorage()를 예 로 들 어 보 겠 습 니 다.
1.wx.setStorage()
코드 는 다음 과 같 습 니 다(예제):wxml 에 두 개의 단 추 를 기록 하고 첫 번 째 트리거 함수 tongbu 를 누 르 면 동기 화 상황 을 보 여 줍 니 다.

tongbu:function(){
 wx.setStorageSync("name","  ") //  api
 var a=wx.getStorageSync('name')
 console.log(a);
}

처음에 name 에 대응 하 는 데 이 터 는 장 3 입 니 다.여기 서 우 리 는 장 5 로 수정 한 다음 에 데 이 터 를 읽 었 는데 console 가

단일 스 레 드 순서 로 실행 되 었 음 을 설명 합 니 다.name 을 수정 한 후에 야 console.log 를 실 행 했 습 니 다.
2.wx.setStorage()
코드 는 다음 과 같 습 니 다(예제):첫 번 째 트리거 함수 yibu 를 누 르 면 비동기 상황 을 보 여 줍 니 다.

yibu:function(){
 wx.setStorage({
 data: "  ",
 key: 'name1',
 })
 var a=wx.getStorageSync('name1')
 console.log(a);

}
})

처음에 name 에 대응 하 는 데 이 터 는 이사 입 니 다.여기 서 이 류 로 수정 한 다음 에 데 이 터 를 읽 었 는데 console 가

코드 console.log 는 데 이 터 를 수정 한 후에 데 이 터 를 수정 한 후에 a 가 변 하지 않 은 것 을 발 견 했 습 니 다.이 는 wx.setStorage()가 비동기 api 임 을 설명 합 니 다.실행 할 때 여기 서 실행 이 완료 되 었 든 안 되 었 든 cinsole.log 를 실행 합 니 다.
위 챗 개인 정보 사례 불 러 오기
index.wxss

/**index.wxss**/
.userinfo {
 display: flex;
 flex-direction: column;
 align-items: center;
}

.userinfo-avatar {
 width: 128rpx;
 height: 128rpx;
 margin: 20rpx;
 border-radius: 50%;
}

.userinfo-nickname {
 color: #aaa;
}

.usermotto {
 margin-top: 200px;
}

image{
 margin-top: 20px;
 margin-bottom: 20px;
 width: 50px;
 height: 50px;
}

index.wxml

<!--index.wxml-->
<view class="container">
 <button bindtap="getmessage">      </button>
<view>  </view>
<view><image src="{{pictureurl}}"></image></view>
<view><text>     {{name}}</text></view>
</view>

index.js

// pages/index/index.js
Page({

 /**
 *        
 */
 data: {
  name:'  ',
  pictureurl:'../index/4.png'
 },
 getmessage:function(){
 var a=new Promise((resolve,reject)=>{
 wx.getUserInfo({
  success: function(res) {
  resolve(res)
  }
 })
 })//      ，            
 a.then(res=>{
 this.setData({
  name:res.userInfo.nickName,
  pictureurl:res.userInfo.avatarUrl
 })//              
 wx.setStorage({
  data: res.userInfo.nickName,//name        
  key: 'name',
 })
 wx.setStorage({
  data: res.userInfo.avatarUrl,//pictureurl        url  
  key: 'pictureurl',
 })
 })//          
 },
 /**
 *       --      ，    ，  onLoad。          
 */
 onLoad: function (options) {
 var name=wx.getStorageSync('name')//           
 var url=wx.getStorageSync('pictureurl')//        url
 console.log(name);
 console.log(url);
 this.setData({
  name:name,
  pictureurl:url
 })
 
 }
})

렌 더 링 후의 결과 예제,사용자 데이터 가 져 오기 단 추 를 처음 클릭 한 후 새로 고침 하거나 닫 은 후에 프로그램 을 다시 시작 하 는 것 이 이 페이지 입 니 다.

위 챗 애플 릿 개발 데이터 캐 시 기초 지식 분석 및 인 스 턴 스 활용 에 관 한 상세 한 글 은 여기까지 소개 합 니 다.더 많은 위 챗 애플 릿 개발 데이터 캐 시 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 을 바 랍 니 다!