위 챗 애플 릿 의 여러 페이지 전송 통신 학습 과 실천

머리말
위 챗 애플 릿 이 갈수 록 뜨 면서 많은 회사 들 이 네 이 티 브 코드 를 위 챗 애플 릿 코드 로 바 꾸 고 있다.개발 과정 에서 위 챗 애플 릿wx.navigateBack방법 이 반환 전 참 을 지원 하지 않 기 때문에 일부 페이지,특히 목록 페이지 에서 상세 페이지 로 넘 어가 면 사용 자 는 상세 페이지 에서 상 태 를 바 꾸 고 돌아 온 후에 페이지 를 새로 고침 하 든 안 하 든 체험 이 좋 지 않다.안 드 로 이 드 에서 저 희 는 보통setresult방법 으로 인 자 를 되 돌려 주거 나 rxjava 프레임 워 크 나 eventbus 프레임 워 크 를 직접 사용 하여 이런 문 제 를 해결 합 니 다.
업무 분석
이러한 수 요 는 대개 A 페이지 가 B 페이지 에 들 어가 고 B 페이지 가 A 에 게 되 돌아 와 값 을 전달 하 는 것 을 의미한다.
탐색 의 길
처음에 저 는 게 으 름 을 피 우 는 방법 을 사용 하고 싶 었 습 니 다.위 챗 의wx.setStorage캐 시 를 이용 하여 B 페이지 에 저장 하고 A 페이지 로 돌아 가onshow방법 에서 캐 시 를 읽 어서 이 기능 을 실현 하고 싶 었 습 니 다.그러나 해결책 이 너무 교묘 하 게 굴 면 향후 유지 에 도 많은 위험 을 가 져 올 수 있다.
그 다음 에 저 는 인터넷 에서 이전wx.getStorage을 얻 는 방법 을 찾 았 고 이 기능 도 실현 할 수 있 습 니 다.일부 코드 는 다음 과 같 습 니 다.

var pages = getCurrentPages();
var currPage = pages[pages.length - 1]; //    
var prevPage = pages[pages.length - 2]; //     

//          setData()  ，            
prevPage.setData({
 mdata:1 
})

곰 곰 이 생각해 보 니 코드 도 안전 하지 않 습 니 다.B 페이지 에 들 어 가 는 입구 가 여러 개 일 수 있 기 때문에 가 져 온 page 에 오류 가 발생 할 수 있 습 니 다.
원래 방법 이 없 었 는데 갑자기 위 챗 애플 릿 이 js 를 지원 한 다 는 생각 이 들 어서 경량급 js 라 이브 러 리 를 찾 았 습 니 다.그리고 관찰자 모델 이 고 제 가 원 하 는 유형 입 니 다.그래서 좋 은 연극 이 시작 되 었 다.
onfire.js 소개
onfire.js 는 간단 한 이벤트 로 나 눠 주 는 자바 script 라 이브 러 리(0.9kb 에 불과)로 간결 하고 실 용적 입 니 다.
github 주소:https://github.com/hustcc/onfire.js[저 자 는 제 가 아 닙 니 다]
로 컬 다운로드 주소:http://xiazai.jb51.net/201705/yuanma/onfire.js(jb51.net).rar
사용 가능:

간단 한 사건 배포;

react/vue.js/angular 에서 크로스 구성 요소 의 경량급 실현 에 사용 합 니 다.

이벤트 구독 과 발표;

실천 하 다.
정리 한 사고방식 은 다음 과 같다.

A 페이지 에서 이벤트 하 나 를 먼저 구독 하고 처리 방법 을 정의 합 니 다.

B 페이지 가 돌아 올 때 메 시 지 를 보 냅 니 다.

A 페이지 마 운 트 해제 시 구독 이 해 지 됩 니 다.

페이지 코드:

var onfire = require("../utils/onfire.js");
var that;
var eventObj = onfire.on('key', function () {
 //     
});

Page({
 data: {
 },
 onLoad: function(options) {
 // Do some initialize when page load.
 },
 onReady: function() {
 // Do something when page ready.
 },
 onUnload: function (e) {
 onfire.un('key');
 onfire.un(eventObj2);
 }
})

키 라 는 메 시 지 를 직접 호출page방법 으로 구독 하고 전송 되 지 않 습 니 다.전 삼 이 필요 하 다 면onfire.on에 직접 파 라 메 터 를 추가 하면 된다.예 를 들 어function.
주의:var eventObj = onfire.on('key', function (data)...에서 구독onUnload소식 을 취소 하고 바 인 딩key을 취소 해 야 합 니 다.
B 페이지 에 코드 가 리 셋 된 곳 에 들 어 갑 니 다.

 onfire.fire('key');//key         
 //    
 onfire.fire('key','test');

분석 라 이브 러 리 코드

 function _bind(eventName, callback, is_one, context) {
 if (typeof eventName !== string_str || typeof callback !== function_str) {
  throw new Error('args: '+string_str+', '+function_str+'');
 }
 if (! hasOwnKey(__onfireEvents, eventName)) {
  __onfireEvents[eventName] = {};
 }
 __onfireEvents[eventName][++__cnt] = [callback, is_one, context];

 return [eventName, __cnt];
 }

코드 에서 볼 수 있 듯 이 구독eventObj방법 을 볼 때 실제 호출on방법 은 주로 2 차원 배열 을 이용 하여 구독 대상 을 저장 하 는 것 이다.

 function _fire_func(eventName, args) {
 if (hasOwnKey(__onfireEvents, eventName)) {
  _each(__onfireEvents[eventName], function(key, item) {
  item[0].apply(item[2], args); //        
  if (item[1]) delete __onfireEvents[eventName][key]; //           ，        。
  });
 }
 }

반면_bind메 시 지 를 보 내 는 방법 은 실질 적 으로 호출fire방법 으로 이름_fire_func을 통 해 구독 자 를 옮 겨 다 니 며 구독 자 에 게 알 린 다.

 function un(event) {
 var eventName, key, r = false, type = typeof event;
 if (type === string_str) {
  //     key ，     
  if (hasOwnKey(__onfireEvents, event)) {
  delete __onfireEvents[event];
  return true;
  }
  return false;
 }
 else if (type === 'object') {
  eventName = event[0];
  key = event[1];
  //           
  if (hasOwnKey(__onfireEvents, eventName) && hasOwnKey(__onfireEvents[eventName], key)) {
  delete __onfireEvents[eventName][key];
  return true;
  }
  //    false
  return false;
 }
 else if (type === function_str) {
  //             
  _each(__onfireEvents, function(key_1, item_1) {
  _each(item_1, function(key_2, item_2) {
   if (item_2[0] === event) {
   delete __onfireEvents[key_1][key_2];
   r = true;
   }
  });
  });
  return r;
 }
 return true;
 }

마 운 트 해제 지원 은key,대상,방법 에 따라 마 운 트 해제 되 기 때문에 유형 을 판단 한 다음 각 규칙 에 따라 바 인 딩 을 해제 해 야 합 니 다.
총결산
이 사건 의 배포 창고 가 있어 서 많은 문제 들 이 칼날 로 풀 렸 다.자,이상 이 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.