위 챗 애플 릿 로 컬 데이터 저장 실례 상세 설명

위 챗 애플 릿 로 컬 데이터 저장 실례 상세 설명
머리말
이 글 을 보기 전에 다른 프로그램의 개발 경험 이 있다 면 보통 안 드 로 이 드 나 애플 의 네 이 티 브 앱 이 로 컬 저장 기능 을 제공 하고 sqlite 데이터 베 이 스 를 사용 하여 저장 할 수 있다 는 것 을 알 게 될 것 입 니 다.그러나 위 챗 의 애플 릿 프레임 워 크 는 위 챗 자 체 를 바탕 으로 실제 운영 환경 은 브 라 우 저 에 있 을 뿐 풍부 한 데이터 저장 실력 을 제공 하지 않 습 니 다.그러나 html 5 는 이미 브 라 우 저 에 데 이 터 를 저장 할 수 있 습 니 다.예 를 들 어 위 챗 의 작은 프로그램 이 이 기능 을 봉인 하여 데 이 터 를 저장 할 수 있 습 니 다.
모든 위 챗 애플 릿 은 로 컬 캐 시 를 가 질 수 있 습 니 다.wx.setStorage(wx.setStorageSync)를 통 해

wx.getStorage（wx.getStorageSync）、 
wx.clearStorage（wx.clearStorageSync） 

로 컬 캐 시 를 설정 하고 가 져 오 며 청소 할 수 있 습 니 다.로 컬 캐 시 는 최대 10MB 입 니 다.
위의 set 와 get 은 모두 대응 하 는 Sync 방법 이 있 습 니 다.Sync 를 가 진 방법 은 동기 화 방법 이 고 Sync 를 가 진 방법 은 비동기 방법 입 니 다.
캐 시 를 설정 하려 면 key 와 대응 하 는 data 값 을 설정 해 야 합 니 다.저 희 는'위 챗 웹 개발 자 도구'의 디 버 깅 상태 에서 디 버 깅 창의 Storage 표시 줄 을 클릭 하여 로 컬 에 있 는 데 이 터 를 볼 수 있 습 니 다.
캐 시 는 배열,수치,문자열,대상 을 저장 할 수 있 습 니 다.
캐 시 설정
setStorage 와 setStorageSync 두 개의 인 터 페 이 스 를 제공 하고 저장 방법 을 설정 할 때 애플 릿 의 저장 값 에 해당 하 는 key 값 이 존재 하면 새로운 값 으로 원래 값 을 교체 합 니 다.
setSotrage 인터페이스

wx.setStorage({
 key:"key",
 data:"value",
 success:function(res){console.log(res)},
 fail:function(res){console.log(res)},
 complete:function(res){console.log(res)},
})
//Object {errMsg: "setStorage:ok"}
//Object {errMsg: "setStorage:ok"}

setStorageSync 인터페이스
이 방법 은 동기 화 인터페이스 이기 때문에 key 와 data 를 직접 설정 합 니 다.

wx.setStorageSync('key', 'value')

위의 두 데모 에서 우 리 는 모두 문자열 캐 시 를 사 용 했 습 니 다.물론 우 리 는 대상 을 캐 시 할 수 있 습 니 다.예 를 들 어:

wx.setStorage({key:"ob",data:{name:'smallerpig',sex:1,age:18}})

캐 시 가 져 오기
getSotrage 인터페이스
비동기 인터페이스 이기 때문에 우 리 는 몇 개의 반전 을 정의 할 수 있다.

wx.getStorage(
{
 key:'key',
 success:function(res){
  console.log(res)//Object {errMsg: "getStorage:ok", data: "value1"}
 },
 fail:function(res){console.log(res)},
 complete:function(res){console.log(res)}
})

그 중에서 우 리 는 위 챗 애플 릿 의 많은 비동기 인터페이스 의 리 셋 이 세 가지 리 셋 을 제공 하 는 것 을 알 수 있다.success,fail,complete 는 성공 할 때 success,complete 리 셋 을 실행 하 는 것 이다.실행 에 실패 한 후에 각각 fail,complete 리 셋 을 실행 합 니 다.
getSotrageSync 인터페이스
이 인 터 페 이 스 는 동기 화 인터페이스 이기 때문에 대응 하 는 키 값 만 전달 하면 된다.다음 코드 와 같이:

wx.getStorageSync('ob')
//Object {name: "smallerpig", sex: 1, age: 18}

현재 저장 소 요약 가 져 오기
wx.getStorageInfo 인터페이스 사용 하기
예 를 들 어 다음 코드:

