uni-app(二)

最新推荐文章于 2024-01-16 11:45:14 发布

KIKIo_

最新推荐文章于 2024-01-16 11:45:14 发布

阅读量377

点赞数

分类专栏： uni-app 文章标签： uni-app javascript vue.js

本文链接：https://blog.csdn.net/weixin_46738453/article/details/129271379

版权

uni-app 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

1、生命周期

在这里插入图片描述

 <script>
	export default {
		data() {
			return {
				msg: '我是data定义的数据'
			};
		},
		// 1.页面的生命周期
		onLoad(options) {
			console.log('detail04 onLoad');
		},
		onShow() {
			console.log('detail04 onShow');
			console.log(this);
		},
		onReady() {
			console.log('detail04 onReady');
		},
		onHide() {
			console.log('detail04 onHide');
		},
		onUnload() {
			console.log('detail04 onUnload');
		},
		onPullDownRefresh() {
			console.log('detail04 onPullDownRefresh');
			setTimeout(() => {
				// 关闭下拉刷新的图标
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onReachBottom() {
			console.log('detail04 onReachBottom');
		},
		// 2.Vue组件的生命周期
		beforeCreate() {
			console.log('detail04 beforeCreate');
		},
		created() {
			console.log('detail04 created');
		},
		beforeMount() {
			console.log('detail04 beforeMount');
		},
		mounted() {
			console.log('detail04 mounted');
		},
		beforeDestroy() {
			console.log('detail04 beforeDestroy');
		},
		destroyed() {
			console.log('detail04 destroyed');
		}
	}
</script>

ript setup>
	import { ref, onBeforeMount, onMounted } from 'vue'
	import {
		onLoad,
		onShow,
		onReady,
		onHide,
		onUnload,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app'
	
	// 1.页面的生命周期
	onLoad(() => {
		console.log('detail05 onLoad');
	})
	
	onShow(() => {
		console.log('detail05 onShow');
	})
	
	onReady(() => {
		console.log('detail05 onReady');
	})
	
	onHide(() => {
		console.log('detail05 onHide');
	})
	
	onUnload(() => {
		console.log('detail05 onUnload');
	})
	
	onPullDownRefresh(() => {
		console.log('detail05 onPullDownRefresh');
		setTimeout(() => {
			uni.stopPullDownRefresh()
		}, 1000)
	})
	
	onReachBottom(() => {
		console.log('detail05 onReachBottom');
	})
	
	// 2.Vue组件的生命周期
	onBeforeMount(() => {
		console.log('detail05 onBeforeMount');
	})
	onMounted(() => {
		console.log('detail05 onMounted');
	})
	
</script>

2、页面路由

在这里插入图片描述

<template>
	<view class="content">
		<view class="">1.路由(组件)</view>
		<navigator url="/pages/detail01/detail01" open-type="navigate">
			<button type="default">01-detail navigate</button>
		</navigator>
		
		<navigator url="/pages/detail01/detail01" open-type="redirect">
			<button type="default">02-detail redirect</button>
		</navigator>
		
		<navigator url="/pages/category/category" open-type="switchTab">
			<button type="default">03-category</button>
		</navigator>
		
		<view class="">2.路由(API)</view>
		<button type="default" @click="goToDetail01()">04-detail navigate</button>
		<button type="default" @click="goToDetail02()">04-detail redirect</button>
		<button type="default" @click="goToDetail03()">04-detail switchTab</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		// 1.页面的生命周期
		onLoad() {
			console.log('home onLoad');
		},
		onShow() {
			console.log('home onShow');
		},
		onReady() {
			console.log('home onReady');
		},
		onHide() {
			console.log('home onHide');
		},

		onPullDownRefresh() {
			console.log('home onPullDownRefresh');
		},
		onReachBottom() {
			console.log('home onReachBottom');
		},
		
		
		// 2.组件的生命周期
		beforeCreate() {
			
		},
		created() {
			
		},
		methods: {
			acceptDataFromDetail03(value) {
				console.log('这是从detail03传递过来的数据:', value);
			},
			goToDetail01() {
				uni.navigateTo({
					url: "/pages/detail01/detail01"
				})
			},
			goToDetail02() {
				uni.redirectTo({
					url: "/pages/detail01/detail01"
				})
			},
			goToDetail03() {
				uni.switchTab({
					url: "/pages/category/category"
				})
			},
			goToDetail04() {
				uni.navigateTo({
					url: "/pages/detail01/detail01?name=liujun&id=200",
					success(res) {
					    // 通过eventChannel向被打开页面传送数据
					    res.eventChannel.emit('acceptDataFormHomePage', { 
							data: '我是从Home Page 传递过来的数据' ,
						})
					}
				})
			},
			goToDetail05() {
				uni.navigateTo({
					url: "/pages/detail02/detail02?name=liujun&id=400",
				})
			},
			goToDetail06() {
				uni.navigateTo({
					url:'/pages/detail03/detail03'
				})
			},
			goToDetail07() {
				uni.navigateTo({
					url:'/pages/detail04/detail04'
				})
			},
			goToDetail08() {
				uni.navigateTo({
					url:'/pages/detail05/detail05'
				})
			}
		}
	}
</script>

<style>
	
</style>

3、页面间通讯

3.1 正向数据传递

在这里插入图片描述

3.2 逆向数据传递

在这里插入图片描述

<template>
	<view>
		<navigator :delta="1" open-type="navigateBack">
			<button type="default" >返回(组件)</button>
		</navigator>
		<button type="default" @click="goBackHome">返回(API)</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		onLoad(options) {
			console.log('接受url传递过来的数据:', options);
		},
		methods: {
			goBackHome() {
				uni.navigateBack({
					delta: 1
				})
				
				// 触发一个全局的事件( 在触发事件之前一定要先监听 )
				uni.$emit('acceptDataFromDetail03', {
					data: {
						desc: '这个在detail03传递到Home页面的数据'
					}
				})
				
				
			}
		}
		
	}
</script>

<style lang="scss">

</style>

在这里插入图片描述

3.3 事件总线

在这里插入图片描述

<template>
	<view>
		<navigator :delta="1" open-type="navigateBack">
			<button type="default" >返回(组件)</button>
		</navigator>
		<button type="default" @click="goBackHome">返回(API)</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		onLoad(options) {
			console.log('接受url传递过来的数据:', options);
		},
		methods: {
			goBackHome() {
				uni.navigateBack({
					delta: 1
				})
				
				// 触发一个全局的事件( 在触发事件之前一定要先监听 )
				uni.$emit('acceptDataFromDetail03', {
					data: {
						desc: '这个在detail03传递到Home页面的数据'
					}
				})
				
				
			}
		}
		
	}
</script>

<style lang="scss">

</style>

在这里插入图片描述

4、网络请求的封装

server/index.js

const TIME_OUT = 60000
const BASE_URL = 'http://152.136.185.210:7878/api/hy66'

class HYRequest{
	request(url,methods,data) {
		return new Promise((resolve,reject)=>{
			uni.request({
				url:BASE_URL + url,
				method:methods || 'GET',
				timeout:TIME_OUT,
				data:data,
				success(res) {
					resolve(res.data)
				},
				fail(err){
					reject(err)
				}
				
			})
		})
	}
	
	get(url,params) {
		return this.request(url,'Get',params)
	}
	
	post(url,params){
		return this.request(url,'POST',params)
	}
}
export default HYRequest()

在这里插入图片描述

5、数据缓存

在这里插入图片描述

6、组件

6.1 组件生命周期

在这里插入图片描述

7、页面传递参数 setup

7.1 正向传递数据

在这里插入图片描述

<template>
	<view>
		{{props.name}}
	</view>
</template>

<script setup>
	import {ref,getCurrentInstance} from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	
	// 方式1： navigate
	onLoad(options=>{
		console.log('接收home传递的参数',options)
	})
	
	// 方式2: props
	const props = defineProps({
		name:String,
		age:Number
	})
	
	// 方式3.通过emit
	const $instance = ref(getCurrentInstance().proxy)
	onLoad(options=>{
		const eventChannel = $instance.value.getOpenerEventChannel()
		eventChannel.on('emitHome2Detail',(res)=>{
			console.log(res)
		})
	})
	
</script>

<style lang="scss">

</style>

在这里插入图片描述

7.2 逆向传递数据

<template>
	<view>
		<button type="default" @click="goBack">返回</button>
	</view>
</template>

<script setup>
	import {
		getCurrentInstance,
		ref
	} from 'vue'
 
	const $instance = ref(getCurrentInstance().proxy) // this 
 
	function goBack() {
		uni.navigateBack({
			delta: 1
		})
		const eventChannel = $instance.value.getOpenerEventChannel()
		// 触发事件, 将detail02的数据传递给Home页面
		eventChannel.emit('acceptDataFormDetail02', {
			data: '这里是detail02传递给Home页面的数据'
		})
	}
</script>

<style lang="scss">

</style>

在这里插入图片描述

7.3 逆向传递事件总线

<template>
	<view>
		<button type="default" @click="goBack">返回</button>
	</view>
</template>

<script setup> 

	function goBack() {
		uni.navigateBack({
			delta: 1
		})
		
		// 触发事件( 通过事件总线 )
		uni.$emit('acceptDataFormDetail03', {
			data: '这里的数据是从detail03传递到home页面'
		})
	}
	
</script>

<style lang="scss">

</style>