uniapp中基于vue3.0的简单使用_uni-app vue3.0

index.vue

<template>
	<view class="home-wrap">
		首页{{store.state.user.name}}
		<view @click="goDetailHandle('ok')">查看详情</view>
		<mz-item-line name='gsddgsgds'></mz-item-line>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from "vue"

	import {
		useStore
	} from "vuex";
	/**
	 * 在 Vue3 组合式 API 中，也需要遵循 uni-app 生命周期钩子规范，
	 * **/
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app"
	const {
		appContext
	} = getCurrentInstance();
	const store = useStore();
	console.log("[miao]", store.state.user.name);
	/**
	 * 接口请求参数
	 * **/
	const queryObject = reactive({
		limit: 10,
		page: 1,
		keyword: ""
	})
	console.log(queryObject)
	initFunction(queryObject);
	/**
	 * 监听页面加载
	 * **/
	onLoad((options) => {
		console.log("[options]", options)
		queryObject['page'] = 2;
		initFunction(queryObject);
	});
	/**
	 * 监听页面显示，页面每次出现在屏幕上都会触发
	 * **/
	onShow(() => {
		console.log("[onShow]")
	});
	/**
	 * 监听用户下拉动作
	 * **/
	onPullDownRefresh(() => {
		console.log("ok")
		queryObject['page'] = 3;
		initFunction(queryObject);
		setTimeout(() => {
			uni.stopPullDownRefresh()
		}, 1000)
	});
	/**
	 * 上拉加载更多：页面滚动到底部触发事件
	 * **/
	onReachBottom((e) => {
		console.log("[上拉加载更多]")
		queryObject['page'] = 4;
		initFunction(queryObject);
	})

	/**
	 * 初始化页面
	 * **/
	function initFunction(params) {
		console.log("[asd]", params)
	}
	/**
	 * 查看详情
	 * **/
	function goDetailHandle(row) {

		console.log(row, appContext.config.globalProperties.$http)
		console.log(uni.$miao)
		uni.navigateTo({
			url: "/pages/detail/detail?id=123&code=m"
		})
	}
</script>

<style lang="scss" scoped>
	.home-wrap {
		border: 1px solid red;
		width: $mzWidth;
		margin: 12px auto;
		display: flex;
		flex-direction: column;
		min-height: 1200px;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

detail.vue

<template>
	<view>
		
	</view>
</template>

<script setup>
	/**
	 * 在 Vue3 组合式 API 中，也需要遵循 uni-app 生命周期钩子规范，
	 * **/
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app"
	
	
	onLoad((options)=>{
		console.log("[ options]",options)
	})
</script>

<style lang="scss" scoped>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

main.js

import App from './App'
import store from "./store"


import {
	createSSRApp
} from 'vue'

export function createApp() {
	const app = createSSRApp(App)
	app.config.globalProperties.$http = 'miao'
	uni.$miao = 'mzz'
	app.use(store)
	return {
		app
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

uniapp官网