미니 프로그램 간의 페이지 간 상호 작용 기능 및 방법-미니 프로그램 개발-php.cn

작년 말, WeChat 미니 프로그램의 하위 패키지 크기는 12M에 이르렀습니다. 이는 미니 프로그램이 점차 개발자에게 더 많은 권한을 부여했다는 것을 보여줍니다. 미니 프로그램, 8M 크기로는 더 이상 충분하지 않습니다. 올해도 A to B 미니 프로그램 애플리케이션을 개발 중입니다. 다음은 페이지 간 상호 작용 시나리오입니다.

B-side 애플리케이션의 비즈니스 요구 사항의 경우 소규모 프로그램 개발의 복잡성은 웹 개발보다 상대적으로 더 복잡합니다. 하나는 듀얼 스레드 처리 메커니즘의 문제이고, 다른 하나는 페이지 스택 간의 상호 작용 문제입니다.

참고: 작성자는 현재 WeChat 애플릿만 개발하면 됩니다. 애플릿 페이지에서 속성 동작 관찰자와 같은 새로운 기능을 사용하기 위해 구성 요소 생성자가 페이지를 구성하는 데 사용되었습니다. 자세한 내용은 WeChat 애플릿 구성 요소 생성자를 참조하세요. 멀티터미널 개발이 꼭 필요한 상황이 아니라면 한번 해보고 좋은 경험을 해보시길 추천드립니다.

성능 최적화 카테고리

작은 프로그램의 경우 페이지를 클릭하면 wx.navigateTo가 실행되어 다른 페이지로 이동합니다. 중간에 공백 로딩 기간이 있습니다(하청 페이지의 경우 공백 기간은 이상) ), 그러나 이는 미니 프로그램의 내부 메커니즘이므로 최적화할 방법이 없습니다. 우리는 이 흥미롭지 않은 기간이 지나가기만을 기다릴 수 있습니다.

페이지로 이동한 후 가장 먼저 해야 할 일은 숫자를 가져오는 논리라는 점을 고려하면 이를 최적화할 수 있을까요? 대답은 '예'입니다. 현재 페이지에서 데이터를 직접 얻은 다음 점프 작업을 수행할 수 있는 방법은 없지만(이 작업은 더 나쁩니다) 현재 요청의 캐시를 사용할 수 있습니다. 자세한 내용은 내 이전 블로그 기사 - 3을 참조하세요. Promise 객체를 훌륭하게 활용했습니다.

코드는 다음과 같습니다.

const promiseCache = new Map()

export function setCachePromise(key, promise) {
  promiseCache.set(key, promise)
}

export function getCachePromise(key) {
  // 根据key获取当前的数据  
  const promise = promiseCache.get(key)
  // 用完删除，目前只做中转用途，也可以添加其他用途
  promiseCache.delete(key)
  return promise  
}

로그인 후 복사

전역 맵을 만든 다음 맵을 사용하여 Promise 개체를 캐시합니다. 점프 전 코드는 다음과 같습니다.

// 导入 setCachePromise 函数

Component({
  methods: {
    getBookData(id) {
      const promise = // promise 请求
        setCachePromise(`xxx:${id}`, promise)      
    },  
    handleBookDetailShow(e) {
      const id = e.detail
      this.getBookData(id)
       wx.navigateTo({url: `xx/xx/x?id=${id}`})
    }
  }
})

로그인 후 복사

점프 후 코드도 다음과 같습니다.

// 导入 getCachePromise 函数

Component({
    properties: {
      id: Number  
    },
    lifetimes: {
      attached () {
        const id = this.data.id  
        // 取得全局缓存的promise
        const bookPromise = getCachePromise(`xxx:${id}`)
        bookPromise.then((res) => {
          // 业务处理
        }).catch(error => {
          // 错误处理  
        })
      }
    },
    methods: {
      getBook() {
        // 获取数据，以便于 错误处理 上拉刷新 等操作  
      }  
    }
})

로그인 후 복사

그렇습니다. 가져오기 및 페이지 로드 논리를 동시에 처리합니다. 물론 이는 페이지와 결합되어 후속 삭제 및 수정에 도움이 되지 않습니다. 하지만 하도급 점프 사이에만 추가된다면 좋은 효과가 있을 수 있다는 점을 고려해보세요.

방해적이지 않으려면 ToC 및 ToC 사용자 모두 하드웨어 및 네트워크 환경에 문제가 있을 수 있다는 점을 고려하여 WeChat 미니 프로그램 및 wxpage 프레임워크의 적용 속도를 향상하기 위한 팁을 추가로 연구할 수 있습니다. , 이 최적화는 여전히 매우 중요합니다.

물론, 콜드 스타트 시간을 줄이기 위해 WeChat 애플릿은 주기적으로 업데이트 데이터를 미리 가져오는 기능을 제공합니다.

참고: 위의 promiseCache는 전송에만 사용되며 캐싱에는 사용되지 않습니다. 캐시 추가를 고려하는 경우 이전 블로그 기사인 프런트엔드 API 요청 캐싱 솔루션을 참조하세요.

