uni-app 零基础入门

uni-app零基础入门第一天

1. uni-app官方案例——新闻展示及详情查看

1.1 官方视频地址

https://ke.qq.com/course/3169971

1.2 创建新项目

先直接运行查看一下效果

1.3 修改视图布局

<view class="content">
	<view class="uni-list">
		<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in news" :key="index">

			<view class="uni-media-list">
				<image class="uni-media-list-logo" :src="item.author_avatar"></image>
				<view class="uni-media-list-body">
					<view class="uni-media-list-text-top">{{item.title}}</view>
					<view class="uni-media-list-text-bottom uni-ellipsis">{{item.created_at}}</view>
				</view>
			</view>
		</view>
	</view>
</view>

1.4 获取数据

官方给的接口

https://unidemo.dcloud.net.cn/api/news

接口返回新闻列表数据

在onLoad()生命周期函数中，发起请求

onLoad : function() {
			uni.request({
				url: 'https://unidemo.dcloud.net.cn/api/news',
				method: 'GET',
				data: {},
				success: res => {
					console.log(res)
				},
				fail: () => {},
				complete: () => {}
			});
		},

将结果res打印，运行一下

可以看到拿到了20条新闻数据，将其与data绑定

编译

OK。

1.5 新建详情页面，并实现点击跳转

命名为info

在视图上通过注解直接绑定点击事件

编写方法

methods: {
			openinfo() {
				uni.navigateTo({
					url: '../info/info',
					success: res => {
						console.log("打开成功")
					},
					fail: () => {
						console.log("打开失败了")
					},
					complete: () => {}
				});
			}
		},

编译运行

单击后，会跳转到一个新页面info

1.6 实现方法传参

修改方法：

打开页面时进行参数传递

在info页面中接收参数

看下

OK，在每个info页面都能获取对应的id

1.7 在info中获取新闻标题并展示

在每一个不同的新闻跳转时，显示对应的标题

url: 'https://unidemo.dcloud.net.cn/api/news/36kr/' + e.newid,

修改页面布局

<template>
	<view class="content">
		<view class="title">{{title}}</view>
	</view>
</template>

存储数据

给点样式

<style>
	.content {
		padding: 10upx 2%;
		width: 96%;
		flex-wrap: wrap;
	}

	.title {
		line-height: 2em;
		font-weight: 700;
		font-size: 38upx;
	}
</style>

编译运行

1.8 完善新闻详情

这里使用到富文本标签，因为接口数据带有HTML

编译运行

OK

1.9 添加进度加载