uni-app实战项目，跟着做完你就可以独立作战了（一）

最新推荐文章于 2023-08-15 17:38:06 发布
最新推荐文章于 2023-08-15 17:38:06 发布
阅读量1.4w 收藏 409
点赞数 64
分类专栏： uni-app 文章标签： 新星计划 uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/blue_698/article/details/118086532
版权

初始化项目

编辑器为HBuilder
编辑器的安装看之前的打包项目中有介绍
十分钟教你学会打包APP

创建uniapp项目

在这里插入图片描述
在这里插入图片描述
一开始是没有云服务空间的，我们右击创建
在这里插入图片描述
点击之后会打开云空间网址
阿里云 云空间
在这里插入图片描述
创建好之后
在这里插入图片描述

在这里插入图片描述
右击关联即可
在这里插入图片描述

初始化数据库

在这里插入图片描述
我们有一个云数据库文件
数据库下载链接
此文件一定要放到cloudfunctions 文件夹下

右击初始化等待即可

实现tabbar

准备工作：在pages下面创建tabbar文件夹，然后在此文件夹下创建三个文件夹，右击新建页面，勾选上在pages.json注册
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

"tabBar":{
		"color":"#666",
		"selectedColor":"#f07373",
		"backgroundColor":"#FFFFFF",
		"list":[
			{
				"pagePath":"pages/tabbar/index/index",
				"iconPath":"static/home.png",
				"selectedIconPath":"static/home-active.png",
				"text":"首页"
			},
			{
				"pagePath":"pages/tabbar/follow/follow",
				"iconPath":"static/follow.png",
				"selectedIconPath":"static/follow-active.png",
				"text":"关注"
			},
			{
				"pagePath":"pages/tabbar/my/my",
				"iconPath":"static/my.png",
				"selectedIconPath":"static/my-active.png",
				"text":"我的"
			}
		]
	}

在这里插入图片描述

在这里插入图片描述
点击对应的就可以跳转了
图片可以自己做，也可以去阿里巴巴矢量库图标下载喜欢的
iconfont-阿里巴巴矢量库图标

自定义导航栏

我们使用scss语法做样式编写，大家可以去插件市场下载
在这里插入图片描述
插件链接
在这里插入图片描述
等待他自己导入即可
我们做自定义导航栏
在这里插入图片描述
pages.json对应下面加入这个语句
就可以将他原本的导航栏去掉

正常情况，我们需要引入组件才可以使用，但是uniapp中不需要写，自带easyCom功能
如果是components/组件名/组件名.vue的话就可以直接使用此组件
组件名写错了，大家改为正确的哦 navbar
在这里插入图片描述

components/navbar/navbar.vue编写

在这里插入图片描述
uni.scss可以设置颜色变量全局使用
在这里插入图片描述
在这里插入图片描述
虽然h5页面中无影响但是小程序中就不同了
我们要做一下小程序适配工作
在这里插入图片描述
在这里插入图片描述

最终效果
在这里插入图片描述

最终代码

<template>
	<view class="navbar">
		<view class="navbar-fixed">
			<!-- 状态栏 -->
			<view :style="{height:statusBarHeight+'px'}"></view>
			<!-- 导航栏内容 -->
			<view class="navbar-content" :style="{height: navBarHeight+'px',width:windowWidth+'px'}">
				<view class="navbar-serach">
					<view class="navbar-serach_icon">
						<uni-icons type="search"></uni-icons>
					</view>
					<view class="navbar-serach_text">uni-app、vue、react</view>
				</view>
			</view>
		</view>
		<view :style="{height: statusBarHeight+navBarHeight+'px'}"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight:20,
				navBarHeight:45,
				windowWidth:375
			};
		},
		created() {
			this.onload()
		},
		methods:{
			onload(){
				// 获取手机信息
				const info= uni.getSystemInfoSync()
				this.statusBarHeight=info.statusBarHeight
				this.windowWidth=info.windowWidth
				// #ifndef H5 || APP-PLUS || MP-ALIPAY
				// 获取胶囊位置
				const menuButtonInfo=uni.getMenuButtonBoundingClientRect()
				this.navBarHeight=(menuButtonInfo.bottom-info.statusBarHeight)+(menuButtonInfo.top-info.statusBarHeight)
				this.windowWidth=menuButtonInfo.left
				// #endif
			}
		}
	}
