微信小程序 页面之间传参实例详解

阅读时长 3 分钟读完

微信小程序是一种轻量级的应用程序,可以在微信中使用。在小程序中,有时需要在不同的页面之间共享数据和信息。本文将通过示例详细介绍微信小程序页面之间传递参数的方法。

1. 通过 URL 传参

可以通过 URL 传递参数来实现页面之间的数据传输。在源页面中,使用 wx.navigateTo() 方法跳转到目标页面,并在 URL 中添加参数。在目标页面中,可以使用 options 参数获取传递过来的值。

示例代码:

-- -------------------- ---- -------
-- --- --------
---------------
  ---- ---------------------------------------
---

-- ---- ---------
------
  --------------- -
    ------------------------ -- ------
    -------------------------- -- -------
  -
---
展开代码

2. 通过全局变量传参

可以通过定义一个全局变量,在不同的页面中访问该变量来实现页面之间的数据传输。在 App 实例中定义一个全局变量,然后在不同的页面中通过 getApp() 方法获取该实例并访问该变量。

示例代码:

-- -------------------- ---- -------
-- ------
-----
  ----------- -
    --------- ----
  -
---

-- --- --------
----- --- - ---------
----------------------- - - ----- ------ --

-- ---- ---------
----- --- - ---------
------------------------------------------ -- -------
展开代码

3. 通过事件传参

可以通过在页面中触发自定义事件并传递参数来实现页面之间的数据传输。在源页面中,使用 triggerEvent() 方法触发自定义事件并传递参数。在目标页面中,可以使用 on 方法监听该事件并获取传递过来的值。

示例代码:

-- -------------------- ---- -------
-- --- --------
------
  ------- -
    ----- ---- - - --- ---- ----- ------ --
    ---------------------------- ------
  -
---

-- ---- ---------
------
  -------- -
    ------------------ ------- -- -
      ----------------------------- -- ------
      ------------------------------- -- -------
    ---
  -
---
展开代码

结语

通过以上三种方法,我们可以实现微信小程序页面之间的数据传输。在不同的场景下,选择不同的方法可以提高代码的可读性和可维护性。希望本文能够对大家有所帮助。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/1215

纠错
反馈

纠错反馈