uni-app官方视频第三部分：简单项目实战步骤拆解

uni-app官方视频第三部分：简单项目实战步骤拆解

目录

• • 一、 环境
  • 二、内容拆解

一、 环境

HBuildX、Android Studio、微信开发平台

二、内容拆解

1、创建uni-app默认模板项目；

2、创建Hello模板项目，把commen文件夹和static文件夹中的uni.jff分别拷贝到新创建的默认模板中；

3、在APP.vue中通过import引入uni.css组件；

<style>
/* 解决头条小程序组件内引入字体不生效的问题 */
@import './common/uni.css';

4、在APP.vue中设置整个应用的整体样式view{display:flex;}；

/* #ifdef MP-TOUTIAO */
@font-face {
	font-family: uniicons;
	src: url('/static/uni.ttf');
}
/* #endif */
page,
view{
	display: flex;
}
</style>

5、按下ctrl+R键或点击”运行”–”运行到小程序模拟器”，在微信开发者工具中运行页面；

6、添加自定义代码块；

这样就会有uListMedia的代码块提示，选中后直接生成代码块；

7、打开index.vue，这是入口页面，把自带的不需要的DOM层，变量注册和样式去掉；
8、在index中写详情展示的DOM层；

<template>
	<view class="container">
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in news" :key="index"
			@tap="openinfo" :data-newsid="item.post_id">
				<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>
</template>

9、在data里面新建news数组，用于存储详情页面的数据；

export default {
		data(){
			return{
				news:[]
			};
		},

10、在页面加载函数onload函数中通过uni.request获取新闻列表的信息；
通过get方式获取，获取成功时将数据存储到news中；

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

11、添加CSS调节新闻列表样式

<style>
.uni-media-list-body{height: auto;}  /**/
.uni-media-list-text-top{line-height: 1.6em;} /*行高包括行间距和字体高度，字体不会被盖住*/
</style>

样式解析：

（1）height指view组件元素的高度；
height:auto 表示元素高度将取决于其子元素的高度；
（2）line-height:该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
（3）em：
em是一个相对单位。
相对的计算必然会一个参考物，那么这里相对所指的是相对于元素父元素的font-size。比如说：如果在一个

设置字体大小为“16px”，此时这个

的后代元素教程了是将继承他的字体大小，除非重新在其后代元素中进行过显示的设置。此时，如果你将其子元素的字体大小设置为“0.75em”，那么其字体大小计算出来后就相当于“0.75 X 16px = 12px”

此处在uni.css中定义了父级元素uni-media-list-body的height为84rpx，所以uni-media-list-text-top的line-height为1.6X84=134.4rpx

uni.css中样式设计如下：

12、.uni-list-cell类的view中用v-for遍历数组，在DOM层中展示news中的新闻列表内容；

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

13、新闻列表页面展示；

14、key：使用key是为了在列表更改后渲染时为每个DOM结点加一个标识，使重新渲染更高效；

15、添加@tap响应时间openinfo :data-newsid用newsid动态绑定新闻列表的post_id

<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in news" :key="index"
			@tap="openinfo" :data-newsid="item.post_id">

16、methods中添加openinfo函数，获取触摸引发事件组件的newsid作为用uni.navigateTo跳转到info页面后的参数；

methods:{
			openinfo(e){
				//console.log(e)
				let newsid=e.currentTarget.dataset.newsid
				//console.log(newsid)
				uni.navigateTo({
					url:'../info/info?newsid='+newsid
				})
			}
		}

17、创建info页面，会在pages.json中的Pages里自动添加相应页面对象；

18、在info.vue里面写详情展示的DOM层，其中标题展示在一个view里，详细内容展示在富文本rich-text里；

template>
	<view class="content">
		<view class="title">
			{{title}}
		</view>
		<view class="art-content">
			<rich-text class="richext" :nodes="strings"></rich-text>
		</view>
	</view>
</template>

19、在data里面添加title和strings字符串,用于存放新闻的标题和内容；

script>
	export default {
		data() {
			return {
				title:'',
				strings:''
				
			}
		},

20、在info页面加载onload函数里，使用uni.request获取新闻网址得内容，并用index页面传过来的newsid当做参数，访问成功时通过获取的数据给title和strings赋值；

onLoad:function(e){
			uni.showLoading({
				title:'加载中'
			})
			//console.log(e)
			uni.request({
				url:'https://unidemo.dcloud.net.cn/api/news/36kr/'+e.newsid,
				method:'GET',
				data:{},
				success: res => {
					console.log(res)
					this.title=res.data.title
					this.strings=res.data.content
					uni.hideLoading()
				},
				fail: () => {
					
				},
				complete: () => {
					
				}
			})
		},

21、在视图DOM中，用{{title}}展示标题，在富文本中用:nodes=”strings”动态绑定strings，显示新闻详情的内容；

		<view class="art-content">
			<rich-text class="richext" :nodes="strings"></rich-text>

22、新闻详情页面样式展示；

23、细节处理，在页面加载函数onload的一开始添加showLoading，数据获取成功后hideLoading；

onLoad:function(e){
			uni.showLoading({
				title:'加载中'
			})

success: res => {
					console.log(res)
					this.title=res.data.title
					this.strings=res.data.content
					uni.hideLoading()
				},

24、调节新闻页面样式
flex-wrap: wrap; 允许它下面的样式进行换行工作

<style>
	.content{padding:10upx 2%;width: 96%;flex-wrap: wrap;}
	.title{line-height: 2em;font-weight: 700;font-size: 38upx;}
	.art-content{line-height: 2em;}
</style>

25、进行模式配置，在开发时直接跳转到指定页；
condition中的list是各个要跳转的页面和传的参数，current是当前激活的哪一个list项；

	"condition": { //模式配置，仅开发期间生效
	    "current": 0, //当前激活的模式（list 的索引项）
	    "list": [{
	            "name": "info", //模式名称
	            "path": "pages/info/info", //启动页面，必选
	            "query": "newsid=5310910" //启动参数，在页面的onLoad函数里面得到。
	        }
	        
	    ]
	}
}

26、在HBuilderX中运行时选择相应的页面配置，微信开发者工具中选择相应的页面匹配。

本文地址：https://blog.csdn.net/s15006652837/article/details/109248730