찾다
위챗 애플릿미니 프로그램 개발미니 프로그램 페이지 간 데이터 전송 방법

미니 프로그램 페이지 간 데이터 전송 방법

Jul 01, 2020 am 09:50 AM
미니 프로그램

저는 최근 미니 프로그램 프로젝트를 진행하면서 미니 프로그램의 페이지 간에 일부 데이터를 전달해야 하는 경우가 많다는 사실을 발견했습니다. 내 자신의 이해와 친숙함을 바탕으로 다양한 데이터 요구 사항에 따라 여러 가지 데이터 전송 방법이 있다는 결론을 내렸습니다. 여기에 간략한 소개와 요약이 있습니다.

첫 번째 유형: 페이지가 이동할 때 URL을 통해 전달

wx.navigateTowx.redirectTo를 사용할 때 데이터의 일부를 URL에 넣을 수 있습니다. 새 페이지의 onLoad 중에 획득 및 초기화됩니다. wx.navigateTowx.redirectTo 的时候,可以将部分数据放在 url 里面,并在新页面 onLoad 的时候获取且初始化。

//pageA.js

// Navigate
wx.navigateTo({
  url: '../pageB/pageB?name=lin&gender=male',
})

// Redirect
wx.redirectTo({
  url: '../pageB/pageB?name=lin&gender=male',
})

// pageB.js
...
Page({
  onLoad: function(option){
    console.log(option.name + 'is' + option.gender);
    this.setData({
      option: option
    });
  }
})

需要注意的问题:

  1. 使用wx.navigateTowx.redirectTo时,不允许跳转到 tab 所包含的页面;
  2. onLoad只执行一次;

适用:
这种方式一般适用于少数页面之间需要少量数据传递,如B页面需要A页面中的1-2个数据等等。

第二种:使用全局变量来传递

在 app.js 文件中定义全局变量 globalData,旧页面将要传递的数据赋值存放在里面,新页面调用全局变量获取传递数据值。

// app.js

App({
     // 全局变量
  globalData: {
    name: null
  }
})

//pageA.js
···
getApp().globalData.name = "lin";


//pageB.js
···
this.setData({
  userName: getApp().globalData.name
});

要注意的问题:

  1. 使用的时候,直接使用 getApp() 拿到存储的信息。

适用:
这种方式一般适用于多个页面或者全部页面都需要获取使用同一个数据,比如一开始进入首页就获取到的用户信息等;

第三种:使用本地缓存

使用小程序中的本地缓存Storage

//pageA.js
···
wx.setStorageSync('sessionId', res.sessionId);


//pageB.js
···
var sessionId = wx.getStorageSync('sessionId');
참고 사항:

    wx.navigateTowx.redirectTo를 사용할 때 탭에 포함된 페이지로 이동할 수 없습니다.
  1. onLoad는 한 번만 실행됩니다.
  2. 적용 가능:
  3. 이 방법은 일반적으로 페이지 A에서 1-2 데이터가 필요한 페이지 B와 같이 몇 페이지 간의 소량 데이터 전송에 적합합니다.

두 번째: 전역 변수를 사용하여 전송

app.js 파일에 전역 변수 globalData를 정의하세요. 이전 페이지에서는 전송할 데이터를 할당하고 저장하고, 새 페이지에서는 전송된 데이터 값을 얻기 위한 전역 변수입니다.

rrreee주의사항:

🎜사용시에는 getApp()를 직접 사용하여 저장된 정보를 가져옵니다. 🎜🎜🎜적용 가능: 🎜이 방법은 일반적으로 여러 페이지에 적합하거나 모든 페이지가 동일한 데이터(예: 홈페이지에 들어가자마자 얻은 사용자 정보)를 얻고 사용해야 합니다. 🎜🎜세 번째 방법: 로컬 캐시 사용🎜🎜 사용; 미니 프로그램의 로컬 캐시 Storage를 사용하면 이전 페이지는 전송된 데이터를 캐시에 저장하고 새 페이지는 캐시된 API를 호출하여 데이터를 가져옵니다. 🎜rrreee🎜참고 사항: 🎜🎜🎜스토리지는 키가 저장될 때마다 키에 해당하는 원본 콘텐츠를 덮어씁니다. 🎜🎜사용자가 직접 미니프로그램을 삭제하거나, 저장 공간 문제로 시스템에서 삭제하는 경우, 저장 공간에 있는 데이터도 삭제됩니다. 🎜🎜단일 키에 저장할 수 있는 최대 데이터 길이는 1MB이며, 전체 데이터 저장의 상한은 10MB입니다. 🎜🎜🎜적용 가능: 🎜이 방법은 일반적으로 로그인 상태 유지 등과 유사하게 애플릿을 종료했다가 다시 들어가도 유지해야 하는 데이터에 적합합니다. 🎜🎜추천 튜토리얼: "🎜WeChat 미니 프로그램🎜"🎜

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

성명
이 기사는 简书에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음