uniapp课程学习心得

当我第一次接触UniApp时，我对于这个跨平台应用开发框架的不同特点和可能性感到十分好奇。经过一段时间的学习后，我对UniApp有了更深入的了解，并且在实际的项目中进行了应用。

首先，我先了解并熟悉了HBuilderX这个开发环境，这里有一些对于搭建好的开发环境的介绍。

HBuilderX是一款强大的集成开发环境，具有代码编辑、调试、编译和发布等功能。它支持多种编程语言和技术，包括HTML、CSS、JavaScript、Vue.js和UniApp等。通过HBuilderX，我们可以轻松地搭建一个UniApp的开发环境，并开始编写我们自己的应用程序。

接下来，我学习了许多关于UniApp的内容，这包括如何使用Vue.js框架下编写UniApp中的页面、如何使用uni-ui组件库来构建一个漂亮的界面和动画效果等。UniApp的特点在于它提供了更高效的代码编写和跨平台开发的能力。

在学习UniApp的过程中，我深刻认识到了解和掌握基础的 HTML、JavaScript 和 CSS 是非常重要的，这些知识是应用程序开发的基石。此外，我发现学习一门语言也需要结合实践应用，这样会更快掌握并更好地理解。在学习的过程中，我同样需要坚持不断进行实践，这对我来说是非常重要的。

在我的实践中，我尝试着将UniApp应用到真实场景中。我在学习过程中逐渐实现了一个基于UniApp实现的应用程序，这个应用程序是一个电商平台，包括了商品列表、购物车、订单等功能，在实现整个项目的过程中我学习了许多编程的技巧和技术。

同时，我还自学了Node.js，并学会了如何基于Node.js来构建应用程序接口。我学会了使用Node.js来编写和部署简单的应用程序，它可以帮助我们轻松地创建和部署RESTful接口。

使用Node.js构建接口可以帮助应用和后端进行交互，并能够更高效地处理一些服务端逻辑，这对于我们实际开发中是非常重要的。

总体来说，学习UniApp和Node.js的过程虽然比较漫长，但也让我受益匪浅。通过学习，我掌握了一些实用的技术和工具，并能够独立地构建应用程序和处理如何使用Node.js编写应用程序接口。

学习UniApp和Node.js不仅可以提高我们的编程技能，更可以帮助我们更好地理解应用程序的开发过程，同时也让我们更好地认识到实践的重要性，实践能够帮助我们更加深入地掌握所学的知识。

因此，我建议大家可以通过实践来深入学习，同时也需要注重基础知识的掌握，这样学习的效果会更好。此外，通过阅读官方文档和参加技术交流会等形式，能够不断地更新和拓展自己的知识体系，更好地探索新的技术和应用。

在我的学习过程中，遇到了一些困难和挑战。其中之一是理解UniApp平台之下的组件编写。在Vue.js框架下编写UniApp组件有不一样的语法和规则，这对我来说是一个挑战。但随着不断的练习和尝试，我开始理解和掌握了如何编写UniApp组件。我发现，通过编写组件，可以使得应用程序更加可复用和可维护。

除此之外，我也学习了如何调试UniApp应用程序。在通过HBuilderX开发应用程序之后，我们需要在移动设备上进行测试和调试。UniApp支持在模拟器中进行调试，也可以通过真实设备进行测试。

除了UniApp，我也学习了Node.js。作为一种开源的异步事件驱动的JavaScript运行时，它可以从单线程中处理高并发请求。我学习了如何基于Node.js来实现应用程序，包括学习了Node.js的基础概念，如事件和回调，也学会了在项目中使用npm管理包依赖和使用Express.js框架来实现RESTful接口。通过Node.js，我掌握了如何开发和维护一个完整的应用程序，这对于我之后的工作和个人项目中都非常有帮助。

通过学习，我深刻认识到编程需要不断地实践和学习。只有在实践中，才能更好地掌握和理解所学的知识。同时，把所学的知识应用到实际项目中能够更好地检验其实用性和可行性。

综上所述，UniApp是一款很棒的跨平台应用开发框架，而Node.js也是非常优秀的后端开发工具。学习UniApp和Node.js的过程是非常有意义的，通过学习，我掌握了很多实用的技术和工具，并学会了如何构建和维护应用程序。在未来的学习和工作中，我将不断拓展自己的知识体系并努力提升自己的技能，为构建更好的应用做出自己的贡献。

此外，UniApp和Node.js在开源社区中都有很大的用户基础和活跃度，因此，我们可以在社区中获取到很多宝贵的经验和资源。对于初学者来说，可以参加一些技术交流会、论坛以及读一些优秀的教程等。

在我的学习过程中，我也发现了一些需要注意的地方。比如，虽然UniApp提供了跨平台开发的功能，但是不同平台之间的差异还是存在的，需要我们在开发中认真对待。另外，虽然Node.js是一个非常强大的后端开发工具，但是在使用时我们也需要注意一些安全性问题。