wx.getStorageInfo({
 success: function(res) {
 console.log(res.keys)
 console.log(res.currentSize)
 console.log(res.limitSize)
 }
//["logs", "r3session", "key"]0: "logs"1: "r3session"2: "key"]
//1
//10240
})

동기 화 인터페이스 wx.getStorageInfoSync 도 사용 할 수 있 습 니 다.
캐 시 사용
지난 글 에서 돼지 는 wx.getUser Info 인 터 페 이 스 를 통 해 얻 은 crypted Data 데 이 터 를 복호화 하 는 방법 을 소개 했다.그 중의 sessionkey 돼지 는 flask 캐 시 에 쓰 여 있 습 니 다.캐 시 키 는 xcx 로 쓰 여 있 습 니 다.session_key。실제 환경 에서 우 리 는 이렇게 쓸 수 없습니다.왜냐하면 서로 다른 사용자 가 얻 은 sessionkey 는 같 기 때문에 서로 다른 사용자 에 게 서로 다른 캐 시 key 를 첨부 해 야 합 니 다.fllask 의 캐 시 키 를 위 챗 애플 릿 에 되 돌려 줍 니 다.애플 릿 에 key 값 을 고정 시 킬 수 있 습 니 다.data 값 은 fllask 배경 에서 주 는 값 을 유지 합 니 다.
말 하 는 것 이 비교적 복잡 하 니,여 기 는 독자 가 잘 이해 해 야 한다.
flask 코드 사용 code 에서 session 가 져 오기key 에서 다음 코드 를 사용 합 니 다:

@app.route('/user/getuserinfo', methods=['GET', 'POST'])
def getuserinfo():
 code = request.data
 url = 'https://api.weixin.qq.com/sns/jscode2session?appid=%s&secret=%s&js_code=%s&grant_type=authorization_code' % (appid, secret, code)
 r = requests.get(url)
 j = json.loads(r.text)
 r3session_key = binascii.hexlify(os.urandom(64))
 cache.set(r3session_key, j['session_key'])
 return r3session_key

다음은 wx.request 의 리 셋 에서 flask 에서 되 돌아 오 는 r3sessionkey 저장:

wx.request({
 url: 'https://***.smallerpig.com/user/getuserinfo',
 data: r.code,
 method: 'POST',
 success: function(res){
 wx.setStorageSync('r3session', res.data)
 }
})

그 다음 에 wx.getUser Info 를 호출 할 때 되 돌아 오 는 데 이 터 를 위 챗 애플 릿 로 컬 캐 시 에서 가 져 온 r3 session 을 fllask 에 던 져 처리 합 니 다.fllask 는 로 컬 서버 의 fllask 캐 시 에서 가 져 온 값 에 따라 cryptedData 를 복호화 합 니 다.이것 이 야 말로 완전한 과정 이다.
작은 프로그램의 getUserInfo 코드:

wx.getUserInfo({
 success: function (res) {
 that.globalData.userInfo = res.userInfo
 typeof cb == "function" && cb(that.globalData.userInfo)
 //       r3session            ，              session_key
 var r3session = wx.getStorageSync('r3session')
 res.r3session = r3session
 wx.request({
  url: 'https://***.smallerpig.com/user/getuserunionid',
  data: res,
  success: function(res){
  // success
  console.log(res)
  },
 })
 }
})

대응 하 는 flask 코드:

@app.route('/user/getuserunionid', methods=['GET', 'POST'])
def getuserid():
 r = json.loads(request.data)
 encryptedData = r['encryptedData']
 iv = r['iv']
 xcx_session_key = r['r3session']
 session_key = cache.get(xcx_session_key) #         r3session   session_key
 pc = WXBizDataCrypt(appid, session_key)
 return pc.decrypt(encryptedData, iv)

공식 문서 주소 참조:https://mp.weixin.qq.com/debug/wxadoc/dev/api/data.html
총결산
몇 편의 글 을 통 해 돼지 의 코드 에 따라 한 걸음 한 걸음 한다 면 애플 릿 개발 의 대체적인 과정 을 알 고 있 을 것 입 니 다.그 다음 의 중점 은 애플 릿 이 제공 하 는 인 터 페 이 스 를 잘 알 고 이 인터페이스 에 따라 우리 의 업무 논 리 를 보완 하 는 것 입 니 다.
읽 어 주 셔 서 감사합니다. 여러분 에 게 도움 이 되 기 를 바 랍 니 다.본 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!