当前位置:   article > 正文

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

uni-app vue3.0

uniapp中基于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官网

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/很楠不爱3/article/detail/481388
推荐阅读
相关标签
  

闽ICP备14008679号