Une brève discussion sur deux méthodes de transfert de valeurs entre les pages dans les mini-programmes-Développement de mini-programmes-php.cn

Une brève discussion sur deux méthodes de transfert de valeurs entre les pages dans les mini-programmes

青灯夜游

Libérer： 2021-06-04 10:16:16

avant

2624 Les gens l'ont consulté

Cet article vous présentera deux méthodes de transfert de valeur entre les pages des mini-programmes WeChat. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Une brève discussion sur deux méthodes de transfert de valeurs entre les pages dans les mini-programmes

1 : url passée avec des paramètres

Comme les langages front-end, transfert entre les mini pages du programme Vous pouvez ajouter des paramètres après l'URL de routage, et les paramètres seront transmis à la nouvelle page lors du routage.

index.wxml:

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

Copier après la connexion

demo.js

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

Copier après la connexion

demo.wxml

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

Copier après la connexion

Rendu :

Deux : Valeurs de volonté sont stockés dans des variables globales

Nous pouvons également stocker les valeurs requisesdans des variables globales et les référencer directement si nécessaire.

app.js

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

Copier après la connexion

index.wxml

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

Copier après la connexion

index.js

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

Copier après la connexion

demo.js

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

Copier après la connexion

doit être used Lorsque vous utilisez des variables globales, n'oubliez pas d'obtenir d'abord l'instance d'application : const app = getApp()

Le rendu est le même que ci-dessus.

Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!