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中设置页面参数的三种方式:页面传参、动态修改页面标题以及设置全局页面参数。需要注意的是,不同的方式适用于不同的场景,选择合适的方式能够极大地提高开发效率。