미니 프로그램에서 페이지 간 값을 전송하는 두 가지 방법에 대한 간략한 설명

이 글에서는 WeChat 미니 프로그램에서 페이지 간 가치 이전의 두 가지 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

1: 매개변수를 사용하여 URL 전달

프론트엔드 언어와 마찬가지로 라우팅 URL 뒤에 매개변수를 추가하면 미니 프로그램 페이지 간 전송이 가능하며 매개변수는 새 페이지로 전달됩니다. 라우팅하는 동안 하나.

index.wxml:

<!--index.wxml-->
<view class="container">
  <!-- 使用navigator组件 -->
  <navigator url="../demo/demo?title=参数传递">title=参数传递</navigator>
</view>

demo.js

// pages/demo/demo.js
Page({
 
  data: {
    title:''
  },
 
  onLoad: function (options) {
    console.log(options)  //打印options,可以看到title的值可以获取到
    this.setData({
      title:options.title  //为页面中title赋值
    })
  },
 
})

demo.wxml

<!--pages/demo/demo.wxml-->
<view class=&#39;container&#39;>
  {{title}}
</view>

렌더링:

​ ​ ​

2: 값 저장 전역 변수

필요한 값을 전역 변수에 저장하고 필요할 때 직접 참조할 수도 있습니다.

app.js

//app.js
App({
  globalData: {}
})

index.wxml

<!--index.wxml-->
<!-- 点击触发goto_demo函数 -->
<view class="container" bindtap=&#39;goto_demo&#39;> 
  title=参数传递
</view>

index.js

//index.js
//获取应用实例
const app = getApp()
 
Page({
  data: {
    title:'参数传递'
  },
 
  goto_demo: function() {
    app.globalData.title = this.data.title
    wx.navigateTo({
      url: '../demo/demo',
    })
  }
})

demo.js

// pages/demo/demo.js
//获取应用实例
const app = getApp()
 
Page({
 
  data: {
    title:''
  },
 
  onLoad: function (options) {
    console.log(app.globalData.title)  //打印options,可以看到title的值可以获取到
    this.setData({
      title: app.globalData.title  //为页面中title赋值
    })
  },
 
})

글로벌을 사용해야 할 때를 기억하세요 변수 애플리케이션 인스턴스를 먼저 얻으려면: const app = getApp()

렌더링은 위와 동일합니다.

관련 학습 권장 사항: Mini 프로그램 개발 튜토리얼

위 내용은 미니 프로그램에서 페이지 간 값을 전송하는 두 가지 방법에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!