알림 클래스

PC 측에서 상호 작용하면 데이터가 CRUD됩니다. 예를 들어, 상세페이지에서 데이터를 수정하거나 삭제한 경우, 기존에 저장된 목록 조회 조건을 직접 호출하여 목록으로 돌아올 때 다시 조회할 수 있습니다. 그러나 모바일 단말기의 드롭다운 스크롤링 디자인의 경우에는 그런 기능이 없습니다. 이전 쿼리 조건을 직접 호출하여 검색하는 방법입니다.

목록 페이지에서 상세 페이지로 진입하시면, 상세 페이지에서는 추가, 수정 작업만 진행됩니다. 그런 다음 목록 페이지로 돌아갑니다. 이때 데이터가 수정되었음을 사용자에게 알리고, 데이터를 새로 고칠지 여부를 사용자가 결정할 수 있습니다.

편집 페이지에서 데이터가 수정된 경우:

const app = getApp()

component({
  methods: {
    async handleSave() {
      //...
      app.globalData.xxxChanged = true
      //...  
    }
  }
})

로그인 후 복사

List 인터페이스:

const app = getApp()

component({
  pageLifetimes: {
    show() {
      this.confirmThenRefresh()
    }    
  },
  methods: {
    confirmThenRefresh() {
      // 检查 globalData，如果当前没有进行修改，直接返回 
      if(!app.globalData.xxxChanged) return
      wx.showModal({
        // ...
        complete: () => {
          // 无论确认刷新与否，都把数据置为 false 
          app.globalData.xxxChanged = false  
        }  
      })  
    }
  }  
})

로그인 후 복사

물론 wx.setStorage 또는 getCurrentPage를 사용하여 데이터 알림을 위한 이전 페이지 setData를 가져와 사용자가 새로 고칠 수 있도록 할 수도 있습니다. 페이지.

구독 게시 수업

데이터 수정만 포함된 경우 사용자가 새로 고침 작업을 수행하도록 선택할 수 있지만 삭제 작업의 경우 사용자가 새로 고침을 선택하지 않으면 사용자는 그렇지 않습니다. 삭제된 데이터를 클릭하면 오류가 발생합니다. 따라서 삭제해야 할 경우 목록 페이지로 돌아가기 전에 목록을 수정하는 것이 오류를 방지하는 데 가장 좋습니다.

mitt

github에는 많은 pub/sub 오픈 소스 라이브러리가 있습니다. 특별한 요구 사항이 없다면 코드 양이 가장 적은 라이브러리는 mitt 라이브러리입니다. 마이크로 라이브러리 개발을 좋아하는 사람도 이 상사의 손에서 나온 것입니다. 여기서는 너무 많은 소개를 하지 않겠습니다. 매우 간단합니다. 코드가 다음과 같다는 것을 누구나 이해할 수 있습니다(흐름 도구 확인 제외).

export default function mitt(all) {
  all = all || Object.create(null);

  return {
    on(type, handler) {
      (all[type] || (all[type] = [])).push(handler);
    },

    off(type, handler) {
      if (all[type]) {
        all[type].splice(all[type].indexOf(handler) >>> 0, 1);
      }
    },
    emit(type, evt) {
      (all[type] || []).slice().map((handler) => { handler(evt); });
      (all[&#39;*&#39;] || []).slice().map((handler) => { handler(type, evt); });
    }
  };
}

로그인 후 복사

on Emit과 Off의 3가지 방법만 있습니다.

생성된 mitt() 함수로 생성된 개체를 여러 페이지로 가져오거나 app.globalData에 직접 넣기만 하면 됩니다.

Component({
  lifetimes: {
    attached: function() {
      // 页面创建时执行
      const changeData = (type, data) => {
        // 处理传递过来的类型与数据
      }
      this._changed = changeData
      bus.on(&#39;xxxchanged&#39;, this._changed)
    },
    detached: function() {
      // 页面销毁时执行
      bus.off(&#39;xxxchanged&#39;, this._changed)
    }
  }
})

로그인 후 복사

这里mitt可以有多个页面进行绑定事件，如果需求仅仅只涉及到两个页面之间，我们就可以使用 wx.navigateTo 中的 EventChannel (页面间事件信息通道)。可以参考微信小程序wx.navigateTo方法里的events参数使用详情及场景,该方案的利好在于，传递到下一个页面的参数也可以通过 EventChannel 来通知，以便于解决 properties 传递数据不宜过大的问题。

注: 一个页面展示很多信息的时候，会造成小程序页面的卡顿以及白屏。小程序官方也有长列表组件 recycle-view。有需求的情况下可以自行研究，这个不在这里详述。

鼓励一下

如果你觉得这篇文章不错，希望可以给与我一些鼓励，在我的 github 博客下帮忙 star 一下。
博客地址

推荐教程：《微信小程序》

위 내용은 미니 프로그램 간의 페이지 간 상호 작용 기능 및 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!