Uniapp 篇开发实用记录

@Created o.O

已于 2023-12-27 14:20:09 修改

阅读量395

点赞数 8

分类专栏： uniapp 文章标签： vue.js 前端

于 2023-12-27 14:16:28 首次发布

本文链接：https://blog.csdn.net/liuxiongya/article/details/135243926

版权

uniapp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在日常开发小程序或者APP得过程中，我们经常会用到一些页面跳转并且携带参数跳转得情况。下面给大家分享一些比较方便的方法。

1.当我们想从A页面跳转到B页面并且携带参数时，可以采用下面这种问号带参的方式：

A页面：

autoHide(item){
	 uni.navigateTo({
			url: `/pages/manage/material/warehouseOutbound/materialOutboundatrKey=${item.atrKey}&line=${item.line}`
		})
	}

B页面：

onLoad(options) {
			console.log(options)
			this.material = options
		},

像这种，我们到B页面后用onLoad里去接收A页面传过来的值，像上面那种写法，可以通过options.的方式，拿到自己所传过来的数据。

2、在实际开发过程中，也会遇到我们在B页面执行完了某些方法后想返回到A页面，并且携带一些参数这种情况，我们可以试试下面这种方式：

B页面：

this.$api.http.post(`/web/pda/WMSLOT/callMaterialOut`, JSON.stringify(params)).then(res => {
					if (res.data.RESULT == 200) {
						uni.showToast({
							title: '出库成功',
							icon: 'none',
							duration: 3000
						})
						setTimeout(function() {
							uni.$emit('scanEvent',params)
							uni.navigateBack()
						}, 2000)
					} else {
						uni.showToast({
							title: res.data.MESSAGE,
							icon: 'none',
							duration: 3000
						})
					}
				})

A页面：

onLoad() {
			uni.$on('scanEvent', (params) => {
				console.log(params)
				this.debounceRequest()
			})
		},

像上面B页面里，我调完接口后想返回到A页面并且携带一些数据，这里我用的uni.$emit和uni.$on的写法；uni.$emit用于触发自定义事件，可以向其他组件发送消息,上面我们自定义了一个scanEvent事件，然后在A页面用uni.$on去监听这个事件，一旦事件被触发，对应的函数就会被调用。

以上就是我在开发学习过程中遇到比较方便的写法，如果有其他更好的方法，希望各位大佬指点指点