uniapp如何设置页面参数

uniapp如何设置页面参数

在uniapp中设置页面参数是很常见的需求，例如传递页面之间的参数，动态修改页面的标题等。本文将介绍uniapp中如何设置页面参数。

1. 设置页面传参

在uniapp中，我们可以通过url参数来进行页面传参。比如我们需要从A页面跳转到B页面，并且将一些参数传递给B页面，可以使用以下方式：

// 在A页面
uni.navigateTo({
  url: '/pages/B/B?id=123&type=good'
})

在B页面可以通过以下方式获取参数：

// 在B页面
export default {
  onLoad(options) {
    console.log(options.id) // 输出：123
    console.log(options.type) // 输出：good
  }
}

需要注意的是，在使用navigateTo进行页面跳转时，目标页面可以使用以下生命周期方法获取传递的参数：

onLoad(options)：在页面加载时触发，options参数即为传递的参数。

onShow()：在页面显示时触发，可以通过this.$route.query获取传递的参数。

2. 动态修改页面标题

在uniapp中，我们可以通过uni.setNavigationBarTitle来动态修改页面标题，具体方式如下：

uni.setNavigationBarTitle({
  title: '页面标题'
})

需要注意的是，修改标题的方式只适用于当前页面，如果需要修改全局导航栏的标题，可以在App.vue文件中进行设置：

export default {
  onLaunch() {
    uni.setNavigationBarTitle({
      title: '全局标题'
    })
  }
}

3. 设置全局页面参数

在uniapp中，我们可以通过uni.setStorageSync和uni.getStorageSync来进行全局页面参数的设置和获取。比如我们需要记录当前用户的登录状态，在整个应用中都可以访问，可以使用以下方式：

// 在登录成功后设置参数
uni.setStorageSync('isLogin', 'true')
// 在其他页面获取参数
let isLogin = uni.getStorageSync('isLogin')

通过以上方式设置的参数在微信小程序中是永久性的，除非手动清除，而在H5端和App端，则是在应用关闭后会被清除。

总结

本文介绍了uniapp中设置页面参数的三种方式：页面传参、动态修改页面标题以及设置全局页面参数。需要注意的是，不同的方式适用于不同的场景，选择合适的方式能够极大地提高开发效率。