学习uniapp心得

作为一个移动端应用程序开发者，UniApp框架是一个非常有用的工具。UniApp框架是一个跨平台的开发框架，它可以帮助我们快速和简便地开发出可以在多个平台运行的应用程序。在学习UniApp课程期间，我学习了诸多关于移动端应用程序开发的知识和技能。本文将对UniApp框架的知识点和在这个课程中学到的技能进行总结。

首先，让我们来简要了解一下UniApp的基本知识。UniApp框架基于Vue.js和uni-app扩展库构建，允许我们使用一个代码库来构建可以在多个平台上使用的应用程序。UniApp框架支持的平台包括传统的小程序（微信/支付宝/钉钉等）、H5、iOS、安卓以及桌面端等。这极大地扩大了应用程序开发的范围，让开发者们可以更加便捷地开发出可以在各个平台上运行的应用程序，并且在各个平台上保持一致的用户体验。

接下来，我们将深入学习UniApp框架，并学习如何使用这个框架来开发出不同种类的应用程序。UniApp框架中有几个核心的组件和API，如页面布局、路由、组件和数据绑定等。了解这些知识点对我们的开发应用程序会很有帮助。

在UniApp框架中，应用程序通常是以页面为单位构建，一个页面包含了相应的HTML、CSS和JavaScript代码。与Vue.js一样，UniApp中也支持组件化开发，我们可以将页面中的特定部分编写为组件，以便在其他页面中重用。这样做可以减少重复代码的数量，提高代码的复用性和可维护性。UniApp中的路由机制允许我们根据不同的页面路径来加载对应的页面，这样我们就可以通过URL来访问和导航不同的页面。

UniApp中的组件非常类似于Web开发中的组件，包括页面布局、表单标签、语义标签等，这些组件具有基本的样式和属性。除此之外，UniApp还提供了许多的扩展组件，如uni-ui等，这些组件可以提供更具体的功能和样式设计。我们可以使用这些组件来快速创建出高质量的应用程序，这样我们就能够将更多的精力投入应用程序的业务逻辑和交互设计中。

另一个非常有用的功能是数据绑定。在UniApp中，我们可以将数据绑定到页面上的元素中，并以此来改变元素的属性或内容。这种绑定是双向的，这意味着当变量更新时，对应的元素也会立即更新。这个功能在处理复杂的应用程序时非常有用，它可以将我们从手动更新UI中解放出来，从而更专注于应用程序的其他方面。

除了以上提到的知识点，UniApp框架还有许多其他的高级功能和API。我们可以使用这些功能来实现一些特定的业务需求，如网络请求、访问本地数据和个人身份验证等。同时，我们也可以使用UniApp的插件来扩展其功能，这样我们就能够更好地适应不断变化的技术和业务需求。

在UniApp课程的实际编程过程中，我们将此类知识点付诸实践。在

这个课程中，我通过实际的代码练习，深入地学习了UniApp框架的使用和最佳实践。我们在课程中开发了多个不同类型的应用程序，包括日历、音乐播放器、电子商务应用程序等。对于每个案例，我们都深入学习了整个的开发流程和应用程序实现的细节。

通过参与这些实际的项目开发，我收获了很多宝贵的经验和技能。首先，我学会了如何使用Vue.js和uni-app扩展库来构建一个成功的UniApp应用程序。我学习了与Vue.js结合使用的HTML和CSS基础，这是我实现可靠和美观UI必不可少的基础技能。学习了Vue.js和uni-app的API，使我能够理解和使用这些组件和工具，来快速构建高质量的应用程序。

此外，我们还学习了如何调试和优化UniApp应用程序。我们使用了Chrome的Devtool来排查问题，并学习了如何测试和微调UI布局和响应式设计。我们还学会了如何检查代码效率和优化内存使用，从而更好地支持我们的应用程序。这些内容是非常重要和及时的，它们为我们提供了创建和维护可靠和高效的应用程序的必要技能。

更重要的是，通过UniApp课程，我学习了一些实际工作中的最佳实践技巧。例如，如何建立和组织一个完整的项目，如何使用版本控制系统来跟踪项目的变化，以及如何规划代码编写流程和记录重要的设计决策。这些最佳实践技巧会帮助我在将来的工作中更好地组织和管理我的工作流程，从而提高生产力并减少可能的错误。

