uni-app一课一得

一、前言

经过半个学期的学习已经初步了解uni-app的使用，下面我来给大家说明一下我学会的功能以及我遇到的问题。

首先，在开始使用Uni-app之前，请确保您对Vue框架、HTML/CSS/JavaScript编程语言有一定的了解。因为这些都是构建跨平台应用所需要掌握的基础技能。

关于uni-app本身，它是Dcloud公司推出的一款跨平台运行工具，可以同时兼容iOS、Android等多种操作系统，并且支持各种形式的app开发、小程序开发以及H5页面开发。

工具：HBuilder X

二、轮播图

在如今软件开发中，轮播图一般都是必要的，能美化软件，还能明了的展现软件的主题

前台代码：

<swiper circular :indicator-dots="indicatorDots" :autoplay="autoplay" 
			:interval="interval" :duration="duration">
				<swiper-item v-for="(img, key) in imgUrls" :key="key"><image :src="img" /></swiper-item>
</swiper>

后台代码：

<script>
	export default {
		data() {
			return {
//轮播图图片
	imgUrls: [
				'/static/1.png',
				'https://img0.baidu.com/it/u=2003211131,1706767917&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
				'https://i.17173cdn.com/2fhnvk/YWxqaGBf/cms3/ePSJIUbnhmhkepD.jpg',
				'https://img.3dmgame.com/uploads/images/news/20211007/1633573821_869066.jpg'
			],
			indicatorDots:true,
			autoplay:true,
			interval:2000,
			duration:500,
			}	
		}
	}
</script>

indicatorDots表示开关轮播图下面显示的小点点

 autoplay表示开关轮播图的自动播放

interval表示轮播图自动播放图片速度(值越小速度越快)

duration表示图片自动播放的图片过度速度(值越小速度越快)

在imgUrls中插入图片链接或者图片相对路径即可

结果：

 三、文章列表循环以及对应id数据传到到文章详细页面

首先json数据肯定得有：

[

	{
		"id": "01",
		"author": "PC游戏",
		"tupian": "https://img1.baidu.com/it/u=2417949576,2549750065&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500",
		"Article_Title": "《终焉之莉莉》剧情完整梳理，凄美悲惨的救赎故事",
		"content":""
	},
	{
		"id": "02",
		"author": "SILVER",
		"tupian": "https://img0.baidu.com/it/u=215342166,2743574975&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
		"Article_Title": "梦想中的高中，梦想中的青春——《女神异闻录 5 皇家版》玩后感",
		"content":""
	},
	{
		"id": "03",
		"author": "烽火君",
		"tupian": "https://p3.itc.cn/q_70/images03/20210121/2c95fd4723c94da59485e7cd96a77b6f.jpeg",
		"Article_Title": "曝GTA6仅登陆次世代主机 推出晚是为了保证用户基数",
		"content":""
	}
]

content:是文章内容因为太多了所以就省略

前台代码：

<view v-for="a in news" :key="a.id" :data="a" link @click="gotoCourse(a.id)" class="d-three">
			<view class="d-threes">
				<view>
					<image style="width:270rpx; height:160rpx; border-radius: 10px;" :src="a.tupian"></image>
				</view>
				<view class="d-threess">{{a.Article_Title}}</view>
			</view>
			<view>
				<view  class="threess">{{a.author}}</view>
			</view>
</view>

添加一个点击方法gotoCourse点击到文章详细页面并且传入id

样式代码：

d-three{
	border-bottom: 1rpx solid #ccd0d9;
	margin: 20rpx 20rpx 20rpx 20rpx;
}
.d-threes{
	display: flex;
	flex-direction: row;
}
.d-threess{
	margin-left: 30rpx;
	
}
.threess{
	margin-bottom: 20rpx;
	font-size: 25rpx;
	color: #808080;
}

后台：

<script>
	import news from "../../data/news.json"
	export default {
		data() {
			return {
			news:news
			}
		},
		methods: {
			//id传导
			gotoCourse(newsId){
				uni.navigateTo({
					url: 'news?newsId='+newsId
				})
			}		
		}
	}
</script>

文章详细页代码：

前台：和列表差不多简单循环

<template>
	<view>
		<image style="width: 100%;height: 450rpx;" :src="news.tupian"></image>
		<view style="font-family:'Courier New', Courier, monospace;font-weight:900;margin-bottom: 100rpx;" >{{news.Article_Title}}</view>
		<view class="">
			<view>
				{{news.author}}
			</view>
		</view>
		<span style="white-space: pre-line;font-family:'Courier New', Courier, monospace;">{{news.content}}</span>
	</view>
</template>

后台：

<script>
	
  
	import news from '../../data/news.json'

	export default {
		data(){
			return {
				news:null,
				news1:news
			
			}
		},

		onLoad: function(option) {
			this.setCurrentCourse(option.newsId);
		},
		

		methods: {
			setCurrentCourse(newsId){
				this.news = this.news1.find(x=>x.id === newsId);
			}

		}
	}
	
</script>

必须使用生命周期方法，从页面开始传入id，再把这个传入的id和导入的json数据的id绑定就可以显示出对应点击文章的内容了。

四、结尾

以上就是本人学到的一点小方法，有什么不对请大神指出。

学习uni-app总的来说对初学者还是比较友好的，前提是要熟练掌握vue.js。

学习过程中不要怕困难，办法总比困难多，多查找资料，多问老师同学，大胆尝试使用新的方法。

好好学习，天天向上。