持续更新中…
手敲不易，麻烦点点赞和收藏
这里给初学者提供一个uniapp的练习项目，学习uniapp需要vue和微信小程序的基础（其实微信小程序基础需要的不多），建议把基础内容学牢固了再看本文。
本项目完成的是H5+小程序+APP的新闻项目，下面就开始说一下项目流程：
首先是创建新项目
选择的默认模板就行，个人比较习惯用vue2，所以这个项目也勾选的是vue2，unicloud这里就不用勾选了。
这里需要的先是两个页面，首页和个人中心。这两个页面放在pages文件夹下的同名目录中
创建页面的时候可以在pages.json文件中定义导航栏标题。我这里使用的是SCSS，需要勾选使用scss选项。
这里给一个快速入门scss的博客链接，如果需要的话可以去看一下
http://t.csdn.cn/7mJR2
创建完页面后进入page.json文件，定义tabBar：
我这里是已经写好的，icon的获取路径推荐去这里：https://www.iconfont.cn/
这是一个由由阿里巴巴集团旗下的阿里巴巴矢量图标库提供矢量图标和字体图标资源的网站。
iconPath和selectedIconPath分别为选中和未选中状态：
头部这里的用到了全局定义，定义了文本颜色navigationBarTextStyle，文本文字navigationBarTitleText，导航栏颜色navigationBarBackgroundColor。
uniapp中（基本所有框架都是这样）局部大于全局，这里我给首页定义的文字是青年帮新闻，全局也是青年帮新闻，显示的实际是局部定义的青年帮新闻。
定义了一个可以横向拖动的结构，scroll-view的scroll-x和scroll-y分别是可以上下和左右滑动的属性
这里给item定义的是 inline-block ，使多个item居于一行。这里的css中给 scroll-view 的 white-space 属性为 nowrap ，使文本不会换行，这样首页这行就可以正常滑动。行高给的100rpx，使文字在盒子中可以居中。
如果发现这里不理解为什么要用rpx作为单位建议回去学一下微信小程序先
这里给一篇博客帮助理解为什么用padding：http://t.csdn.cn/rPs9I
这里还需要在navscroll{}中加入
/deep/::-webkit-scrollbar{
width: 4px !important;
height: 1px !important;
overflow: 1px !important;
background: transparent !important;
-webkit-appearance: auto !important;
display: block;
}
这段代码起到了自定义滚动条的作用，使滑动的时候滚动条不会显示
创建一个组件，创建组件之前先选择新建目录，目录名称为components，名称一定要打对。
新建的时候要勾选创建同名目录还有使用scss模板组件。
uniapp中组件和vue有所不同，uniapp中的组件是自动引入的。
我定义的组件的名称是newsbox，这里可以直接使用newsbox标签。
如果有对组件不清楚的可以去看看这篇关于vue组件的介绍https://blog.csdn.net/qq_39321234/article/details/129715608
我这里选择不在组件中定义样式，使整体更灵活
组件的定义如下：
这里的CSS非常关键
<style lang="scss">
.newsbox{
display: flex;
.pic{
width: 230rpx;
height: 160rpx;
img{
width: 100%;
height: 100%;
}
}
.text{
flex: 1;
padding-left: 20rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.title{
font-size: 38rpx;
color: #333;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.info{
font-size: 26rpx;
color: #999;
padding-right: 30rpx;
}
}
}
</style>
pic这里给图片定义长宽后又让图片缩放比为100%，同时前面给图片的模式定义的是ascpectFill，这使得图片按照最长边进行显示。
这段是让文字超过两行则显示省略号：
这段代码创建了一个垂直方向上的列布局，其中项目沿着垂直轴均匀分布，第一个项目在顶部，最后一个项目在底部。
到这里首页的布局就差不多了，然后是个人中心。
接着在个人中心里也引入组件
下一步是对组件进行修改，改为传值的模式：
在index这个页面里给newbox传入对应的值，以我的为例，会出现如下效果：
现在加一个差异化处理，首页和个人中心界面显示的newbox组件的内容要有所差异：
<view class="info" v-if="!item.visittime">
<text>{{item.author}}</text>
<text>---</text>
<text>{{item.history}}</text>
</view>
<view class="info" v-else>
<text>浏览时间：{{item.visittime}}</text>
</view>
当有浏览时间的时候就显示浏览时间，否则显示默认作者和访问次数
接下来是首页本阶段的最后一个步骤：点击高亮
这里在此处进行修改：
<view class="scrollNav">
<scroll-view scroll-x="true" class="navscroll">
<view v-for="(item,index) in 10" class="item"
:class="index==navIndex?'active':''"
@click="clickNav(index)">国内
</view>
</scroll-view>
</view>
这里navIndex的初始值设为0，每次点击就会赋给相应的值
每次点击的导航的颜色都在这里定义：
&.active{
color: #31C27C;
}
很多小伙伴看到这里可能不明白为什么要用 &. 这种语法，这里就解释一下：
这里的 &. 实际上是sass的语法，链接给在这里：http://t.csdn.cn/3Qsir
接下来就是文章页面相关内容，之前内容有不清楚的可以私信我或者在评论区留言
首先是点击跳转到详情页，在index这里定义：
在method里添加goDetail方法：
这里要创建一个detail页面，创建方法还是和前面说的一样，点击创建页面然后修改JSON配置。
这里有个需要注意的地方，为什么 @click后面需要加上.native 。这是因为这样就不会把click视为你自定义的方法了
这里可以看uni-app的官网
现在就可以实现点击跳转了：
关于详情页的代码给在这里（首先给的是静态的，后期再改）：
<template>
<view class="detail">
<view class="title">
文章标题
</view>
<view class="info">
<view class="author">
编辑：鸡蛋灌饼侠
</view>
<view class="time">
2023-8-4 16:42:30
</view>
</view>
<view class="content">
详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情
</view>
<view class="copyright">
版权声明
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
.detail{
padding: 30rpx;
.title{
font-size: 46rpx;
color: #333;
}
.info{
background: #F6F6F6;
padding: 20rpx;
font-size: 25rpx;
color: #666;
display: flex;
justify-content: space-between;
margin: 40rpx 0;
width: 610rpx;
}
.content{
padding-bottom: 50rpx;
width: 630rpx;
}
.copyright{
background: #FEF0F0;
font-size: 26rpx;
padding: 20rpx;
color: #F89898;
line-height: 1.8em;
width: 600rpx;
}
}
</style>
补充一点em这个单位有关内容：
“em” 是网页设计和排版中使用的一种单位。
在 CSS 中，“em”
的大小基于元素或其父元素的字体大小。一个“em”等于元素的字体大小。例如，如果一个元素的字体大小为16像素，则1个em等于16像素。如果父元素的字体大小为20像素，则1个em等于20像素。因此，在 CSS 属性“line-height:
1.8em;”的上下文中，行高将是元素或其父元素的字体大小的1.8倍，具体取决于字体大小的继承情况。
接下来要实现的是调用接口，获取数据并能实现点击以后查询到对应类型新闻：
首先是动态获取导航列表数据：
//获取导航列表数据
getNaviData(){
uni.request({
url:"https://ku.qingnian8.com/dataApi/news/navlist.php",
success:res=>{
console.log(res);
this.navArr=res.data
// console.log(123);
}
})
}
这里调用了别人的一个接口
对上面的html结构也做出修改：
<view class="scrollNav">
<scroll-view scroll-x="true" class="navscroll">
<view v-for="(item,index) in navArr"
class="item"
:class="index==navIndex?'active':''"
@click="clickNav(index,item.id)"
:key="item.id">{{item.classname}}
</view>
</scroll-view>
</view>
上面代码的有部分是后面的步骤实现的，这里就直接一步到位了
拓展一个知识点，调用接口的时候一定要先学会用接口测试工具（本人主学后端，用的更多的是ApiFox），调之前先测一下：
这个样子就是没有问题的
包括这里打印数据也是测试有没有获取到数据
这一步做好就可以实现这样了：
接下来是获取新闻列表：
//获取新闻列表
getNewsData(id=50){
uni.request({
url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
data:{
cid:id
},
success:res=>{
// console.log(res);
this.newsArr=res.data
}
})
}
这里返回的数据是对象类型的，跟我们在newbox中写的一样，所以前面可以直接传对象：
<view class="content" >
<view class="row" v-for="item in newsArr" :key="item.id">
<!-- <newsbox :item="{title:'首页标题',author:'玛卡巴卡',history:'333',picurl:'../../static/images/nopic.png'}"></newsbox> -->
<newsbox :item="item" @click.native="goDetail"></newsbox>
</view>
</view>
这里有个需要注意的点：
我在获取新闻列表的时候默认给了一个值id=50，这样可以默认获取国内的新闻。
调用这个接口的时候可以传两个数据，一个cid一个num，每个新闻类别对应着不同的cid，num是一次获取新闻的数量。
点击导航切换也需要加上getNewsData方法，获取当前新闻类别的id：
// 点击导航切换
clickNav(index,id){
this.navIndex=index;
this.getNewsData(id);
},
因此这里传值也有变化：
目前就基本实现了完整的页面效果：
因为有的类别可能无数据，所以加上一个无数据时显示的盒子避免尴尬：
<view class="nodata" v-if="!newsArr.length">
<img src="../../static/images/tuli1.jpg" alt="" srcset="" mode="widthFix">
</view>
这样的话切到时尚类别就会有鸡的照片显示出来：
文章来源：https://www.toymoban.com/news/detail-535462.html
剩下别急明天更文章来源地址https://www.toymoban.com/news/detail-535462.html
到了这里，关于用uniapp完成一个前端项目的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
