使用vue3实现一个uniApp页面

这是我参与2022首次更文挑战的第19天，活动详情查看：2022首次更文挑战」

使用vue3实现一个页面

通过HbuildX创建项目，mainfest.json配置中选择vue的版本3.

main.js 使用vue3创建app

import App from './App'
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}

pages/index/index.vue页面

通过setup return 定义页面对象数据。

页面监听直接写在 export default 下面

<template>
	<view class="container">
		<!-- 小程序头部兼容 -->
		<!-- #ifdef MP -->
		<view class="mp-search-box">
			<input class="ser-input" type="text" value="输入关键字搜索" disabled />
		</view>
		<!-- #endif -->

		<!-- 头部轮播 -->
		<view class="carousel-section">
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!-- 背景色区域 -->
			<view class="titleNview-background" :style="{backgroundColor:titleNViewBackground}"></view>
			<swiper class="carousel" circular @change="swiperChange" :autoplay="true">
				<swiper-item v-for="item in carouselList" class="carousel-item">
					<image :src="item.src"></image>
				</swiper-item>

			</swiper>

			<!-- 自定义swiper指示器 -->
			<view class="swiper-dots">
				<text class="num">{{swiperCurrent+1}}</text>
				<text class="sign">/</text>
				<text class="num">{{swiperLength}}</text>
			</view>
		</view>
		<!-- 分类 -->
		<view class="cate-section">
			<view class="cate-item">
				<image src="/static/temp/c3.png"></image>
				<text>环球美食</text>
			</view>
			<view class="cate-item">
				<image src="/static/temp/c5.png"></image>
				<text>个护美妆</text>
			</view>
			<view class="cate-item">
				<image src="/static/temp/c6.png"></image>
				<text>营养保健</text>
			</view>
			<view class="cate-item">
				<image src="/static/temp/c7.png"></image>
				<text>家居厨卫</text>
			</view>
			<view class="cate-item">
				<image src="/static/temp/c8.png"></image>
				<text>速食生鲜</text>
			</view>
		</view>

		<view class="ad-1">
			<image src="/static/temp/ad1.jpg" mode="scaleToFill"></image>
		</view>

	</view>
</template>

<script lang="ts">
	import {
		request
	} from '@/util/request'
	import {
		ref,
		reactive,
		toRefs
	} from 'vue'
	
	export default {

		setup(){
			const title = ref('Hello')
			const titleNViewBackground = ref('');
			const swiperCurrent = ref(0);
			const swiperLength = ref(0);
			
			const carouselList = ref([])
			
			
			const loadData = async () => {
				let data = await request('carouselList');
				titleNViewBackground.value = data[0].background;
				carouselList.value = data
				swiperLength.value = data.length;
			}
			
			const swiperChange = (e) => {
				const index = e.detail.current;
				swiperCurrent.value = index;
				titleNViewBackground.value = carouselList.value[index].background;
			}
			
			const navToDetailPage = (item) => {
				//测试数据没有写id，用title代替
				let id = item.title;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			}
			
			
			loadData();
			
			return {
				title,
				titleNViewBackground,
				swiperCurrent,
				swiperLength,
				carouselList,
				loadData,
				swiperChange,
				navToDetailPage
			}
		},
		
		// #ifndef MP
		// 标题栏input搜索框点击
		onNavigationBarSearchInputClicked: async function(e) {
			// this.$api.msg('点击了搜索框');
			console.log('点击了搜索框')
		},
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				console.log('点击了扫描')
			} else if (index === 1) {
				console.log('点击了通知')
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				// uni.navigateTo({
				// 	url: '/pages/notice/notice'
				// })
			}
		}
		// #endif
		
	
	}
</script>

样式

<style>
/* 头部 轮播图 */
	.carousel-section {
		position: relative;
		padding-top: 10px;

		.titleNview-placing {
			height: var(--status-bar-height);
			padding-top: 44px;
			box-sizing: content-box;
		}

		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 426upx;
			transition: .4s;
		}
	}

	.carousel {
		width: 100%;
		height: 350upx;

		.carousel-item {
			width: 100%;
			height: 100%;
			padding: 0 28upx;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
			border-radius: 10upx;
		}
	}

</style>

Vue3 兼容vue2，在开发页面上除了语法不一致外其他内容基本一致。 uniApp对vue3的支持并不是十分完善，通过vueCli 创建的工程在适配方面存在一些问题，比如tabBar的处理。