Uni-app的学习Ⅳ（导航跳转、组件的创建、uni-ui使用）

一、导航跳转

利用navigator进行跳转

文档地址

跳转到普通页面

// navigate方式
<navigator url="/pages/about/about">	// navigate只能跳转到非tabbar页面,可以回退到以前的页面
  <button type="default">跳转到关于页面</button>
</navigator>

// redirect方式
<navigator url="/pages/about/about" open-type="redirect">	// redirect只能跳转到非tabbar页面，不能回退到以前的页面，因为该页面已被unload
  <button type="default">跳转到关于页面</button>
</navigator>

跳转到tabbar页面（配合switchTab使用）

<navigator url="/pages/message/message" open-type="switchTab">	// switchTab只能用于tabbar的跳转
  <button type="default">跳转到message页面</button>
</navigator>

利用编程式导航进行跳转

导航跳转文档

利用navigateTo进行导航跳转

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

<button type="primary" @click="goAbout">跳转到关于页面</button>

通过navigateTo方法进行跳转到普通页面

goAbout () {
  uni.navigateTo({				// 页面跳转，与navigator的navigate类似（用于普通页面）
    url: '/pages/about/about',
  })
}

通过switchTab跳转到tabbar页面

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

<button type="primary" @click="goMessage">跳转到message页面</button>

通过switchTab方法进行跳转

goMessage () {
  uni.switchTab({		// 与switchTab类似（用于tabbar页面）
    url: '/pages/message/message'
  })
}

redirectTo进行跳转

关闭当前页面，跳转到应用内的某个页面。

<!-- template -->
<button type="primary" @click="goMessage">跳转到message页面</button>

<!-- js -->
goMessage () {
  uni.redirectTo({			// 与redirectTo类似（用于tabbar页面）
    url: '/pages/message/message'
  })
}

通过onUnload测试当前组件确实卸载

onUnload () {
  console.log('组件卸载了')
}

导航跳转传递参数

在导航进行跳转到下一个页面的同时，可以给下一个页面传递相应的参数，接收参数的页面可以通过onLoad生命周期进行接收

传递参数的页面

goAbout () {
  uni.navigateTo({				// 作用于普通页面
    url: '/pages/about/about?id=80',
  });
}

接收参数的页面

<script>
	export default {
		onLoad (options) {			// 在onLoad函数的options里面传递上个页面（普通页面）参数
			console.log(options)
		}
	}
</script>

二、组件的创建

在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过impot的方式导入，在通过components进行注册即可

• 创建login组件，在component中创建test目录，然后新建Test.vue文件

  <template>
  	<view>
  		这是一个自定义组件
  	</view>
  </template>
  
  <script>
  </script>
  
  <style>
  </style>
  

• 在其他组件中导入该组件并注册

  import login from "@/components/test/Test.vue"
  

• 注册组件

  components: {Test}
  

• 使用组件

  <test></test>
  

组件的生命周期函数

beforeCreate	在组件初始化之后被调用。详见
created	在组件创建完成后被立即调用。详见
beforeMount	在组件挂载开始之前被调用。详见
mounted	挂载组件到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见	仅H5平台支持
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见	仅H5平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见

组件的通讯

父组件给子组件传值

通过props来接受外界传递到组件内部的值

<template>
	<view>
		这是一个自定义组件 {{msg}}
	</view>
</template>

<script>
	export default {
		props: ['msg']
	}
</script>

<style>
</style>

其他组件在使用Test组件的时候传递值

<template>
	<view>
		<test :msg="msg"></test>
	</view>
</template>

<script>
	import test from "@/components/test/Test.vue"
	export default {
		data () {
			return {
				msg: 'hello'
			}
		},
		
		components: {Test}
	}
</script>

子组件给父组件传值

通过**$emit**触发事件进行传递参数

<template>
	<view>
		这是一个自定义组件 {{msg}}
		<button type="primary" @click="sendMsg">给父组件传值</button>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				status: '打篮球'
			}
		},
		props: {
			msg: {
				type: String,
				value: ''
			}
		},
		methods: {
			sendMsg () {
				this.$emit('myEvent',this.status)
			}
		}
	}
</script>

父组件定义自定义事件并接收参数

<template>
	<view>
		<test :msg="msg" @myEvent="getMsg"></test>
	</view>
</template>
<script>
	import test from "@/components/test/Test.vue"
	export default {
		data () {
			return {
				msg: 'hello'
			}
		},
		methods: {
			getMsg (res) {
				console.log(res)
			}
		},
		
		components: {Test}
	}
</script>

兄弟组件通讯

// 方法类似于子组件给父组件通信，不过是用的uni而不是this
uni.$emit('eventName', this.params)
uni.$on('eventName', (res) => {console.log(res)})	// 在created监听即可

三、uni-ui的使用

官方传送门

例如：使用Grid宫格组件

1、找到需要的Grid宫格组件

2、使用HBuilderX导入该组件

3、在项目中导入该组件

import uniGrid from "@/components/uni-grid/uni-grid.vue"
import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"

4、注册组件

components: {uniGrid,uniGridItem}

5、使用组件

<uni-grid :column="3">
  <uni-grid-item>
    <text class="text">文本</text>
  </uni-grid-item>
  <uni-grid-item>
    <text class="text">文本</text>
  </uni-grid-item>
  <uni-grid-item>
    <text class="text">文本</text>
  </uni-grid-item>
</uni-grid>