WeChat 애플릿에서 WebView 페이지를 업데이트하는 세 가지 방법

Scenario

미니 프로그램의 다른 페이지에서 작업을 수행하면 데이터가 변경됩니다. 웹뷰 페이지로 돌아가면 웹뷰의 데이터를 업데이트해야 합니다. 미니 프로그램은 웹뷰와의 실시간 소통 기능을 제공하지 않기 때문에 페이지 새로고침을 고려해야 합니다.

방법 1

가장 일반적인 방법은 웹뷰의 URL을 수정하고 쿼리 매개변수 등을 추가하면 페이지가 업데이트되는 것입니다. 그러나 이렇게 하면 웹뷰의 검색 기록이 늘어나 사용자가 돌아갈 때 애플릿의 이전 페이지가 아닌 웹뷰의 이전 페이지로 돌아가게 됩니다.

방법 2

미니 프로그램에서 wx.redirectTo(OBJECT)메소드를 호출합니다. 여기에 현재 페이지의 URL을 입력하세요. 실제로 현재 페이지를 닫았다가 다시 열면 위장된 웹뷰를 새로 고치는 목적이 달성됩니다. 다만, 미니프로그램 페이지가 다시 오픈되므로 시간이 더 오래 걸립니다. 또한 사용자는 이전 페이지가 깜박인 다음 새 페이지가 나타나는 것을 볼 수 있습니다.

방법 3

먼저 웹뷰에서 조건부 렌더링을 수행하도록 합니다.

<web-view wx:if="{{ webviewUrl }}" src="{{ webviewUrl }}" />

새로고침이 필요한 경우 먼저 webviewUrl을 비우도록 설정하고 현재 웹뷰를 삭제합니다. 그런 다음 webviewUrl을 현재 값으로 설정합니다. 다음과 같습니다:

  refreshWebview: function () {
    let tmpUrl = this.data.webviewUrl;
    this.setData({
      webviewUrl: ''
    });
    setTimeout(() => {
      this.setData({
        webviewUrl: tmpUrl
      })
    }, 100);
  }

이러한 방식으로 탐색 모음 기록에 영향을 주지 않고 페이지를 새로 고칠 수도 있고 점프 URL이 될 수도 있습니다.
여기서 setData 이후에는 페이지 콘텐츠 업데이트가 비동기적으로 실행되어야 하므로 URL을 수정할 때 잠시 지연되어야 하며, 그렇지 않으면 오류가 발생합니다.
setData 이후 페이지의 실제 업데이트는 다음 requestAnimationFrame에 있어야 한다고 생각하므로 페이지가 전혀 멈추지 않으면 16ms가 될 수 있으므로 안전을 위해 100ms로 설정했습니다.

요약

지금까지 배운 내용으로는 부작용 없이 미니 프로그램 웹뷰를 직접 새로 고칠 수 있는 간단한 API는 실제로 없습니다. 세 번째 방법은 제가 직접 알아낸 방법입니다. 그런데 이렇게 단순한 문제는 좀 더 직접적으로 접근해야 한다는 생각이 들곤 하는데, 그게 이상하네요.

관련 기사:

WeChat 애플릿의 풀다운 새로 고침 및 풀업 로딩 구현 방법에 대한 자세한 설명

JS에서 상위 창을 새로 고치는 여러 가지 방법 요약

위 내용은 WeChat 애플릿에서 WebView 페이지를 업데이트하는 세 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!