</script>

<style lang="scss">
.navbar{
	.navbar-fixed{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;
		background-color: $mk-base-color;
		.navbar-content{
			padding: 0 15px;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			.navbar-serach{
				display: flex;
				align-items: center;
				width: 100%;
				height: 30px;
				border-radius: 30px;
				padding: 0 10px;
				background-color: #fff;
				.navbar-serach_icon{
					margin-right: 10px;
				}
				.navbar-serach_text{
					font-size: 12px;
					color: #999;
				}
			}
		}
	}
}
</style>

自定义导航栏组件

components/tab/tab.vue编写

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

get_label 云函数编写

在这里插入图片描述

引用数据库数据

在pages\tabbar\index\index.vue中编写如下

我们需要在methods里面定义函数来获取云函数返回的值，让将值赋值给定义的变量，再传给组件
在这里插入图片描述
组件里使用props来接收父组件传过来的值
在这里插入图片描述
效果就是这样子
在这里插入图片描述

统一管理云函数请求

我们在根目录下/common/api里面进行封装请求

在这里插入图片描述
在api/index.js编写
在这里插入图片描述

在main.js中引入，在挂载至$api上供全局使用
在这里插入图片描述
我们就可以在index.vue首页中调用了
在这里插入图片描述
效果还是一样的 没变化
在这里插入图片描述
但是我建议分开写

不至于一个文件写很多代码

list代表文章类的

后面还有许多类可以自己起名字，我们将一个类的请求放到一个里面

在这里插入图片描述
我们在index.js中做一个批量导出操作，这样我们就不需要写一个导出一个了

在这里插入图片描述

完成tab选项卡切换高亮

点击某个颜色高亮
在这里插入图片描述
添加点击事件并处理
添加类名做颜色改变

在这里插入图片描述

在这里插入图片描述
index.vue父组件中接收
在这里插入图片描述

在这里插入图片描述

完成首页内容

红色框内为内容区域，可以在框内上下滚动的
在这里插入图片描述

在这里插入图片描述
暂时代码