总结一下，参加 UniApp 课程是我职业生涯中最重要的决策之一。我学习了一些有关移动端应用程序开发和UniApp框架的基本知识，并通过实际的练习项目学习了如何将这些知识付诸实践。通过学习UniApp框架的知识和技能，我不仅掌握了UniApp开发的核心概念和方法，同时也获得了相关移动应用程序开发的技能和最佳实践技巧。这些都对我以后的工作和学习具有非常重要的价值和意义。

 

	<template>
	<view class="home">
		<!-- 头部开始 -->
		<view class="head">
			<image class="logo" src="../../static/icon/logo.png" mode=""></image>
			<image class="notic" src="../../static/icon/message.png" mode=""></image>
		</view>
		<!-- 头部结束 -->
		<!-- 分类导航开始 -->
		<view class="nav">
			<scroll-view class="scroll-view_H" scroll-x="true">
				<text @click="onChange(index)" :class="{'active' :index==currentIndex}"
					v-for="(item,index) in classifyList" :key="item.id">{{item.name}}</text>
			</scroll-view>
		</view>
		<!-- 分类导航结束 -->
		<!-- 新闻内容开始 -->
		<view class="news-list">
			<view class="news-list-item" @click="toDetails(item.id)" v-for="(item,index) in newsList" :key="item.id">
				<view class="userName">
					<image :src="item.cover" mode=""></image>
				</view>
				<view class="news-content">
					<text>Travel</text>
					<view class="title">
						{{item.title}}
					</view>
					<view class="bottom">
						<image :src="item.publisher_img" mode=""></image>
						<text>{{item.create_user}}</text>
						<image :src="item.publisher_img" mode="" class="icon2"></image>
						<text>{{item.create_time|timeFormat}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 新闻内容结束 -->
	</view>
</template>

<script>
	import moment from 'moment'
	  import 'moment/locale/zh-cn'
	export default {
		data() {
			return {
				// 定义一个用于储存分类列表的数组
				classifyList: [],
				// 指定一个当前下标
				currentIndex: 0,
				newsList: [],
			}
		},
		onLoad() {
			// 怎么触发获取分类数据的方法
			this.getClassifyList();
			this.getNewsList()
		},
		filters: {
			timeFormat(time) {
				return moment(time).fromNow()
			}
		},
		methods: {
			// 用于请求分类数据的方法
			getClassifyList() {
				uni.request({
					url: "classify",
					method: "GET",
					success: (res) => {
						// 箭头函数的目的 为了使用  this
						this.classifyList = res.data.list;
					}
				})
			},
			onChange(index) {
				// 切换
				this.currentIndex = index;
			},
			getNewsList() {
				// 调用接口
				uni.request({
					url: "news",
					// 参数如果不是必须传参 可以先不写
					success: (res) => {
						this.newsList = res.data.list;
						console.log(this.newsList)
					}
				})

			},
			toDetails(newsId){
				uni.navigateTo({
					// 路径传参模板 "/pages/my/my? 自定义参数名 = 参数值"
					url:"/pages/detail/detail?newsId="+newsId
				})
			}
		}
	}
</script>

<style lang="scss">
	.home {
		/* #ifdef H5*/
		margin: 48rpx;
		/* #endif*/
		/* #ifdef MP-WEIXIN */
		margin: 136rpx 48rpx 48rpx;
		/* #endif*/

		.head {
			display: flex;
			justify-content: space-between;

			.logo {
				width: 198rpx;
				height: 60rpx;
			}

			.notic {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.nav {
			margin: 60rpx 0;

			text {
				margin-right: 20rpx;
				font-size: 32rpx;
				color: #4e4b66;
			}

			.scroll-view_H {
				white-space: nowrap;
				width: 100%;
				height: 30px;

				::-webkit-scrollbar {
					display: none;
				}

				text {
					margin-right: 8px;
				}

				.active {
					border-bottom: 3px solid #000;
				}
			}


		}

		.news-list {
			.news-list-item {
				display: flex;
				margin: 16rpx 8rpx 0 16rpx;

				image {
					width: 192rpx;
					height: 192rpx;
					border-radius: 12px;
				}

				.userName {
					padding-right: 20rpx;

					text {
						font-size: 26rpx;
						font-weight: normal;
					}
				}



				.news-content {
					display: flex;
					flex-direction: column;
					// padding-top: 25rpx;
					gap: 8rpx;

					.title {
						width: 420rpx;
						height: 96rpx;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						word-break: break-all;
						overflow: hidden;
						text-overflow: ellipsis;

						text {
							font-size: 32rpx;
							font-weight: normal;
						}
					}
				}

				.bottom {
					.icon2{
						padding-left: 20rpx;
					}
					image:nth-child(1) {
						width: 40rpx;
						height: 40rpx;
					}

					image:nth-child(3) {
						width: 28rpx;
						height: 28rpx;
					}

					text {
						font-size: 12rpx;
					}
				}

			}
		}
	}
</style>

uni-app官网这是uniapp的官网网址

uni-app官网