uni-app学习心得

随着移动互联网的飞速发展，跨平台应用开发的需求日益增长。uniapp作为一种使用Vue.js开发所有前端应用的框架，因其便捷性和高效性受到了广大开发者的青睐。我经过一段时间的学习和实践，对uniapp有了更深入的了解，下面是我的—些学习心得。
在学习uniapp的过程中，我首先了解了其基本的概念和特性。uniapp通过编译到不同的平台来生成对应平台的原生应用，这大大简化了跨平台开发的复杂性。同时，它兼容多端运行，无论是iOS还是Android，甚至是Web端，都能轻松应对。这种统一的开发方式不仅提高了开发效率，也降低了维护成本。
在学习过程中，我遇到了不少挑战。其中最大的挑战在于理解并掌握uniapp的组件和API。这些组件和API是实现各种功能的关键，但它们的种类繁多，且在不同平台上的表现也可能存在差异。为了克服这些困难，我反复查阅官方文档，参与社区讨论，通过实践不断加深理解。

以下是我在学习过程中的自我练习：

1.这是一个购物小程序，没有过多完善，只做了基本的主页内容

<template>
	<view class="content">
		<uni-swiper-dot :dots-styles="dotsStyles" :info="bannerList" :current="current" field="content" :mode="mode">
			<swiper class="swiper-box" @change="change">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<view class="swiper-item">
						<image :src="item.url" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<u-sticky bgColor="#fff">
			<u-tabs :list="tabs"></u-tabs>
		</u-sticky>
		<view class="List">
			<uni-list v-for="(item,index) in list" :key="item.id">
				<view class="good">
					<view class="left">
						<image class="img" :src="item.goodImg" mode=""></image>
					</view>
					<view class="right">
						<view class="name">{
  {item.goodName}}</view>
						<text class="price" style="color: red;">{
  {item.goodPrice}}元</text>
						<text class="sold">已售{
  {item.goodSold}}件</text>
					</view>
				</view>
			</uni-list>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return{
				list:[],
				bannerList:[],
				current:0,
				mode:'round',
				dotsStyles:{
					selectedBackgroundColor:"#ffffff",
					selectedBorder:"#ffffff"
				},
				tabs:[{
					name:'全部',
				},{
					name:'母婴',
				},{
					name:'图书'
				}]
			}
		},
		onLoad() {
			this.getBanner();
			this.getList();
		},
		methods: {
			change(e) {
				this.current=e.detail.current;
			},
			getBanner() {
				uni.request({
					url:"http://106.52.94.26:9088/MobileShop/carousel",
					method:'GET',
					success: (res) => {
						console.log(res);
						this.bannerList=res.data
					}
				})
			},
			getList() {
				uni.request({
					url:"http://106.52.94.26:9088/MobileShop/goods",
					method:'GET',
					success: (res) => {
						console.log((res));
						this.list=res.data.sort((a,b) => a.id-b.id);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		.swiper-box{
			image{
				width: 100%;
			}
		}
		/deep/ .u-tabs__wrapper__nav__item{
			flex: 1;
		}
		.List{
			.good{
				 display: flex;
				 align-items: center;
			}
			  .left{
					.img{
						width: 250rpx;
						height: 290rpx;
					}
			 }
			 .right{
				 .name{
					 margin-top: 10rpx;
					 font-size: 30rpx;
					 margin-bottom: 15rpx;
				 }
				 .price{
					 font-size: 30rpx;
					 margin-right: 15rpx;
				 }
				 
			 }
			 
		}
		
	}
</style>

效果图： 

以上为主页内容，其他当时还在学习，没来及的 做更多 

2.这次是一个电影小程序，依旧只做了主页和详情页练手

<template>
    <!-- template里面的跟标签只能有一个 -->
	<view class="index">
		<view class="search">
			<text class="iconfont icon-search"></text>
			<text @tap="ToSearch()">搜索电影、电视、综艺等</text>
		</view>
		<!-- 轮播图 -->
		<swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<image src="../../static/di.jpg" mode=""></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/img/user/avatar.jpg" mode=""></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/di.jpg" mode=""></image>
			</swiper-item>
		</swiper>
		<!-- <navigator open-type="switchTab" url="/pages/my/my">跳转</navigator> -->
		<!-- <navigator open-type="navigate" url="/pages/search/search">跳转</navigator> -->
		
		<!-- <button @tap="ToSearch">跳转到搜索页面</button> -->
		<!-- <button @tap="ToMy">跳转到我的页面</button> -->
		<view class="movie">
			<view class="title">
				电影
			</view>
			<view class="list">
				<view class="item" @tap="ToDetail(item.id)" v-for="(item,index) in list" :key="item.id">
					<image class="img" :src="item.imgUrl" mode=""></image>
					<text>{
  {item.title}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//import "../../common/js/index.js"
	// import movie from"../../common/js/movies.js"
	export default {
		data() {
			return {
				list:[],
				bannerlist:[]
			}
		},
		onLoad() {
				// this.list=movie;
				// console.log(this.list)
				this.getList();
				this.getBannerList();
		},
		methods: {
			ToSearch(){
				uni.navigateTo({
					url:"/https/blog.csdn.net/pages/search/search"
				})
			},
			ToMy(){
				uni.switchTab({
					url:"/https/blog.csdn.net/pages/my/my"
				})
			},
			ToDetail(id){
				uni.navigateTo({
					url:`/pages/movie-detail/movie-detail?id=${id}&name=list&age=18`
				})
			},
			getBannerList(){
				uni.request({
					url:"http://106.52.94.26:9088/movies/carousel",
					method:'GET',
					success: (res) => {
						console.log(res);
						this.bannerlist=res.data.data;
					}
				})
			},
			getList(){
				uni.request({
					url:"http://106.52.94.26:9088/movies/list",
					method:'GET',
					success: (res) => {
						console.log(res);
						this.list=res.data.data;
					}
				})
			}
	}
}
</script>

<style lang="scss">
	/* @import url("@commons/index.css"); */
	/* 新的尺寸单位 rpx */
	.movie{
			margin: 10px;
			
			.title{
				color: #0a9d14;
				font-size: 40rpx;
				margin-bottom: 10px;
			}
			.list{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.item{
					width: 32%;
					text-align: center;
					margin-bottom: 10px;
					image{
						width: 100%;
						height: 300rpx;
						border-radius: 8px;
					}
					text{
						color:#6b6b6b
					}
				}
			}
		}
	.search{
		background-color: #f2f2f2;
		height: 75rpx;
		line-height: 75rpx;
		border-radius: 10rpx;
		margin: 20rpx 30rpx;
	}
	.search .iconfont{
		margin: 0 8px;
	}
	.banner{
		height: 220px;
	}
	.banner image{
		width: 100%;
		height: 220px;
	}
</style>

主页效果图： 

这是详情页内容;

<template>
	<view class="detail">
		<view class="bg" :style="'background-image: url('+detail.imgUrl+')'"></view>
		<view class="big-box">
			<image :src="detail.imgUrl" mode=""></image>
			<view class="introduction">
				<view>{
  {detail.title}}</view>
				<view>{
  {detail.years}}/{
  {detail.area}}</view>
				<view>{
  {detail.director}}/{
  {detail.actor}}</view>
			</view>
			<!-- 剧情简介 -->
			<view class="introduce">
				<view class="title">
					剧情简介:
				</view>
				<view class="desc">
					<text v-if="isShowAll">{
  {detail.desc}}</text>
					<text v-else>{
  {detail.desc.substr(0,85)}}...</text>
					<text v-if="isShowAll" @tap="isShowAll=false" style="color: blue;">收起</text>
					<text v-else @tap="isShowAll=true" style="color: blue;">全文</text>
				</view>
			</view>
			<!-- 播放源 -->
			<view class="source">
				<view class="title"