uniapp怎么创建项目(uni app开发教程)

uni-app--》如何制作一个APP并使用它？关于作者：大家好，我是易事繁花，一名渴望积累知识的大学生。

个人主页：一石繁花，

专栏系列：uni-app

座右铭：生命可以燃烧，也可以腐败。我愿意燃烧并耗尽所有的光芒。

介绍

经过学习了Web前端，相信大家对前端开发都有了一定的深入了解。今天开设uni-app专栏，主要是从移动端发展方向进一步展开，而对于我来说，这是撰写移动端博文的第二站。这是单一应用程序开发。希望阅读我文章的朋友能够对您有所帮助。

目录

项目设置

配置tabBar路由

设置基本内容

导航栏点击样式设置

新闻详情页面布局

新闻列表数据详细展示

实现上拉筑底效果

获取参数并跳转详情页面

项目打包并上线

项目开源Github

项目搭建

今天实现了一个简单新闻列表的小案例，并将其制作成一个APP，供手机上下载使用。该项目非常简单，只需要两个路由来实现：index和user。如果您是第一次接触uni-app，欢迎您订阅本专栏，学习其中的文章。基本可以了解项目的实现原理了。话不多说，直接开始吧。

配置tabBar路由

由于只有两条路由，在pages页面新建页面时，会自动生成配置路径。自己设置导航栏的标题即可，如下：

接下来，您需要设置导航栏的标题颜色。这里我设置为全局样式。如果需要为某个页面指定特殊的样式，可以在当前页面路径的页面中单独设置颜色来覆盖全局样式。这里不再详细描述，如下：

设置好导航栏的样式后，就可以开始配置tabBar的相关样式设置了。在这里，您可以设置可点击的图表。您可以在阿里云的字体和图标库中搜索该图表。地址：iconfont-阿里巴巴矢量图标库：

选择您喜欢的图表样式，下载，然后导入本地：

设置基础内容

接下来实现新闻列表的基本内容，如下：

