微信小程序中的几种页面传参方式-猿码集

微信小程序中的几种页面传参方式

微信小程序作为一种轻量级应用实现了许多传统的手机应用功能，其中页面传参也是不可避免的。本文将介绍微信小程序中的几种页面传参方式。

1. URL 传参

URL 传参即通过 URL 的 query 部分传递参数。通过这种方式传递参数时，参数位于 URL 的 ? 后面，多个参数之间用 & 连接。在页面 onLoad 生命周期中可以获取到 URL 中的参数，使用 wx.getLaunchOptionsSync() 方法进行获取。以下为 URL 传参的示例代码：


// 示例 URL：/pages/detail/detail?name=apple&price=1000
Page({
  onLoad: function (options) {
    console.log(options.name)  // 输出：'apple'
    console.log(options.price)  // 输出：1000
  }
})

2. 路由传参

路由传参是指在页面之间通过调用 wx.navigateTo 或 wx.redirectTo，传递参数到下一个页面。在下一个页面的 onLoad 生命周期中，可以通过 options 获取到参数。以下为路由传参的示例代码：


// 调用 wx.navigateTo 跳转到下一个页面
wx.navigateTo({
  url: '/pages/detail/detail?name=apple&price=1000'
})
// 下一个页面的 onLoad 生命周期中获取参数
Page({
  onLoad: function (options) {
    console.log(options.name)  // 输出：'apple'
    console.log(options.price)  // 输出：1000
  }
})

3. 全局变量传参

想要在多个页面之间传递参数，可以采用全局变量的方式。在 app.js 中定义一个全局变量，然后在页面中去获取即可。以下为全局变量传参的示例代码：

在 app.js 中定义全局变量


App({
  globalData: {
    name: 'apple',
    price: 1000
  }
})

在页面中获取全局变量


Page({
  onLoad: function () {
    console.log(getApp().globalData.name)  // 输出：'apple'
    console.log(getApp().globalData.price)  // 输出：1000
  }
})

4. 组件属性传参

通过组件属性来传参，是指将参数通过组件的属性传递到子组件中。在子组件中，可以通过 properties 获取到父组件传递的参数值。以下为组件属性传参的示例代码：

父组件 .wxml 文件


<view>
  <custom-component name="apple" price="1000"></custom-component>
</view>

子组件 .js 文件


Component({
  properties: {
    name: String,
    price: Number,
  }
})

在子组件 .wxml 文件中使用参数


<text>{{name}}</text>
<text>{{price}}</text>

在运行时，子组件中的 {{name}} 将输出 'apple' ，{{price}} 将输出 1000 。

在使用以上四种传参方式时，需要注意传递数据的大小和安全性。以上仅是四种较为常见的传参方式，在实际开发中，还需要根据场景选择最合适的传参方式。

微信小程序中的几种页面传参方式