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

hzc
풀어 주다: 2020-07-01 09:55:11
앞으로
2689명이 탐색했습니다.

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

첫 번째 유형: 페이지가 이동할 때 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:jianshu.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!