Maison > Applet WeChat > Développement de mini-programmes > Comment implémenter le passage des paramètres de l'enfant au parent dans le mini-programme WeChat (communication de page)

Comment implémenter le passage des paramètres de l'enfant au parent dans le mini-programme WeChat (communication de page)

青灯夜游
Libérer: 2021-10-12 11:24:50
avant
3408 Les gens l'ont consulté

Cet article vous aidera à comprendre comment la sous-page de l'applet WeChat transmet les paramètres à la page parent. J'espère qu'il vous sera utile !

Comment implémenter le passage des paramètres de l'enfant au parent dans le mini-programme WeChat (communication de page)

Comment une sous-page de mini-programme WeChat transmet-elle les paramètres à la page parent

Parfois, lorsque nous travaillons sur un projet de mini-programme WeChat, nous rencontrerons la situation suivante : il y a une page de liste, et la page a une condition de filtre. Cliquez sur Puis passez à la page et sélectionnez les conditions. Après la sélection, revenez à la page de liste et interrogez les données en fonction des conditions filtrées. Généralement, le plus souvent, nous constatons que les conditions de filtrage sont traitées via des boîtes contextuelles. Donc, si nous voulons cette méthode interactive pour accéder à une page, comment pouvons-nous transmettre les paramètres de la page enfant à la page parent ?

【Recommandation d'apprentissage connexe : Tutoriel de développement de mini-programmes

Problème

  • wx.navigateBack ne peut pas transporter de paramètres et la page enfant ne peut pas transmettre de paramètres à la page parent.

La page enfant exploite les données de la page parent

Faites attention ici, nous parlons de la page enfant exploitant les données de la page parent.

Il existe une API pour getCurrentPages dans la documentation officielle (la description officielle du site Web est la suivante) : getCurrentPages的API(官网描述如下):

PageObject[] getCurrentPages()获取当前页面栈。数组中第一个元素为首页,最后一个元素为当前页面。

  • 不要尝试修改页面栈,会导致路由以及页面状态错误。
  • 不要在 App.onLaunch 的时候调用 getCurrentPages(),此时 page 还没有生成。

通过getCurrentPages这个API,我们可以获取到页面栈的数据,所以就可以获取到指定的页面,在子页面通过修改父页面数据的方式,我们就可以实现子页面向父页面传参的功能。

const pages = getCurrentPages();
const gotoPage = pages[pages.length - 1];
Copier après la connexion

所以pages[pages.length - 1]就为当前页面,父页面就为pages[pages.length - 2],依次类推,我们可以获取到其他的祖先页面。

然后再使用 setData 方法 gotoPage.setData({xxx: ''})来修改设置父页面的数据,从而达到子页面向父页面传递参数的目的。之后再通过 wx.navigateBack

PageObject[] getCurrentPages() obtient la pile de pages actuelle. Le premier élément du tableau est la page d'accueil et le dernier élément est la page actuelle.

N'essayez pas de modifier la pile de pages, car cela entraînerait des erreurs de routage et d'état de la page.

    N'appelez pas getCurrentPages() pendant App.onLaunch, lorsque la page n'a pas encore été générée.
  • Grâce à l'API getCurrentPages, nous pouvons obtenir les données de la pile de pages, afin que nous puissions obtenir la page spécifiée, et nous pouvons implémenter la sous-page en modifiant les données de la page parent sur la sous-page La fonction de passer des paramètres à la page parent.
  • rrreee
Donc pages[pages.length - 1] est la page actuelle, et la page parent est pages[pages.length - 2], et ainsi de suite, nous peut accéder à d’autres pages ancêtres.

Utilisez ensuite la méthode setData gotoPage.setData({xxx: ''}) pour modifier et paramétrer les données de la page parent, afin que la page enfant puisse passer paramètres à la page parent Objectif. Utilisez ensuite wx.navigateBack pour revenir à la page.

Autres solutions🎜🎜🎜🎜🎜Composant 🎜🎜Boîte pop-up🎜🎜🎜Comme mentionné au début de notre article, si nous devons passer des paramètres de la page enfant à la page parent, alors nous pouvons afficher le contenu sous la forme d'une boîte contextuelle. Après avoir sélectionné les données correspondantes, masquez la boîte contextuelle ou le composant actuel. 🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Introduction à la programmation🎜 ! ! 🎜

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!

Étiquettes associées:
source:juejin.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal