uni-app学习笔记01-项目初始化及相关文件

使用新的IDE HBuilder X uni-app官方文档快速上手

此项目创建使用vue3版本，文件结构与vue3类似

相关功能示例：

pages.json中配置路由和导航栏tabBar

javascript 复制代码

{
	"pages": [ //用于配置路由，pages数组中第一项表示应用启动页
		{
			"path": "pages/index/index", //文件路径
			"style": {
				"navigationBarTitleText": "酱梨食刻" //页面名字
			}
		},
		{
			"path" : "pages/Discover/Discover",
			"style" : 
			{
				"navigationBarTitleText" : "发现店铺"
			}
		},
		{
			"path" : "pages/Random/Random",
			"style" : 
			{
				"navigationBarTitleText" : "随机一餐"
			}
		},
		{
			"path" : "pages/Profile/Profile",
			"style" : 
			{
				"navigationBarTitleText" : "个人中心"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white", //配置窗口上方的字体颜色
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#667eea", //配置窗口上方的背景色
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {    //配置导航栏
	"selectedColor": "#667eea",//选中字体的颜色
		"list": [
			{
				"pagePath": "pages/index/index", //对应导航路径
				"text": "首页", //导航栏的名字
				"iconPath": "/static/styles/ali-iconfont/png/shouye6.png", //未选中图标路径
				"selectedIconPath": "/static/styles/ali-iconfont/active-png/shouye6.png" //选择中图标路径
			},
			{
				"pagePath": "pages/Discover/Discover",
				"text": "发现",
				"iconPath": "/static/styles/ali-iconfont/png/faxian.png",
				"selectedIconPath": "/static/styles/ali-iconfont/active-png/faxian.png"
			},
			{
				"pagePath": "pages/Random/Random",
				"text": "随机",
				"iconPath": "/static/styles/ali-iconfont/png/suijishushengcheng.png",
				"selectedIconPath": "/static/styles/ali-iconfont/active-png/suijishushengcheng.png"
			},
			{
				"pagePath": "pages/Profile/Profile",
				"text": "我的",
				"iconPath": "/static/styles/ali-iconfont/png/li.png",
				"selectedIconPath": "/static/styles/ali-iconfont/active-png/li.png"
			}
		]
	},
	"uniIdRouter": {}
}

在uvue文件中，也是由

这三部分组成，可根据习惯，将script部分移动至上方，不影响

运行至微信小程序时需要运行设置中把路径改为微信开发者工具应用程序的路径

在uni-app的模板中，view组件就类似于div，text就类似于span

配置hover-class就可以做点击时的效果

新加的组件配置一个可以滚动的区域

如果要配置横向滚动的话

需要三步 y改为x 子组件设置display:inline-block 父组件设置white-space: nowrap;

html 复制代码

<scroll-view scroll-x class="scrollView">
		<view class="box"></view>
		<view class="box"></view>
		<view class="box"></view>
		<view class="box"></view>
		<view class="box"></view>
		<view class="box"></view>
		<view class="box"></view>
		<view class="box"></view>
	</scroll-view>
<style lang="scss">
.scrollView{
		width: 750rpx;
		height: 300rpx;
		border: 1px solid pink;
		white-space: nowrap;
		.box{
			height: 200rpx;
			width: 200rpx;
			background-color: skyblue;
			border: 1px solid red;
			display: inline-block;
		}
	}
</style>

直接用的轮播图

html 复制代码

<script setup>
	const picList=[
		{id:'1',url:"https://pic2.zhimg.com/v2-d1286ae973d1ad3b94d32b45d783f4ab_r.jpg?source=1940ef5c"},
		{id:'2',url:"https://c-ssl.duitang.com/uploads/blog/202011/21/20201121154203_47c2c.thumb.1000_0.png"},
		{id:'3',url:"https://c-ssl.duitang.com/uploads/blog/202201/02/20220102144252_1e9a0.jpg"},
		{id:'4',url:"https://ts2.tc.mm.bing.net/th/id/OIP-C.QUlIh_eLkMYxBljVXO5ChgHaEo?r=0&rs=1&pid=ImgDetMain&o=7&rm=3"},
		{id:'5',url:"https://pic3.zhimg.com/v2-d96c7a9c2492de35b5e75fda2255614f_r.jpg"},
	]
</script>

<template>
	<swiper class="banner" indicator-dots autoplay>
		<swiper-item v-for="item in picList" :key="item.id">
			<image :src="item.url"></image>
		</swiper-item>
	</swiper>
	<scroll-view scroll-x class="scrollView">
		<view class="box"></view>
		<view class="box"></view>
		<view class="box"></view>
		<view class="box"></view>
		<view class="box"></view>
		<view class="box"></view>
		<view class="box"></view>
		<view class="box"></view>
	</scroll-view>
</template>

<style lang="scss">
	.banner{
		width: 750rpx;
		height: 500rpx;
		overflow: hidden;
		image{
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}
	.scrollView{
		width: 750rpx;
		height: 300rpx;
		border: 1px solid pink;
		white-space: nowrap;
		.box{
			height: 200rpx;
			width: 200rpx;
			background-color: skyblue;
			border: 1px solid red;
			display: inline-block;
		}
	}
</style>

大图预览效果

html 复制代码

<script setup>
	const picList=[
		{id:'1',url:"https://pic2.zhimg.com/v2-d1286ae973d1ad3b94d32b45d783f4ab_r.jpg?source=1940ef5c"},
		{id:'2',url:"https://c-ssl.duitang.com/uploads/blog/202011/21/20201121154203_47c2c.thumb.1000_0.png"},
		{id:'3',url:"https://c-ssl.duitang.com/uploads/blog/202201/02/20220102144252_1e9a0.jpg"},
		{id:'4',url:"https://ts2.tc.mm.bing.net/th/id/OIP-C.QUlIh_eLkMYxBljVXO5ChgHaEo?r=0&rs=1&pid=ImgDetMain&o=7&rm=3"},
		{id:'5',url:"https://pic3.zhimg.com/v2-d96c7a9c2492de35b5e75fda2255614f_r.jpg"},
	]
	
	const onPreviewImage=(url)=>{
		wx.previewImage({
			urls:picList.map(v=>v.url),
			current:url
		})
	}
</script>

<template>
	<swiper class="banner" indicator-dots autoplay>
		<swiper-item v-for="item in picList" :key="item.id">
			<image :src="item.url" @tap="onPreviewImage(item.url)"></image>
		</swiper-item>
	</swiper>
</template>

<style lang="scss">
	.banner{
		width: 750rpx;
		height: 500rpx;
		overflow: hidden;
		image{
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}
</style>