正文

微信小程序JS内部传参，轻松掌握传值技巧

/0 浏览量
0424

在微信小程序开发中，JavaScript（JS）的内部传参是开发者需要掌握的一项基本技能。通过合理地传递参数，我们可以实现组件间的数据交互，提高小程序的灵活性和可维护性。本文将详细介绍微信小程序JS内部传参的方法和技巧。

一、页面间传参

1. 使用URL传参

在微信小程序中，页面跳转时可以通过URL传递参数。以下是一个简单的示例：

// 在跳转前设置URL参数
wx.navigateTo({
  url: `/pages/detail/detail?id=123`
});

// 在目标页面获取参数
Page({
  onLoad: function (options) {
    const id = options.id; // 获取参数
    console.log(id); // 输出：123
  }
});

2. 使用全局变量传参

在页面跳转时，可以将参数存储在全局变量中，然后在目标页面获取该变量。

// 在跳转前设置全局变量
let id = 123;
wx.navigateTo({
  url: `/pages/detail/detail`
});

// 在目标页面获取全局变量
Page({
  onLoad: function () {
    const id = getApp().globalData.id; // 获取全局变量
    console.log(id); // 输出：123
  }
});

二、组件间传参

1. 使用事件传递参数

在组件内部，可以通过事件传递参数。以下是一个简单的示例：

// 在子组件中
this.triggerEvent('customEvent', { data: '123' });

// 在父组件中监听事件
Page({
  onCustomEvent: function (e) {
    const data = e.detail.data; // 获取参数
    console.log(data); // 输出：123
  }
});

2. 使用WXML标签属性传递参数

在WXML标签中，可以通过属性传递参数。以下是一个简单的示例：

<!-- 在子组件中 -->
<view bindtap="handleTap" data-id="123">点击我</view>

<!-- 在父组件中 -->
<view bindtap="handleTap" data-id="{{id}}">点击我</view>

<!-- 在JavaScript中 -->
Page({
  data: {
    id: 123
  },
  handleTap: function (e) {
    const id = e.currentTarget.dataset.id; // 获取参数
    console.log(id); // 输出：123
  }
});

三、总结

微信小程序JS内部传参是小程序开发中的一项重要技能。通过以上介绍，相信你已经掌握了页面间和组件间传参的方法。在实际开发过程中，灵活运用这些技巧，可以让你的小程序更加高效、易维护。

-- 展开阅读全文 --