위챗 애플릿 다중 페이지 전송 통신의 탐색과 실천

앞말
최근 위챗 애플릿이 갈수록 뜨거워지면서 많은 회사들이 원본 코드를 위챗 애플릿 코드로 바꾸고 있다.개발 과정에서 위챗 애플릿 wx로 인해vigate Back 방법은 전송 참조를 되돌려주는 것을 지원하지 않아서 일부 페이지, 특히 목록 페이지에서 상세 정보 페이지로 넘어가면 사용자가 상세 정보 페이지에서 상태를 바꾸고 돌아온 후에 페이지를 새로 고침하든 안 하든 체험이 좋지 않다.android에서, 우리는 일반적으로 setresult 방법으로 파라미터를 되돌려 주거나, rxjava 프레임워크나 이벤트 bus 프레임워크를 직접 사용하여 이런 문제를 해결한다.
업무 분석
이런 수요는 대략 다음과 같다. A 페이지는 B 페이지에 들어가고 B 페이지는 A 페이지로 되돌아와 값을 A에게 전달한다.
탐색의 길
처음에 나는 비교적 게으른 방법을 채택하여 위챗의 wx를 이용하고 싶었다.set Storage는 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 페이지에 들어가는 입구가 여러 개일 수 있기 때문에 가져오는 페이지에 오류가 발생할 수 있다.
안 했는데 갑자기 위챗 애플릿이 js를 지원한다는 생각이 들어서 경량급 js 라이브러리를 찾았어요. 그리고 관찰자 모드예요. 제가 원하는 유형이에요.그래서 좋은 연극이 시작되었다
2. onfire.js 소개
onfire.js는 간단한 이벤트를 나누어 주는 자바스크립트 라이브러리 (0.9kb) 로 간결하고 실용적이다.github.com/hustcc/onfi... [작성자는 내가 아님]:

간단한 사건 분배;

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

이벤트 구독 및 발표;

실천
생각을 정리하면 다음과 같다.

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

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

A 페이지가 마운트 해제되면 가입이 해지됩니다.

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);
  }
})

onfire. 직접 호출on 방법은 키라는 메시지를 구독하고 전참이 없습니다.참조가 필요하면 function에 직접 파라미터를 추가하면 됩니다. 예를 들어var 이벤트 Obj = onfire.on('key', function (data)....onUnload에서 키에 대한 구독을 취소하고 이벤트Obj의 귀속을 취소해야 합니다.B 페이지에 코드는 리셋하는 곳에 넣는다

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

4. 라이브러리 코드 분석

  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];
  }

코드에서 볼 수 있듯이 구독 on 방법을 사용할 때 실제 호출bind 방법, 이 방법은 주로 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]; //           ，        。
      });
    }
  }

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;
  }

마운트 해제는 키, 대상, 방법에 따라 마운트 해제를 지원하기 때문에 유형을 판단한 다음 각각의 규칙에 따라 귀속을 해제해야 합니다.
다섯째, 총결산
이 사건이 창고에 나누어져 많은 문제가 해결되었다.전재할 때 출처를 밝혀 주십시오.im/post/5907f1…