WeChat 애플릿에서 다중 페이지 매개변수 통신 구현

저는 WeChat 미니 프로그램을 처음 접하고 속성에 대해 잘 모릅니다. 현재 열심히 공부하고 있는 글은 다중 페이지 매개변수 전달에 대한 내용을 주로 다루고 있습니다. 위챗 미니 프로그램은 제가 최근 공부한 내용을 정리한 것입니다. 필요하신 분들은 참고하시면 됩니다.

머리말

WeChat 미니 프로그램이 점점 인기를 얻고 있으며 많은 회사에서 기본 코드를 WeChat 미니 프로그램 코드로 변환하고 있습니다. . 개발 과정에서 WeChat 애플릿 wx.navigateBack 메서드는 매개변수 반환을 지원하지 않기 때문에 일부 페이지, 특히 목록 페이지에서 세부정보 페이지로 이동할 때 사용자가 세부정보 페이지에서 상태를 변경했습니다. 돌아온 후에는 페이지 새로 고침 여부에 관계없이 경험이 그리 좋지 않습니다. android에서는 일반적으로 setresult 메소드를 사용하여 매개변수를 반환하거나 rxjava 프레임워크 또는 eventbus 프레임워크를 직접 사용하여 이러한 문제를 해결합니다.

비즈니스 분석

이러한 종류의 요구 사항은 아마도 A 페이지가 B 페이지에 진입하고 B 페이지가 반환되며 통과를 의미합니다. 값이 A에 지정됩니다.

Road of Discovery

처음에는 게으르게 접근해서 WeChat의 wx.setStorage 캐시를 사용하고 싶었습니다. 은 페이지 B에 저장되었다가 페이지 A로 돌아가서 onshow 메서드에서 wx.getStorage을 호출하여 캐시를 읽어 이 기능을 구현합니다. 그러나 솔루션이 너무 기회주의적이라고 생각하면 향후 유지 관리에 많은 숨겨진 위험을 가져올 수도 있습니다.
그런 다음 인터넷에서 이전 page을 얻는 방법을 찾았는데, 이 방법으로도 이 기능을 구현할 수 있습니다. 코드의 일부는 다음과 같습니다.

var pages = getCurrentPages();
var currPage = pages[pages.length - 1]; //当前页面
var prevPage = pages[pages.length - 2]; //上一个页面

//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
prevPage.setData({
 mdata:1 
})

잘 생각해 본 결과 코드는 다음과 같습니다. 그다지 안전하지 않습니다. 왜냐하면 페이지 B에 여러 개의 입구가 있을 수 있고 이로 인해 얻은 페이지에 오류가 발생할 수 있기 때문입니다.

어찌할 바를 모르고 있었는데 문득 위챗 애플릿이 js를 지원하는구나 하는 생각이 들었고, 그러다가 가벼운 js 라이브러리를 발견했는데, 그게 관찰자 모드인데, 그게 I타입이다. 원하다. . 그럼 재미가 시작됩니다

onfire.js 소개

onfire.js는 매우 간단한 이벤트입니다. 간단하고 실용적인 분산 Javascript 라이브러리(단 0.9kb).

사용 가능:

• 간단한 이벤트 배포

• react/vue.js/angular에서

• 이벤트 구독 및 게시
  

실천

생각은 다음과 같습니다.

• 페이지 첫 번째는 이벤트를 구독하고 처리 방법을 정의합니다.

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

매개 변수 없이 key라는 메시지를 구독하려면 onfire.on 메서드를 직접 호출하세요. 통과되었습니다. 매개변수를 전달해야 하는 경우 function와 같이 var eventObj = onfire.on('key', function (data)...에 매개변수를 직접 추가하면 됩니다.

참고: 은 onUnload에서 key의 메시지를 구독 취소하고 eventObj 바인딩을 해제해야 합니다.

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

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으로 순회한 다음 구독자에게 알립니다. key

 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

요약

위 내용은 WeChat 애플릿에서 다중 페이지 매개변수 통신 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!