uni-app小程序开发-页面跳转及传值

2024-07-04 10:40:52 浏览数 (1)

小程序内跳转

uni.navigateTo

用法：uni.navigateTo({ url: '目标页面路径' })

描述：保留当前页面，跳转到应用内的某个页面。

示例：

代码语言：javascript复制
<template>
  <view>
    <button @click="navigateToPage">跳转到新页面</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateToPage() {
      uni.navigateTo({
        url: '/pages/newPage/newPage'
      });
    }
  }
}
</script>

uni.redirectTo

用法：uni.redirectTo({ url: '目标页面路径' })

描述：关闭当前页面，跳转到应用内的某个页面。不可返回到原页面。

示例：uni.redirectTo({ url: '/pages/login/login' })

代码语言：javascript复制
uni.redirectTo({
	url: '/pages/newPage/newPage'
});

uni.reLaunch

用法：uni.reLaunch({ url: '目标页面路径' })

描述：关闭所有页面，打开应用内的某个页面。适用于一些非常重要的页面，如应用启动页。

示例：uni.reLaunch({ url: '/pages/index/index' })

代码语言：javascript复制
uni.reLaunch({
	url: '/pages/newPage/newPage'
});

uni.switchTab

用法：uni.switchTab({ url: '目标页面路径' })

描述：跳转到应用内的某个tabBar页面，关闭其他所有非tabBar页面。

示例：uni.switchTab({ url: '/pages/home/home' })

代码语言：javascript复制
uni.switchTab({
	url: '/pages/tabBarPage/tabBarPage'
});

uni.navigateBack

用法：uni.navigateBack({ delta: 1 })

描述：返回上一级页面。参数delta表示返回的层数，默认为1。

示例：uni.navigateBack({ delta: 2 })

代码语言：javascript复制
uni.navigateBack();

$router.push

这是基于uni-simple-router做页面跳转。不推荐使用.

https://www.hhyang.cn/guide/introduction.html

注意：

一个程序中不建议同时出现小程序本身的跳转和基于uni-simple-router的跳转。

调用示例

代码语言：javascript复制
import {
  createRouter
} from '@/uni-simple-router'

const router = createRouter({
    platform:process.env.VUE_APP_PLATFORM as platformRule,
    routes:[
      // ...
    ]
})

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 跳转到原生Tabbar
router.pushTab({ name: 'tab1' })

// 关闭所有页面并打开指定页面
router.replaceAll({ name: 'my' })

// 替换当前页面栈并打开新页面
router.replace({ name: 'record' }).then(()=>{
  console.log(`导航完成`)
})

// 返回页面
router.back(1)

小程序内跳转对比

  • 参数传递： navigateTo、redirectTo、reLaunch 都支持通过 url 后面拼接参数传递数据，而 switchTab 和 navigateBack 不支持直接传递参数，需要通过其他方式实现。
  • 目的： navigateTo 用于普通页面跳转，redirectTo 用于页面重定向，reLaunch 用于关闭所有页面打开新页面，switchTab 用于切换 TabBar 页面，navigateBack 用于返回上一页。
  • 适用场景： 选择使用哪种方法取决于你的具体业务需求。如果需要保留当前页面并跳转到新页面，可以使用 navigateTo；如果需要关闭当前页面并打开新页面，可以使用 redirectTo 或 reLaunch；如果需要切换到 TabBar 页面，可以使用 switchTab；如果需要返回上一页，可以使用 navigateBack。
  • 参数传递方式： 除了 navigateTo、redirectTo、reLaunch 的 url 后面拼接参数外，也可以使用全局变量、本地存储等方式进行参数传递，这对于 switchTab 和 navigateBack 是特别有用的。

小程序内传值

跳转传值

navigateTo、redirectTo、reLaunch 的参数传递

描述：通过 query 参数传递数据到目标页面。

代码示例：

代码语言：javascript复制
//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
	url: 'test?id=1&name=uniapp'
});

获取跳转页面的参数

描述：在目标页面的 onLoad 钩子函数中通过 options 获取跳转时传递的参数。

代码示例：

