微信小程序（uniapp）页面之间通信

前言

开发微信小程序，页面与页面之间少不了数据通信，一起来看看有哪些方法。

---

以下是本篇文章正文内容，下面案例可供参考

一、跳转路径?拼接参数

适合数据量小的情况，如数据量大的情况不建议此方式。注意：如传递了number类型数据，接收回来的数据会转换成string类型

/** A.vue **/
<script>
methods: {
	goRouter(){
		uni.navigateTo({
			url: `/pages/index/test?data=123&title=A页面&source=1`
		})
	}
}
</script>


/** B.vue **/
<script>
onLoad(option) {
	console.log(option) // {data: "123", title: "A页面"，source: "1"}
}
</script>

二、通过eventChannel事件进行通信

适合数据量大的情况。注意：此类方法如果不通过A页面直接跳转B页面会报错

/** A.vue **/
<script>
methods: {
	goRouter(){
		uni.navigateTo({
			url: `/pages/index/test`,
			success: function(res) {
   			 	res.eventChannel.emit('pageData', {data: 123, title: "A页面"，source: 1, content: "点个赞点个赞，求求了"})
  			}
		})
	}
}
</script>


/** B.vue **/
<script>
onLoad(option) {
  const eventChannel = this.getOpenerEventChannel();
  // eventChannel.on监听，获取上一页面通过eventChannel事件传送的数据
  eventChannel.on('pageData', data=> {
    console.log(data) // {data: 123, title: "A页面"，source: 1, content: "点个赞点个赞，求求了"}
  })
}
</script>

三、通过缓存方式传递数据（不推荐）

此类方法虽简单适用所有页面，但一般不推荐使用该方法。

/** A.vue **/
<script>
methods: {
	goRouter(){
		uni.setStorageSync('pageData', {data: 123, title: "A页面"，source: 1, content: "点个赞点个赞，求求了"})
		uni.navigateTo({
			url: `/pages/index/test`
		})
	}
}
</script>


/** B.vue **/
<script>
onLoad() {
  const data = uni.getStorageSync('pageData');
  console.log(data) // {data: 123, title: "A页面"，source: 1, content: "点个赞点个赞，求求了"}
}
</script>

四、Vuex全局通信

/** A.vue **/
<script>
import {
	mapMutations
} from 'vuex';
methods: {
	...mapMutations(['setDataInfo']),
	goRouter(){
		this.setDataInfo({data: 123, title: "A页面"，source: 1, content: "点个赞点个赞，求求了"})
		uni.navigateTo({
			url: `/pages/index/test`
		})
	}
}
</script>


/** B.vue **/
<script>
import {
	mapState
} from 'vuex';
onLoad() {
  console.log(this.pageData); // {data: 123, title: "A页面"，source: 1, content: "点个赞点个赞，求求了"}
},
computed: {
	...mapState({
		pageData: state => state.page.pageInfo
	})
},
</script>

五、globalData

/** App.vue **/
<script>
globalData: {
	data: 123,
	title: "A页面",
	source: 1,
	content: "点个赞点个赞，求求了"
}
</script>


/** B.vue **/
<script>
onLoad() {
  console.log(this.globalData.data) // 123
  console.log(this.globalData.title) // "A页面"
  console.log(this.globalData.source) // 1
  console.log(this.globalData.content) // "点个赞点个赞，求求了"
}
</script>

六、子页面向父页面传递数据

通过uni.$emit事件订阅传递数据，uni.$on监听接收数据。

/** B.vue **/
<script>
methods: {
	back() {
		uni.$emit('pageData', {data: 123, title: "B页面"，source: 1, content: "点个赞点个赞，求求了"});
		uni.navigateBack({
			delta: 1
		});
	}
}
</script>


/** A.vue **/
<script>
onLoad() {
  uni.$on('pageData', data => {
	console.log(data) // {data: 123, title: "B页面"，source: 1, content: "点个赞点个赞，求求了"}
  })
}
</script>

总结

本文简单介绍了微信小程序页面之间数据通信，若有其他更好的通信方式，欢迎评论区补充。