templateviewscroll-view滚动-xclass='navscroll'viewclass='item'domestic/viewviewclass='item'domestic/viewviewclass='item'domestic/viewviewclass='item'domestic/viewviewclass='item'domestic/viewviewclass='item'domestic/viewviewclass='item'domestic/viewviewclass='item'domestic/view/scroll-viewviewclass='connent'viewclass='row'v-for='itemin10'data/view/view/view/templatescriptexport默认{data(){return{title:'Hello'}},onLoad(){},methods:{}}/scriptstylelang='scss'scoped.navscroll{height:100rpx;background:#F7F8FA;white-space:nowrap;//去掉H5侧的滚动条/deep/:-webkit-scrollbar{width:4px!important;height:1px!important;overflow:auto!important;background:透明!important;-webkit-appearance:auto!important;display:block;}.item{font-size:40rpx;display:inline-block;line-height:100rpx;padding:030rpx;}}.connent{padding:30rpx;row{border:1px点线#efefef;padding3336015rpx0;}}/样式

接下来实现浏览历史的基本内容，如下：

templateviewclass='user'viewclass='top'imagesrc='././static/logo.png'mode=''/imagetextbrowsingHistory/text/viewviewclass='connent'data/view/view/templatescriptexport默认{data(){return{};}}/scriptstylelang='scss'.user{.top{padding:50rpx0;background:#F8F8F8;color:#555;display:flex;flex-direction:列；justify-content:center;align-items:center;image{width:150rpx;height:150rpx;}.text{font-size:38rpx;padding-top:20rpx;}}.connent{padding:30rpx;row{border:1px点线#efefef;填充：15rpx0;}}}/风格

因为新闻列表界面和浏览历史界面都需要一些相同的数据，这里可以将要显示的数据放在一个Components组件中来共享一些数据，并设置一个props对象来传递要显示的相关界面内容。父组件传递过来的props数据也会相应显示，如下：

templateviewclass='newsbox'viewclass='pic'image:src='item.picurl'mode='aspectFill'/image/viewviewclass='text'viewclass='title'{{item.title}}/viewviewclass='info'v-if='!item.looktime'textAuthor:{{item.author}}/texttext{{item.hits}}View/text/viewviewclass='info'v-elsetext查看时间：{{item.looktime}}/text/view/view/view/templatescriptexportdefault{name:'newsbox',props:{item:{type:Object,default(){return{title:'组件中默认标题',author:'张三',hit:668,picurl:'././static/nopic.png',looktime:'2023-04-0418:14:46'}}}},data(){return{};}}/scriptstylelang='scss'.newsbox{display:flex;pic{width:229.5rpx;height:160rpx;image{width:100%;height:100%;}}.text{flex:1;padding:20rpx;display:flex;flex-direction:列；//上下排列justify-content:之间的空格；//两边排列.title{font-size:32rpx;color:#333;text-overflow:-o-ellipsis-lastline;overflow:hide;//隐藏溢出内容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传递数据参数：

导航栏点击样式设置

接下来，设置导航栏的点击样式。当用户点击相关导航按钮时，文章会有高亮效果。我们只需要动态绑定一个类属性即可。当我们选择的按钮等于当前元素的标记时，就会产生高亮效果。具体操作如下：

新闻详情页布局

设置新闻列表页点击新闻内容时的页面跳转。可以在此处使用自定义事件。如果想给组件绑定原生事件，可以通过.native来解决。具体可以参考官方文档，如下：

这里，我设置好新闻列表的路由界面后，设计了点击事件，通过navigateTo实现页面跳转，如下：

设置好跳转路径后，就可以设置新闻详情页的内容布局了。一般设置如下：

templateviewclass='detail'viewclass='title'新闻标题/viewviewclass='info'viewclass='author'编辑：张三/viewviewclass='time'2023-12-1315:34:59/view/viewviewclass='content'中统一内容内容内容内容内容内容内容内容内容内容内容内容内容内容='description'Statement：本网站的内容是从TencentNews收集的，如果有任何侵权，请联系管理层@qq.com)进行更正和删除。本站内容采集不代表本站及作者观点。如有侵权，请及时联系管理员。感谢您的支持。/view/view/templatescriptexport默认{data(){return{};}}/scriptstylelang='scss'.detail{padding:30rpx;title{font-size:46tpx;color:#333;}.info{background:#f6f6f6;padding:20rpx;font-size:25rpx;color:#666;display:flex;justify-content:空格；margin:40rpx0;}.content{padding-bottom:50rpx;}.description{background:#FEF0F0;font-size3336026转；padding:20rpx;color:#F89898;line-height:1.8em;}}/样式

新闻列表数据的详细展示

接下来实现显示详细数据的调用接口，如下：

通过传递itemID，我们就可以获取不同ID下导航栏向我们展示的新闻数据。

然后给个来展示，没有数据时页面的样式

具体结果如下：

实现上拉触底效果

接下来我们需要实现上拉和触底的效果。实现上拉触底效果的函数是：onReachBottom，如下：

为了展示具体效果，我将浏览器的网速设置为低速3G，如下：

获取参数并跳转到详情页

通过设置点击函数参数，将item参数传递给函数，通过模板字符串传递参数，如下：

传递参数后，设置新闻详情界面的布局，缓存访问的数据，并对相同数据进行去重。详细代码如下：

templateviewclass='detail'viewclass='title'{{detail.title}}/viewviewclass='info'viewclass='author'编辑器：{{detail.author}}/viewviewclass='time'发布日期：{{detail.posttime}}/view/viewviewclass='content'rich-text:nodes='detail.content'/rich-text/viewviewclass='description'声明：本站内容采集自腾讯新闻。如有侵权，请联系管理进行纠正和删除。本站内容采集不代表本站及作者观点。如有侵权，请及时联系管理员。感谢您的支持。/view/view/templatescriptimport{parseTime}from'./utils/tool.js'exportdefault{data(){return{options:null,detail:{},};},onLoad(e){this.options=ethis.getDetail()},methods:{getDetail(){uni.request({url:'',data:this.options,success:res={//res.data.posttime=parseTime(res.data.posttime)//时间有点老了，所以我注释掉了，换成了固定时间res.data.posttime='2023-04-0418:37:49'res.data.content=res.data.content.replace(/img/gi,'imgstyle='max-width:100%'')this.detail=res.datathis.saveHistory()uni.setNavigationBarTitle({title:this.detail.title})}})},//保存浏览历史saveHistory(){lethistoryArr=uni.getStorageSync('historyArr')||[]letitem={id:this.detail.id,classid:this.detail.classid,picurl:this.detail.picurl,title:this.detail.title,looktime:parseTime(Date.now())}letindex=HistoryArr.findIndex(i={returni.id==this.detail.id})if(index=0){historyArr.splice(index,1)}historyArr.unshift(item)historyArr=historyArr.slice(0,10)uni.setStorageSync('historyArr',historyArr)}}}/scriptstylelang='scss'.detail{padding:30rpx;title{font-size:46tpx;color:#333;}.info{background:#f6f6f6;padding:20rpx;font-size:25rpx;color:#666;display:flex;justify-content:space-Between;margin:40rpx0;}.content{padding-bottom:50rpx;//H5end///deep/img{//max-width:100%;//}}.description{background:#FEF0F0;font-size:26rpx;padding:20rpx;color:#F89898;line-height:1.8em;}}/样式

设置好新闻列表的具体内容后，当我们点击浏览历史记录的路由时，就会获取传递过来的参数以及浏览器缓存中存储的数据，并显示在页面上。详细代码如下：

templateviewclass='user'viewclass='top'imagesrc='././static/logo.png'mode=''/imagetextbrowsingHistory/text/viewviewclass='connent'viewclass='row'v-for='listArr中的项目'newsbox:item='项目'@click.native='goDetail(item)'/newsbox/view/viewviewclass='nohistory'v-if='!listArr.length'imagesrc='././static/images/no-data.jpg'mode='widthFix'/imagetextNo浏览记录/text/view/view/templatescriptexportdefault{data(){return{listArr:[]};},onShow(){this.getData()},methods:{//跳转到详情页goDetail(item){uni.navigateTo({url:`/pages/detail/detail?cid=${item.classid}id=${item.id}`})},//获取缓存的浏览记录getData(){lethisArr=uni.getStorageSync('historyArr')||[]this.listArr=hisArr}}}/scriptstylelang='scss'.user{.top{padding:50rpx0;background:#F8F8F8;color:#555;display:flex;flex-direction:列；justify-content:center;align-items:中心；图像{width:150rpx;height:150rpx;}.text{font-size:38rpx;padding-top:20rpx;}}.connent{padding:30rpx;row{border:1px点线#efefef;padding:15rpx0;}}。nohistory{display:flex;flex-direction:column;justify-content33360center;align-items:center;image{width:450rpx;}.text{font-size:26rpx;color:#888;}}}/样式

具体效果如下：

项目的打包上线

项目OK后，就可以在微信小程序下进行模拟了，如下：

没有问题后，项目文件中会出现一个打包好的文件夹，解压，如下：

接下来，在各个平台上线。如果这是您第一次使用此工具，您需要执行一些基本配置：

H5平台上线

为以下Web配置设置基础架构

接下来，单击编辑器工具栏上的发布选项，然后选择网站-PCWeb或移动H5

微信小程序平台上线

点击分发中的小程序-微信平台分发

您也可以在此处将其设置为试用版。扫描二维码进入后，应该没有数据。您可以在手机上打开调试模式来获取数据。

APP平台上线

这里首先设置App图表并选择对应的图表。

点击小编发的第一个，NativeAppCloudPackaging，选择云证书直接打包。

等待一段时间后，控制台提示我们打包成功，如下：

获得该apk文件后，可以发送至QQ或微信进行安装下载。

ok，传到手机QQ上，点击下载，如下

项目开源Github

接下来将项目开源，给出以下详细步骤：

创建远程仓库：进入github网站，登录账号点击右上角头像创建新仓库，如下

创建完成后，会跳转到如下界面。上面的代码详细告诉你如何将代码提交到远程库：

提交代码需要借用git工具。如何下载这里不再赘述。你可以自己百度一下。如果你想进一步了解git的使用，可以参考我之前的专栏：git专栏。详细操作如下：

生成本地仓库：具体步骤如下：

gitinit生成工作空间

git添加.提交至暂存区

gitcommit-m'news'提交到版本区

推送到远程仓库：具体步骤如下：

gitRemoteaddorigingit@github.com:ztK63LrD/Today-s-News.git关联别名

gitpush-uorigin主推分支

推送完成后，刷新github页面就会在页面上显示我们推送的代码，如下：

因为我写完项目就推送到远程仓库了，而且只是一个小case，所以就不创建其他的子分支了。这里是该项目的源地址文件：GitHub-ztK63LrD/Today-s-News:简单新闻列表对于本例，可以gitclone到本地进行测试。如果可能的话，请点击三重链接或给该项目一点星。您的支持是我创作最大的动力。