代码语言：javascript复制
// 在test.vue页面接受参数
export default {
	onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		console.log(option.id); //打印出上个页面传递的参数。
		console.log(option.name); //打印出上个页面传递的参数。
	}
}

事件总线

使用uni提供的API进行页面传值，如uni.emit和uni.on。

通过事件触发和监听的方式在页面之间传递数据。

使用Uniapp的事件总线来进行组件之间的通信。在发送组件中，使用uni.emit触发一个自定义事件，并在接收组件中使用uni.on监听这个事件。

在发送组件：

代码语言：javascript复制
uni.$emit('customEvent', data);

在接收组件：

代码语言：javascript复制
uni.$on('customEvent', (data) => {
  console.log(data);
});

全局存储globalData

小程序有globalData，这是一种简单的全局变量机制。这套机制在uni-app里也可以使用，并且全端通用。

当然vue框架的全局变量，另有其他方式定义。

以下是 App.vue 中定义globalData的相关配置：

代码语言：javascript复制
<script>  
    export default {  
        globalData: {  
            text: 'text'  
        }
    }  
</script>

JS中操作globalData的方式如下：

代码语言：javascript复制
getApp().globalData.text = 'test'

在应用onLaunch时，getApp对象还未获取，暂时可以使用this.globalData获取globalData。

如果需要把globalData的数据绑定到页面上，可在页面的onShow页面生命周期里进行变量重赋值。

globalData是简单的全局变量，如果使用状态管理，请使用vuex（main.js中定义）

使用本地存储（Storage）

使用本地存储（localStorage或uni提供的存储API）将数据存储到本地，然后在另一个页面中读取。

适用于需要持久保存数据的情况。如果数据不大，你也可以将数据存储在本地存储中，然后在目标页面读取。

其中根据使用情景可以使用同步StorageSync或者异步Storage来实现。

同步：使用uni.setStorageSync和uni.getStorageSync等方法，将数据存储在本地，然后在另一个页面读取。

代码语言：javascript复制
// 在页面A中保存数据到本地存储
uni.setStorageSync('key', value);
// 在页面B中从本地存储中读取数据
const value = uni.getStorageSync('key');
console.log(value);

异步：使用uni.setStorage和uni.getStorage等方法，将数据存储在本地，然后在另一个页面读取。

代码语言：javascript复制
// 在页面A中保存数据到本地存储
uni.setStorage({
  key: 'yourDataKey',
  data: yourData,
});
// 在页面B中从本地存储中读取数据
uni.getStorage({
  key: 'yourDataKey',
  success: function (res) {
 const pageData = res.data;
  },
});

Vuex状态管理

使用Vuex进行全局状态管理，可以在一个页面中修改状态，而在另一个页面中获取最新的状态。

适用于需要在多个页面之间共享数据的情况。

如果你的应用使用了Vuex，可以在一个页面的computed属性或methods中触发commit，然后在另一个页面通过this.$store.state获取值。

在第一个页面：

代码语言：javascript复制
// 在页面中触发commit
this.$store.commit('setValue', value);

在第二个页面：

代码语言：javascript复制
// 在另一个页面获取值
const value = this.$store.state.value;
console.log(value);

小程序间跳转

uni.navigateToMiniProgram

uni.navigateToMiniProgram 用于跳转到其他小程序。

代码语言：javascript复制
uni.navigateToMiniProgram({
  appId: 'targetAppId',
  path: 'targetPath',
  extraData: {
    key: 'value'
  },
  success: function () {
    console.log('跳转成功');
  }
});

uni.redirectToMiniProgram

uni.redirectToMiniProgram 用于关闭当前小程序，跳转到其他小程序。

代码语言：javascript复制
uni.redirectToMiniProgram({
  appId: 'targetAppId',
  path: 'targetPath',
  extraData: {
    key: 'value'
  },
  success: function () {
    console.log('跳转成功');
  }
});

uni.navigateToNative

uni.navigateToNative 用于跳转到原生页面。

代码语言：javascript复制
uni.navigateToNative({
  pageName: 'targetPage',
  params: {
    key: 'value'
  }
});
存储 小程序 app 开发 数据

0 人点赞