总的来说，通过学习UniApp和Node.js，我感受到了编程的魅力和乐趣。在编程的过程中，我们可以通过技术创造出更多更好的产品和工具，这对于我们的日常生活和工作都有着重要的意义。我相信，在未来，UniApp和Node.js将会成为更多开发者实现自己想法的重要工具。

通过学习UniApp和Node.js的过程，我不仅学会了如何构建和维护应用程序，也学会了如何不断地迭代和更新自己的知识体系，这不仅对于我个人的成长和发展有很大的帮助，也为我今后的工作提供了更多的机会和可能性。

此外，除了UniApp和Node.js，学习其他相关技术和工具也是非常有必要的。比如，学习HTML、CSS和JavaScript等基础知识对于开发应用程序来说是不可或缺的。通过学习这些基础知识，我们可以更好地理解和掌握UniApp和Node.js这样的高级工具和框架。

对于想要学习UniApp和Node.js的初学者，我建议可以通过一些在线教程和开发者社区来获取指导。UniApp官方文档和uni-app插件市场是很好的学习资源。Node.js方面，官方文档、npm、GitHub等都是很好的学习资源。

对于想要提高自己编程能力的开发者，我建议可以基于UniApp和Node.js自己动手实现一些小型项目，将所学知识应用到实际项目中，这样可以更好地检验自己的掌握程度。

总的来说，通过学习UniApp和Node.js，我深刻认识到编程技术已经成为我们日常生活和工作中必不可少的一部分。掌握这些技术，不仅可以为我们的日常生活和工作带来便利，也为我们的个人和职业发展提供更多的机会和可能性。未来，我会继续深入学习和研究这些技术，并希望在未来的工作中能够运用这些技术创造更多更好的产品和工具。

<template>
	<view class="home">
		<!-- 头部开始 -->
		<view class="head">
			<image class="logo" src="../../static/tab/Vector-2.png" mode=""></image>
			<image class="notic" src="../../static/remind.png" mode=""></image>
		</view>
		<!-- 头部结束 -->
		<!-- 分类导航开始 -->
		<view class="nav">
			<!-- 切换下边框的逻辑，点到哪个分类，就给对应分类添加active类名，通过给active类名添加下边框 -->
			<!-- 点击事件后面的方法名可以存参 -->
			<scroll-view class="scroll-view_H" scroll-x="true"  scroll-left="120">
			<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="toDetail(item.id)" v-for="(item,index) in newsList" :key="item.id">
				<view class="">
					<image :src="item.cover" mode=""></image>
				</view>
				<view class="news-cotent">
					<text>Travel</text>
					<view class="title">
						{{item.title|timeFormat}}
					</view>
					<view class="bottom">
						<image :src="item.publisher_img" mode=""></image>
						<text>{{item.create_user}}</text>
						<image :src="item.publisher_img" mode=""></image>
						<text style="color: #c7c0bc;">{{item.create_time}}</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;
					}
				})
			},
			toDetail(newsId){
				uni.navigateTo({
					// 路劲传参的模板   “/pages/detail/detail?”自定义一个参数名=参数值
					url:"/pages/detail/detail?newsId="+newsId,
				})
			}
		}
	}
</script>

<style lang="scss">
	.home {
		// 条件编译
		/*  #ifdef  H5  */
		margin: 24px 24px 24px;
		/*  #endif  */

		/* #ifdef MP-WEIXIN */
		margin: 68px 24px 24px;

		/* #endif */
		.head {
			display: flex;
			justify-content: space-between;

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

			}

			.notic {
				width: 36rpx;
				height: 42rpx;
			}
		}

		.nav {
			height: 45rpx;
			margin: 16px 0;
			display: flex;
			
			// text{
			// 	margin-right: 10px;
			// 	font-size: 32rpx;
			// 	color: #4E4B66;
			// }
			.scroll-view_H {
					white-space: nowrap;
					width: 100%;
					::-webkit-scrollbar{
						display: none;
						width: 0;height: 0;
						color: transparent;
					}
					text{
						margin-right: 8px;
					}
					.active{border-bottom:3px solid #000 ;}
				}
		}
		.news-list{
			.news-list-item{
				display: flex;
				image{
					width: 192rpx;
					height: 192rpx;
					margin: 0px 10px 10px 10px;
				}
				.bottom{
					image:nth-child(1){
						width: 40rpx;
						height: 40rpx;
					}
					image:nth-child(3){
						width: 28rpx;
						height: 28rpx;
					}
					display: flex;
					align-content: space-between;
					margin: 0px;
				}
				.news-cotent{
					display: flex;
					flex-direction: column;
					justify-content: space-around;
				}
			}
		}
	}
</style>

 这是上课时做的首页代码和页面效果

平时主要是在uniapp官网学习：uni-app官网

还有社区：DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架

哔哩哔哩 (゜-゜)つロ 干杯~-bilibili