<template>
	<view class="home">
		<!-- 自定义导航栏组件 -->
		<navbar></navbar>
		<!-- 自定义选项卡 -->
		<tab :list="tabList" @tab="tab"></tab>
		
		<view class="scroll">
			<scroll-view class="list-scrool" scroll-y="true" >
				<view>
					<view v-for="(item,index) in 100" :key="index">
						{{item}}
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList:[]
			}
		},
		onLoad() {
			this.getLabel()
		},
		methods: {
			// 获取tab选项卡内容
			getLabel(){
				// 调用api
				this.$api.get_label({name:'get_label'})
				.then(res=>{
					this.tabList=res.data
				})
			},
			tab({data,index}){
				// console.log(data,index)
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		display: flex;
		.home{
			display: flex;
			flex-direction: column;
			flex: 1;
			.scroll{
				flex: 1;
				overflow: hidden;
				box-sizing: border-box;
				.list-scrool{
					height: 100%;
					display: flex;
					flex-direction: column;
				}
			}
		}
	}
</style>

我们在内容区域放置自定义内容组件
在这里插入图片描述
基础卡片实现
在这里插入图片描述
在这里插入图片描述
多图卡片实现
在这里插入图片描述
在这里插入图片描述
大图模式
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
最后一个mode值应该为column
在这里插入图片描述
在这里插入图片描述
在主页面传值，组件中接收，然后再用条件判断显示

在这里插入图片描述

完整代码

<template>
	<view class="list">
		<!-- 基础卡片 -->
		<view v-if="mode==='base'" class="listcard">
			<view class="listcard-image">
				<image src="/static/logo.png" mode="aspectFill"></image>
			</view>
			<view class="listcard-content">
				<view class="listcard-content_title">
					<text>客户反馈进度沙河第六个赫迪拉火锅底料海底捞黑风海林海海客户反馈进度沙河第六个赫迪拉火锅底料海底捞黑风海林海海</text>
				</view>
				<view class="listcard-content_des">
					<view class="listcard-content_des-label">
						<view class="listcard-content_des-label-item">
							前段
						</view>
					</view>
					<view class="listcard-content_des-browe">
						120浏览
					</view>
				</view>
			</view>
		</view>
		
		<!-- 多图模式 -->
		<view v-if="mode==='image'" class="listcard mode-column">
			<view class="listcard-content">
				<view class="listcard-content_title">
					<text>客户反馈进度沙河第六个赫迪拉火锅底料海底捞黑风海林海海客户反馈进度沙河第六个赫迪拉火锅底料海底捞黑风海林海海</text>
				</view>
				<view class="listcard-image">
					<view v-for="(item,index) in 3" :key="index" class="listcard-image_item">
						<image src="/static/logo.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="listcard-content_des">
					<view class="listcard-content_des-label">
						<view class="listcard-content_des-label-item">
							前段
						</view>
					</view>
					<view class="listcard-content_des-browe">
						120浏览
					</view>
				</view>
			</view>
		</view>
		<!-- 大图模式 -->
		<view v-if="mode==='column'" class="listcard mode-image">
			<view class="listcard-content">
				<view class="listcard-image">
					<image src="/static/logo.png" mode="aspectFill"></image>
				</view>
				<view class="listcard-content_title">
					<text>客户反馈进度沙河第六个赫迪拉火锅底料海底捞黑风海林海海客户反馈进度沙河第六个赫迪拉火锅底料海底捞黑风海林海海</text>
				</view>
				<view class="listcard-content_des">
					<view class="listcard-content_des-label">
						<view class="listcard-content_des-label-item">
							前段
						</view>
					</view>
					<view class="listcard-content_des-browe">
						120浏览
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			mode:{
				type:String,
				default:'base'
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.list{
		.listcard {
			display: flex;
			padding: 10px;
			margin: 10px;
			border-radius: 5px;
			box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.1);
			box-sizing: border-box;
		
			.listcard-image {
				flex-shrink: 0;
				width: 60px;
				height: 60px;
				border-radius: 5px;
				overflow: hidden;
		
				image {
					width: 100%;
					height: 100%;
				}
			}
		
			.listcard-content {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-left: 10px;
				width: 100%;
		
				.listcard-content_title {
					position: relative;
					padding-right: 30px;
					font-size: 14px;
					color: #333;
					font-weight: 400;
					line-height: 1.2;
		
					text {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
		
				}
		
				.listcard-content_des {
					display: flex;
					justify-content: space-between;
					font-size: 12px;
		
					.listcard-content_des-label {
						display: flex;
		
						.listcard-content_des-label-item {
							padding: 0 5px;
							margin-right: 5px;
							border-radius: 15px;
							color: $mk-base-color;
							border: 1px $mk-base-color solid;
						}
					}
		
					.listcard-content_des-browe {
						color: #999;
						line-height: 1.5;
					}
				}
			}
		
			&.mode-column {
				.listcard-content {
					width: 100%;
					padding-left: 0;
				}
		
				.listcard-image {
					display: flex;
					margin-top: 10px;
					width: 100%;
					height: 70px;
		
					.listcard-image_item {
						margin-left: 10px;
						width: 100%;
						border-radius: 5px;
						overflow: hidden;
		
						&:first-child {
							margin-left: 0;
						}
		
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
		
				.listcard-content_des {
					margin-top: 10px;
				}
			}
		
			&.mode-image {
				flex-direction: column;
				.listcard-image {
					width: 100%;
					height: 100px;
				}
		
				.listcard-content {
					padding-left: 0;
					margin-top: 10px;
		
					.listcard-content_des {
						display: flex;
						align-items: center;
						margin-top: 10px;
					}
				}
			}
		}
	}
</style>

首页切换实现 敬请期待下一篇

David凉宸
关注
  • 64
    点赞
  • 踩
  • 409
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 52
    评论
专栏目录
uni-app实战——创建项目、项目结构详解
02-24
注意这里的项目名称不是你的app的名称，app的名称需要在代码里定义这里要注意一下，我们以后写一个页面，一般是一个template里面嵌套一个view，然后在view里面编写你的代码最好不要一个template里面写多个view并列，否则会有一些未知的错误,下面是错误示范然后是js的代码，里面主要是vue的js语法 最后是css代码，用来美化页面页面就包含以上三个部分，我们点减号把代码收起，可以清晰的看到它的代码结构。里面有很多配置，比如应用名称、模块权限配置（支付、分享等权限）。。。这里主要是一个全局的js，我们写的通用的js方法可以封装，然后在这里引入，然后就可以在每个页面里用了。好了，大
uniapp实战项目 （仿知识星球App) - - 效果篇
热门推荐
业余丰富各种技术栈
08-21 2万+
uni-app实战，手把手教你写uni-app,以及uni-app踩坑分享
uni-app 小案例解析
sunshine_0707的博客
11-28 1万+
效果：                   1.Fly官网地址：https://wendux.github.io/dist/#/doc/flyio/readme     2.项目文件：        2.1 网络请求的request.js //目前没有针对uni的Fly版本，使用wx版本没有问题,引入Fly import Fly from 'flyio/dist/npm/wx' ...
【uni-app系列】uni-app从0到1开发实例
邓邓子的博客
08-30 2115
https://unidemo.dcloud.net.cn/api/news/36kr/ + id （id 为新闻id，上个页面传过来的）
uni-app实战在线教育类app开发-视频教程网盘链接提取码下载.txt
11-07
本季度基于uni-app实战开发在线教育类app和小程序，课程包括：图文，音频，视频，电子书、会员、直播、问答、考试、拼团秒杀、优惠券。一次开发，同时搞定Android、iOS、微信小程序、H5端。非常适合具有Html+Css+JavaScript基础，有一定的Vue.js基础，挑战高薪职位的你。 视频大小：7.5G
uni-app 项目实战
qq_38210427的博客
04-22 449
一、项目搭建前端：uni-app后端：若依框架1. 说明uni-app的基础语法不会讲2. 搭建项目1. 在hubilder中创建uni-app项目2. 下载【微信小程序开发工具】注意：登录修改appId. 拿自己的。
uniapp案例30余种实战项目
qq_27161847的博客
08-15 4008
追书、美团、滴滴、IT之家、商城、聊天项目实战案例
uniapp技术应用，以及案列讲解
qinjinhua_的博客
08-01 3659
uniapp项目实现小程序+android多端运行以及打包发布流程
【uni-app】第三方ui组件推荐&&引入的方法
一位前行者的博客
05-12 1万+
uniapp项目第三方ui推荐，微信小程序引入vant-weapp,微信小程序引入u-view,uniapp中引用vant weapp 使用easycom，uniapp使用vant weapp，并使用easycom自动批量移入组件
十套uniapp开发项目实例课程
06-26
uni-app实战直播app全栈开发​​​​​​ uni-app实战音频小说app小程序​​​​​ uni-app实战视频点播app小程序​​​​​​ 在线协同办公小程序开发 全栈式项目实战【完结】​ uni-app跨端云开发实战拍照识别垃圾分类精灵 uni-app入门到实战项目之《仿网易云音乐》【完整资料】 uni-app实战仿微信app开发​​​​​ uni-app实战社区交友类app开发​​​​​​ uni-app实战商城类app和小程序​​​​​​ uni-app多端企业网盘全栈开发
基于uni-app开发的微信小程序商城项目
08-03
uni-app巨惠购微信小程序介绍 此项目是基于uni-app开发的微信小程序商城项目，开发工具用的是Hbuilder和微信开发者工具，前端用的vue3.0,后台的数据用的是用node搭建的本地服务器，通过内网穿透的方式进行数据外网访问的方式，只局限做开发和测试能访问到本地的数据，由于微信小程序官方限制，如果打算做上线的应用请购买服务器，域名解析数据，这里不在细讲，适合新手和初学者当试手项目，大家可以交流学习！ git下载： https://gitee.com/lhxzlhm/juhuigou.git
32个uniapp项目源码 涵盖商城团购等-网盘链接提取码下载.txt
10-04
IT之家小程序版客户端(使用 Mpvue 开发，兼容 Web) 仿网易严选 音乐播放器 性能测试与体验 改造的日历 框架仿滴滴出行 高仿美团小程序教程 APP自动更新并安装 沉浸式状态栏(线性渐变色) 二维码生成器分享 侧边导航分类,适合商品分类页面 自定义底部导航栏 全局变量的几种实现方式 富文本编辑器插件 自定义导航栏 聊天实例，支持图片，语音，表情.zip uniapp选择器,包含一级,二级级联,三级级联 聊天机器人 【小程序】CNode社区mpvue-cnode-master.zip 【插件、图表】7种图表漂亮丰富 一款播课类小程序 云档新版小程序端 仿uc浏览器列表 仿扎克新闻 仿网易云UImusic播放器 仿追书神器的小说阅读器小程序 参照米家APP布局和样式,编写的一款智能家居小程序 商城实例 实现豆瓣电影微信小程序 校园助手示例 类似mui中的chat(聊天窗口)实现 美团外卖(第三方)开源程序 美食搜索 豆瓣平分
uniapp项目源码示例房源系统uniapp项目源码示例房源系统
10-13
uniapp项目源码示例房源系统uniapp项目源码示例房源系统
uni-app+Vue3+pinia+uview-plus搭建的项目包
最新发布
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
uni-app实战项目.zip
09-11
uni-app实战项目.zip
了解uni-app只需这一篇就足够了
CSDN凉宸
06-14 1万+
什么是uni-app 介绍 uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台 uni-app在手，做啥都不愁，即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯 只要你有Vue和小程序的开发经验，即可快速上手
uniapp项目实战
07-27
UniApp 是一个基于 Vue.js 的跨平台开发框架，可以用于快速开发移动应用（包括iOS和Android）、H5和小程序。下面是一个简单的 UniApp 项目实战示例： 1. 安装 UniApp：在命令行中运行以下命令来全局安装 UniApp： ``` npm install -g @vue/cli @vue/cli-init ``` 2. 创建 UniApp 项目：在命令行中运行以下命令来创建一个新的 UniApp 项目： ``` vue init dcloudio/uni-template-vue my-uniapp ``` 这将使用官方提供的 Vue 模板来初始化一个 UniApp 项目。 3. 进入项目目录：在命令行中运行以下命令进入项目目录： ``` cd my-uniapp ``` 4. 启动开发服务器：在命令行中运行以下命令来启动开发服务器： ``` npm run dev:%PLATFORM% ``` 其中 `%PLATFORM%` 是你要开发的平台，比如 `mp-weixin` 表示微信小程序。 5. 在开发工具中预览项目：将项目导入到对应的开发工具中，比如微信开发者工具，然后在工具中预览和调试项目。 6. 开发和调试：根据需要，在 `src` 目录下编写页面和组件的代码，然后在开发工具中预览和调试。 7. 构建和发布：在命令行中运行以下命令来构建项目： ``` npm run build:%PLATFORM% ``` 其中 `%PLATFORM%` 是你要构建的平台，比如 `mp-weixin` 表示微信小程序。 然后将构建好的代码发布到对应的应用商店或者扫码发布到小程序平台。 这只是一个简单的 UniApp 项目实战示例，你可以根据自己的需求和技术栈进行更加复杂和完善的开发。UniApp 提供了丰富的组件库和开发工具，使得跨平台开发变得更加便捷和高效。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 52
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

David凉宸

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值