位置: IT常识 - 正文
uni-app--》如何制作一个APP并使用？(uni-app编译)
编辑：rootadmin推荐整理分享uni-app--》如何制作一个APP并使用？(uni-app编译)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:uniapp制作,uni-app怎么运行,uni-app实战教程,uni-app cover-view,uni-app快速入门,uniapp制作,uniapp制作,uni app 视频教程,内容如对您有帮助，希望把文章链接给更多的朋友！
🏍️作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生
🛵个人主页：亦世凡华、
🛺系列专栏：uni-app
🚲座右铭：人生亦可燃烧，亦可腐败，我愿燃烧，耗尽所有光芒。
👀引言
⚓经过web前端的学习，相信大家对于前端开发有了一定深入的了解，今天我开设了uni-app专栏，主要想从移动端开发方向进一步发展，而对于我来说写移动端博文的第二站就是uni-app开发，希望看到我文章的朋友能对你有所帮助。
目录
项目搭建
配置tabBar路由
设置基础内容
导航栏点击样式设置
新闻详情页布局
新闻列表数据的详细展示
实现上拉触底效果
获取参数并跳转到详情页
项目的打包上线
项目开源Github
项目搭建
今天实现一个简单的新闻列表的小案例，并制作成一个APP在手机上下载使用，项目很简单，仅仅就只需要有两个路由来实现：index和user。如果第一次接触uni-app的话，欢迎订阅一下本专栏，学习里面的文章，项目的实现原理基本可以搞懂，废话不多说，直接上手操作。
配置tabBar路由因为仅有两个路由，所有在pages页面新建页面时，会自动生成配置路径，只要自己设置导航栏的标题即可，如下：
接下来需要对导航栏的标题颜色进行设置，这里我就设置在全局样式里面了，如果你对某一个页面需要指定特别的样式，可以在当前页面的路径的pages里单独设置颜色来覆盖全局样式，这里不再赘述，如下：
设置好导航栏的样式之后，便可以着手配置tabBar的相关样式设置了，这里的话可以设置一个点击的图表，图表可以自己在阿里云的字体图标库进行寻找，地址：iconfont-阿里巴巴矢量图标库 ：
选择自己喜欢的图表样式，将图片下载下来即可，然后导入到本地中进行引入即可：
设置基础内容接下来实现新闻列表的基础内容，如下：
<template><view><scroll-view scroll-x class="navscroll"><view class="item">国内</view><view class="item">国内</view><view class="item">国内</view><view class="item">国内</view><view class="item">国内</view><view class="item">国内</view><view class="item">国内</view><view class="item">国内</view></scroll-view><view class="connent"><view class="row" v-for="item in 10">数据</view></view></view></template><script>export default {data() {return {title: 'Hello'}},onLoad() {},methods: {}}</script><style lang="scss" scoped>.navscroll{height: 100rpx;background: #F7F8FA;white-space: nowrap;// 去掉H5端的滚动条/deep/ ::-webkit-scrollbar {width: 4px !important;height: 1px !important;overflow: auto !important;background: transparent !important;-webkit-appearance: auto !important;display: block;}.item{font-size: 40rpx;display: inline-block;line-height: 100rpx;padding: 0 30rpx;}}.connent {padding: 30rpx;.row{border: 1px dotted #efefef;padding: 15rpx 0;}}</style>接下来实现浏览历史的基础内容，如下：
<template><view class="user"><view class="top"><image src="../../static/logo.png" mode=""></image><text>浏览历史</text></view><view class="connent"> 数据</view></view></template><script>export default {data() {return {};}}</script><style lang="scss">.user{.top{padding: 50rpx 0;background: #F8F8F8;color: #555;display: flex;flex-direction: column;justify-content: center;align-items: center;image{width: 150rpx;height: 150rpx;}.text{font-size: 38rpx;padding-top: 20rpx;}}.connent {padding: 30rpx;.row{border: 1px dotted #efefef;padding: 15rpx 0;}}}</style>因为新闻列表界面和浏览历史界面都需要一些相同的数据，这里的话就可以将要展现的数据单独放在一个components组件里面进行一些数据的共享，通过设置一个props对象，将相关要展示的界面内容通过父组件传递过来的props数据进行相关展示，如下：
<template><view class="newsbox"><view class="pic"><image :src="item.picurl" mode="aspectFill"></image></view><view class="text"><view class="title">{{item.title}}</view><view class="info" v-if="!item.looktime"><text>作者：{{item.author}}</text><text>{{item.hits}}浏览</text></view><view class="info" v-else><text>浏览时间：{{item.looktime}}</text></view></view></view></template><script>export default {name:"newsbox",props:{item:{type:Object,default(){return {title:"组件内默认的标题",author:"张三",hits:668,picurl:"../../static/nopic.png",looktime:"2023-04-04 18:14:46"}}}},data() {return {};}}</script><style lang="scss"> .newsbox{display: flex;.pic{width: 229.5rpx;height: 160rpx;image{width: 100%;height: 100%;}}.text{flex: 1;padding: 20rpx;display: flex;flex-direction: column; // 上下排列justify-content: space-between; // 两侧排列.title{font-size: 32rpx;color: #333;text-overflow: -o-ellipsis-lastline;overflow: hidden;//溢出内容隐藏text-overflow: ellipsis;//文本溢出部分用省略号表示display: -webkit-box;//特别显示模式-webkit-line-clamp: 1;//行数line-clamp: 2;-webkit-box-orient: vertical;//盒子中内容竖直排列}.info{font-size: 26rpx;color: #999;text{padding-right: 30rpx;}}}}</style>新闻列表和浏览历史调用components组件，并通过props进行数据传参：
导航栏点击样式设置接下来设置导航栏的点击样式，当用户进行相关导航按钮的点击时，该文章会产生高亮效果，我们只需要动态绑定一个class属性，当我们选择的按钮等于当前的元素下标时，产生高亮效果，具体操作如下：
新闻详情页布局设置点击新闻列表页面的新闻内容进行页面的跳转，这里可以使用自定义事件，如果要将原生事件绑定到组件当中去，可以通过 .native 进行解决，详情可参考官方文档，如下：
这里我设置好新闻列表的路由界面后，设计点击事件可以通过navigateTo实现页面跳转，如下：
设置好跳转路径后，接下来可以通过设置新闻详情页的内容布局，大致情况设置如下：
<template><view class="detail"><view class="title">新闻标题</view><view class="info"><view class="author">编辑：张三</view><view class="time">2023-12-13 15:34:59</view></view><view class="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容as</view><view class="description">下一篇：本地部署element-plus文档(本地部署gpt4)
