作为一名程序员，Uniapp是一种非常好用的开发框架，它能够帮助我们快速地构建跨平台的应用程序。
对于我来说，首先需要了解的是Uniapp是基于Vue.js开发的，它可以将代码同时开发成微信小程序、支付宝小程序、H5、APP等多个平台。所以，你无需学习各个平台所需要的不同语言和框架，只需要利用Vue.js的知识了解Uniapp的一些基本概念，就可以轻松地开发出跨平台应用了。
了解Uniapp基本概念后，我们还需要学习一些基本技能，如页面布局、组件的使用、状态管理、网络请求等。这些都是构建应用程序必不可少的技能，掌握它们可以帮助我自身更好地理解和使用Uniapp
在过去的一个学期里，我一直在学习Uniapp开发框架的应用和实践。通过这个学期的学习，我深刻认识到了Uniapp的强大和优势，并意识到Uniapp在当前移动互联网时代的应用价值。
而我在学习Uniapp的过程中，最初在2022年下学期的时候就接触到了Vue.js的知识，尤其是学习了Vue.js的基本概念和使用，同时也了解了Vue.js的插件，组件注册，父子组件之间的通信等基本技能。这为我后来的Uniapp学习提供了良好的基础。
接着，在今年2023年3月份时就开始接触学习了Uniapp的页面布局和组件的使用。Uniapp提供了一系列的组件库，包括基础组件和扩展组件，这些组件可以让我们很容易地开发出跨平台的应用程序。同时，我了解了Uniapp的生命周期和事件页面的处理机制。对于跨平台的应用开发而言，这些知识是非常重要的，可以让我们更好地理解应用的运行机制和开发流程，并且能够更快地解决问题。
除此之外，我也学习了Uniapp的状态管理和网络请求。状态管理可以帮助我们更好地管理应用程序中的数据，使得整个程序运行的更加清晰和流畅。网络请求则是应用程序中不可或缺的一部分，我们可以使用异步请求来处理和获取数据。
在这一学期的Uniapp学习中，最重要的得益是实践。在黄秀明老师的教学指导下，我学会使用Uniapp开发了几个小的示例应用，例如音乐播放器、新闻资讯app、电子商城等。通过这些小项目的开发，我不仅加深了自己对Vue.js和Uniapp知识的理解，也更加深入地掌握了组件和页面布局的技能。
新闻app中主要使用了uniapp中的网络中的发起请求进行数据渲染uniapp
<template>
<view class="content">
<view class="title-item">
<text class="text-first">干杯</text>
<text class="text-second">五月天</text>
</view>
<!-- 磁盘 -->
<!-- 摇杆 -->
<view class="image-item2">
<image src="/static/needle.png" mode="aspectFit" class="needle" :class="isPlay && 'needleRotate'"></image>
</view>
<view class="discContainer" :class="isPlay?'running':'paused'">
<image src="/static/videodisc.png" mode="aspectFit" class="disc"></image>
<image src="../../static/Wuyuetian.jpg" mode="" class="musicImg"></image>
</view>
<!-- 图标 -->
<view class="icon-item">
<view class="icon-item1">
<image src="/static/like.png" mode=""></image>
</view>
<view class="icon-item1">
<image src="/static/download.png" mode=""></image>
</view>
<view class="icon-item1">
<image src="/static/ling.png" mode=""></image>
</view>
<view class="icon-item1">
<image src="/static/msg.png" mode=""></image>
</view>
<view class="icon-item1">
<image src="/static/more.png" mode=""></image>
</view>
</view>
<!-- 进度条开始 -->
<view class="progress-bar">
<text>{{"0"+currentMin}}:{{currentSec}}</text>
<slider @change='sliderChange' @changing='sliderChange' :value='bar' activeColor="rgba(255,255,255,0.4)"
backgroundColor="rgba(255,255,255,0.3)" block-color="rgba(255,255,255,0.5)" block-size="10" />
<text>{{sum_currentMin}}:{{sum_currentSec}}</text>
</view>
<!-- 进度条结束 -->
<!-- 播放列表 -->
<view class="icon-tabulation">
<image src="../../static/back.png" mode=""></image>
<image v-if="isPlay" src="/static/stop.png" mode="" class="iconfont" @tap="bofang">
</image>
<image v-else src="/static/play.png" mode="" @click="onPlay"></image>
<image src="/static/next.png" mode=""></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isPlay: false,
currentMin: "0",
currentSec: "00",
sum_currentMin: '00',
sum_currentSec: '00',
bar: '0',
lin: 'true',
innerAudioContext: uni.createInnerAudioContext()
}
},
methods: {
bofang() {
this.isPlay = !this.isPlay;
this.innerAudioContext.pause()
},
onPlay() {
this.isPlay = !this.isPlay;
if (!this.innerAudioContext.src) {
this.innerAudioContext.src =
'http://music.163.com/song/media/outer/url?id=1367144198.mp3';
}
this.innerAudioContext.play()
console.log(this.innerAudioContext.duration);
this.innerAudioContext.autoplay=true
if (this.innerAudioContext.paused == true) {
}
this.innerAudioContext.onTimeUpdate(() => {
console.log(this.innerAudioContext.currentTime)
var currentMin = parseInt(this.innerAudioContext.currentTime / 60)
var currentSec = parseInt(this.innerAudioContext.currentTime % 60)
this.currentMin = currentMin;
this.currentSec = currentSec < 10 ? "0" + currentSec : currentSec;
var currentSec_second = parseInt(this.innerAudioContext.duration % 60)
var currentMin_second = parseInt(this.innerAudioContext.duration / 60)
this.sum_currentMin = currentMin_second < 10 ? '0' + currentMin_second :
currentMin_second
this.sum_currentSec = currentSec_second < 10 ? '0' + currentSec_second :
currentSec_second
this.bar = parseInt((this.innerAudioContext.currentTime / this.innerAudioContext
.duration) *
100)
console.log(this.bar,this.max);
console.log(this.bar);
})
},
sliderChange(event) {
this.innerAudioContext.seek((event.detail.value * this.innerAudioContext.duration) / 100)
// console.log((event.detail.value * this.innerAudioContext.duration) / 100);
}
},
onReady() {
wx.setNavigationBarTitle({
title: '音乐'
})
},
onLoad() {
this.onPlay()
}
}
</script>
<style scoped lang="scss">
.content {
width: 100%;
height: 100vh;
background-image: linear-gradient(#C6FFDD, #FBD786, #f7797d);
display: flex;
flex-direction: column;
align-items: center;
}
.title-item {
width: 100%;
height: 10%;
display: flex;
justify-items: center;
flex-direction: column;
align-items: center;
justify-content: space-around;
.text-first {
color: #000000;
font-size: 44rpx;
}
.text-second {
color: #ffaa00;
font-size: 30rpx;
margin-top: -10rpx;
}
}
.needle {
z-index: 99;
top: 10rpx;
position: relative;
left: 60rpx;
width: 192rpx;
height: 274rpx;
transform-origin: 40rpx 0;
transform: rotate(-40deg);
transition: transform 1s;
}
.discContainer {
position: relative;
top: -170rpx;
width: 598rpx;
height: 598rpx;
animation: disc 7s linear infinite;
animation-delay: 1s;
}
@keyframes disc {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg)
}
}
.needleRotate {
transform: rotate(-10deg);
}
.disc {
width: 598rpx;
height: 598rpx;
}
.paused {
animation-play-state: paused;
}
.running {
animation-play-state: running;
}
.musicImg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 370rpx;
height: 370rpx;
border-radius: 50%;
}
.icon-item {
width: 100%;
height: 12%;
display: flex;
margin-left: 13%;
margin-top: -16%;
.icon-item1 {
width: 20%;
}
image {
width: 80rpx;
height: 80rpx;
}
}
// 进度条
.progress-bar {
width: 90%;
height: 10rpx;
line-height: 10rpx;
display: flex;
justify-content: space-around;
align-items: center;
color: white;
slider {
width: 100%;
}
}
// 播放列表
.icon-tabulation {
width: 100%;
position: absolute;
display: flex;
justify-content: center;
left: 0;
top: 88%;
image {
height: 120rpx;
width: 120rpx;
margin: 0 60rpx;
}
}
</style> 
注：可实现点赞、收藏成功，取消功能，可点击进入评论区评论
注：个人信息页面可编辑图像、性别、昵称、个人简介等资料
<template>
<view class="home">
<!-- logo -->
<view class="Image">
<image class="vector" src="../../static/Vector-2.png" mode="aspectFit"></image>
<image class="notic" src="../../static/notic.png" mode="aspectFit"></image>
</view>
<!-- 导航栏 -->
<view class="nav">
<scroll-view class="scroll-view-H" scroll-x="true" scroll-left="120">
<text :class="index==navIndex ? 'active':''" @click="clickNav(index)" class="text-item"
v-for="(item,index) in classifyList" :key="item.id">{{item.name}}</text>
</scroll-view>
</view>
<!-- 新闻列表 -->
<view class="content">
<view class="information" @click="toDetail(item.id)" v-for="(item,index) in info" :key="item.id">
<image class="pic" :src="item.cover" mode="scaleToFill"></image>
<!-- 标题 -->
<view class="text-item1">
<view class="title">
<text>Turexs</text>
</view>
<!-- 内容 -->
<view class="overview">
{{item.title}}
</view>
<view class="details">
<!-- 用户头像 -->
<view class="user">
<image :src="item.publisher_img" mode="aspectFit"></image>
<text>{{item.create_user}}</text>
</view>
<!-- 时间 -->
<view class="user">
<image src="../../static/time.png" mode="aspectFit"></image>
<text class="time">{{item.create_time | timeFormat}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import moment from 'moment'
import 'moment/locale/zh-cn'
export default {
data() {
return {
navIndex: 0,
classifyList: [],
info: [],
}
},
methods: {
// 获取导航列表数据
getClassifyList() {
uni.request({
url: "classify",
method: "GET",
success: (res) => {
console.log(res);
this.classifyList = res.data.list;
},
})
},
// 获取新闻列表数据
getInfo() {
uni.request({
url: "news?id=1",
method: "GET",
success: (res) => {
console.log(res);
this.info = res.data.list;
},
})
},
clickNav(index) {
this.navIndex = index;
},
toDetail(id) {
uni.navigateTo({
url: "/pages/Detail/Detail?newsId=" + id
})
}
},
onLoad() {
this.getClassifyList();
this.getInfo();
},
filters: {
timeFormat(time) {
return moment(time).fromNow()
// 获取当前时间：moment()
let date = moment()
// 获取当前时间的相对时间，如"刚刚"、"一分钟前"、"一小时前"等
let timeAgo = moment('2022-03-01 12:30:00').fromNow()
}
},
}
</script>
<style scoped lang="scss">
.home {
width: 90%;
height: 100vh;
margin: 0 auto;
/*#ifdef H5*/
margin: 48rpx 48rpx 48rpx;
/*#endif*/
/*#ifdef MP-WEIXIN*/
margin: 136rpx 48rpx 48rpx;
/*#endif*/
.Image {
display: flex;
justify-content: space-between;
.vector {
width: 198rpx;
height: 60rpx;
}
.notic {
width: 36rpx;
height: 42rpx;
}
}
.nav {
margin: 40rpx 0;
font-size: 32rpx;
// position: fixed;
// top: var(--window-top);
// left: 0;
.scroll-view-H {
white-space: nowrap;
height: 60rpx;
::-webkit-scrollbar {
width: 4px !important;
height: 1px !important;
overflow: auto !important;
background: transparent !important;
-webkit-appearance: auto !important;
display: block;
}
.text-item {
margin-right: 20rpx;
line-height: 60rpx;
&.active {
border-bottom: 3px solid #1877F2;
color: #1877F2;
}
}
}
}
// 内容
.content {
.information {
display: flex;
border-bottom: 1px dashed #d3d3d3;
padding: 20rpx 0;
.pic {
width: 230rpx;
height: 160rpx;
}
.text-item1 {
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
padding-left: 10rpx;
.title {
font-size: 26rpx;
color: #5E5B74;
text-overflow: -o-ellipsis-lastline;
overflow: hidden; //溢出内容隐藏
text-overflow: ellipsis; //文本溢出部分用省略号表示
display: -webkit-box;
text-overflow: ellipsis; //特别显示模式
/* 允许单词内断句，首先会尝试挪到下一行，看看下一行的宽度够不够，
不够的话就进行单词内的断句 */
word-wrap: break-word;
word-break: break-all;
/* 断句时，不会把长单词挪到下一行，而是直接进行单词内的断句 */
-webkit-line-clamp: 1; //行数
line-clamp: 2;
-webkit-box-orient: vertical; //盒子中内容竖直排列
}
.overview {
width: 100%;
font-size: 32rpx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden; //溢出内容隐藏
text-overflow: ellipsis; //文本溢出部分用省略号表示
display: -webkit-box;
text-overflow: ellipsis; //特别显示模式
/* 允许单词内断句，首先会尝试挪到下一行，看看下一行的宽度够不够，
不够的话就进行单词内的断句 */
word-wrap: break-word;
word-break: break-all;
/* 断句时，不会把长单词挪到下一行，而是直接进行单词内的断句 */
-webkit-line-clamp: 2; //行数
line-clamp: 2;
-webkit-box-orient: vertical; //盒子中内容竖直排列
}
.details {
font-size: 17rpx;
color: #999;
.user {
image {
padding-right: 10rpx;
width: 20rpx;
height: 20rpx;
}
text {
padding-bottom: 10rpx;
}
display: inline-block;
padding-right: 30rpx;
}
}
}
}
}
}
</style>此外，最让我欣慰的是，我还在学习中推广了Uniapp的应用。我介绍Uniapp的知识和应用给了我的同学和朋友。这不仅体现了Uniapp的优秀特性，也让我感到自己学习到的知识是有实际应用价值的。
综上所述，我认为Uniapp是一种非常好用的移动开发框架，并且它拥有多种优秀的特性，适用于多个平台的应用。我在这一学期的学习中，深刻认识到了Uniapp的强大和优势，同时也学习到了Vue.js基本概念和技能，还将之前学习的MySQL数据库、vue.js、node.js等编程语言结合在一起使用，使得自己对于编程语言有了一定的了解和逻辑能力。通过实践和应用，我更加深入地理解了组件和页面布局的技能，对于实际开发应用程序也更加熟练和自信。我相信，在未来的开发实践中，我可以更好地应用Uniapp的知识和技能，创造出更加有价值的跨平台应用程序。
uniapp总结经验：
作为一名Uniapp开发者，我的学习方法首先是通过阅读官方文档和相关技术博客等资料来了解Uniapp的基础架构和开发流程。熟悉Uniapp的开发方式之后，我就开始通过实践来巩固所学知识。我会尝试通过开发一些小型的项目或者 demo 来了解不同的组件库和使用场景，并且在实践中不断地发现问题和解决问题。我也会定期参加一些Uniapp的技术交流会和活动来了解社区中其他开发者的开发经验，从而获得更多的开发技巧和最佳实践。
在Uniapp的学习中，我也遇到了一些困难和不足。首先，一些高级的技术知识，如多端适配、复杂的组件开发和性能优化等是我在学习中较为薄弱的部分，需要我花费更多的时间和精力来巩固和学习。其次，Uniapp的文档有时不够详细和完善，导致开发者需要花费更多的时间和精力来理解和掌握它的使用方法。
在解决不足之处的过程中，我会查阅更多的技术资料和文档，并且利用CSDN社区的资源来获取帮助和交流开发经验，同时我还会参与到一些开源项目中，通过参与贡献代码、提出问题和解决问题等方式来加深自己对Uniapp的了解和经验。
综上所述，学习Uniapp需要坚持实践和不断地思考和提高自己的技术水平，同时应该善用社区和社区资源来解决遇到问题和不足的情况，不断完善和提升自己的开发能力。只有这样，我们才能更好地掌握Uniapp的技能，为移动端开发的未来发展做出贡献。
而作为一个前端开发人员，我对于前端在未来的发展前景非常乐观。
首先，随着移动互联网的蓬勃发展，越来越多的企业和商家都开始将业务转移到互联网上，而前端的作用在这个过程中越来越重要。未来的前端工程师需要具备更高的技术水平和更广的知识面，以应对复杂的业务需求。
其次，前端技术将持续发展，新技术的涌现将使得前端开发更加高效和优化。例如，现在已经出现了比较成熟的前端框架和工具，如React、Vue、Webpack等，这些工具不仅让前端开发变得更加高效，而且满足了需求的同时还能提高用户体验。在未来，我相信前端技术会继续不断地升级，为移动互联网应用和网页设计提供更多更优质的解决方案。
最后，随着人工智能、大数据和云计算等技术的发展，前端在应用领域也将逐渐多元化，例如VR和AR技术的出现、WebGL和Canvas等技术的普及，这些技术为前端提供了更多的发展机遇。前端工程师在未来的发展中也需要不断学习新技术和新知识，适应不同领域的需求。
总的来说，作为前端开发工程师，我认为前端在未来的发展前景非常广阔。在未来的发展中，前端开发人员需要不断学习新技术和新知识，适应不同领域的需求，并且提高自身的技术和专业能力。如果我们能够做到这些，我相信前端开发在未来的属于是充满着无限的机遇和挑战。
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
