uni-app页面间通信

关于页面间跳转传值

1、使用页面路径传参
**（1）uni.navigateTo( ) / uni.redirectTo( )
参数与路径之间使用 ? 分割，参数键 与 参数值 用等号 = 相连，不同的参数用& 分割。
**（2）url 传参方式会有长度限制，太长字符串会传递失败！！！
**（3）跳转到另一页面，在onLoad 生命周期函数中 通过参数，可以获取到传递的参数

uni.navigateTo({
  url: "/pages/first/first_son?name=lxc&age=20",
})

export default {
	onLoad(option) {
		console.log(option) // {name: "lxc", age: "20"}
	},
	methods:{
		
	}
}

2、页面通信
与vue一样使用uni.$emit( ) 触发自定义事件, uni . $on ( ) 监听自定义事件。
uni . $emit 可以在任何页面触发，uni. $on 只能在全局（app.vue）中监听自定义事件。

3、全局变量
(1) 通常创建一个common目录文件，新建global.js文件，文件名自定义，定义全局变量或函数
(2) 缺点：每次都需要引入。

const URL = 'https://baidu.com'
function isArray(param) {
	return Aarry.isArray(param) || param instanceof Array 
}
export default {
	URL,
	isArray
}

引入

<script>
	import global from 'global.js' // 后边路径
	export default {
		onLoad() {
			console.log(global.URL, global.isArray([]))
		}
	} 
</script>

4、vue实例挂载

将一些使用频率较高的常量或者方法，挂载至Vue.prototype 上, 这样每个Vue实例都会继承。

注意
（1）这种方式只支持vue页面。
（2）挂载至Vue实例上的属性和方法建议做一个标记，比如前边都加上$ 符号，便于维护。
在main.js中挂载属性 或 方法：

Vue.prototype.$websiteUrl = 'https://bnaidu.com'

在.vue组件中直接使用即可：

<script>
export default {
	onLoad() {
		console.log(this.$websiteUrl)
	}
}
</script>

5、globalData
定义：
globalData是一种比较简单的全局变量使用方式。
在小程序中有globalData的概念，uni-app也实现了此功能，在App.vue可以定义globalData。
在App.vue中：

// App.vue
<script>
export default {
	globalData: {
		text: 'lxc'
	},
	methods: {
		··· ···
	}
}
</script>

赋值：

getApp().globalData.text = 'aliasName'

取值：

console.log(getApp().globalData.text) // 'aliasName'

页面渲染：
globalData的数据渲染，可以在页面的onShow生命周期进行操作。

Vuex
在Vuex中进行状态管理，这块之前的文章有讲过。