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。比如说:如果在一个
此处在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中运行时选择相应的页面配置,微信开发者工具中选择相应的页面匹配。