Uni-app从入门到实战3天训练营 （二）

最新推荐文章于 2024-04-16 17:14:30 发布
最新推荐文章于 2024-04-16 17:14:30 发布
阅读量642 收藏 1
点赞数
分类专栏： uni-app 移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42580704/article/details/108315403
版权

一、珠峰课堂页面及导航的配置

1.1创建三个页面，index，user，classify

1.2官网-框架-pages.json-pages

uni-app 通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象

"pages": [ 
//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
	{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "首页", //设置页面标题文字
			"navigationStyle": "custom" 
			//导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，
		}
	},
	{
		"path": "pages/classify/classify",
		"style": {
			"navigationBarTitleText": "课程中心" //设置页面标题文字
		}
	},
	{
		"path": "pages/user/user",
		"style": {
			"navigationBarTitleText": "用户中心" //设置页面标题文字
		}
	}
],

1.3官网-框架-pages.json-tabBar

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

"tabBar": {
	"color": "#333", //tab 上的文字默认颜色
	"selectedColor": "#30d4e9", //tab 上的文字选中时的颜色
	"backgroundColor": "#ffffff",
	"list": [{
			"pagePath": "pages/index/index",
			"iconPath": "static/home.png",
			"selectedIconPath": "static/home-select.png",
			"text": "首页"
		},
		{
			"pagePath": "pages/user/user",
			"iconPath": "static/list.png",
			"selectedIconPath": "static/list-select.png",
			"text": "课程中心"
		},
		{
			"pagePath": "pages/classify/classify",
			"iconPath": "static/user.png",
			"selectedIconPath": "static/user-select.png",
			"text": "用户中心"
		}
	]
}

1.4页面表现
在这里插入图片描述

二、自定义导航栏组件及页面的常用钩子函数

2.1取消默认的原生导航栏
在这里插入图片描述
2.2创建组件
在这里插入图片描述
2.3引入组件

通过2.2创建组件，不用import引入，可以直接使用

在这里插入图片描述
2.4H5效果
在这里插入图片描述
2.5小程序效果
在这里插入图片描述
2.6在小程序中，navBar向下移动一个状态栏的高度

官网-API-设备-系统信息-uni.getSystemInfoSync()
获取系统信息同步接口。
statusBarHeight 状态栏的高度

结果：
H5页面：0
在这里插入图片描述
小程序：20
在这里插入图片描述

2.7新建一个view，高度为statusBarHeight，撑开状态栏的高度

<template>
	<view class="top_nav_box">
		<!-- 新建view，撑开状态栏的高度 -->
		<view :style="{height:statusBarHeight+'px'}"></view>
		<view class="nav_box">
			导航
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight:0
			};
		},
		created() {
			console.log(uni.getSystemInfoSync());
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		}
	}
</script>

<style lang="less" scoped>
.top_nav_box{
	background: #ccc;
}
</style>

在这里插入图片描述

在这里插入图片描述
2.8添加back按钮
在这里插入图片描述
2.9图标使用
2.9.1百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过

2.9.2:找到图标管理->我的项目->然后新建项目
在这里插入图片描述

2.9.3右边点击新建项目,用于保存自己常用的图标
在这里插入图片描述

2.9.3项目新建完成后,往项目里添加我们要想使用的图标,找到图标库,搜索一个想要的图标,然后添加到购物车
在这里插入图片描述

2.9.4点击加入购物车
在这里插入图片描述

2.9.5添加到购物车完成后,购物车徽章数字应该显示1了,点击右上角的购物车图标,选择添加至项目,选择我们刚刚创建的项目,确定
在这里插入图片描述

在这里插入图片描述

2.9.6自动跳转到对应的项目里了,如图

在这里插入图片描述
2.9.7复制代码
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
2.9.8使用：
在这里插入图片描述

<text class="iconfont iconback"></text>

2.10navBar中间的文字由navBar组件传入
在这里插入图片描述

2.11插槽
2.11.1使用slot
在这里插入图片描述
2.11.2 slot里面是默认值

在这里插入图片描述

2.12控制navBar是否需要左侧的返回按钮
在这里插入图片描述

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

2.13index页面滚动的时候，navBar的背景色改变

官网-框架-框架接口-生命周期-页面生命周期-onPageScroll

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

2.13.2代码

在这里插入图片描述

<template>
	<view class="content">
		<navBar :opa="opa" :left="true">首页</navBar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				opa: 0,
				flag: false
			}
		},
		//页面生命周期，需要写在页面
		// onPageScroll: function(e) { //nvue暂不支持滚动监听，可用bindingx代替
		//console.log("滚动距离为：" + e.scrollTop);

		onPageScroll: function({scrollTop}) {
			
			// console.log("滚动距离为：" + scrollTop);
			
			if (scrollTop > 5) {
				this.opa = 1;
			} else {
				this.opa = 0;
			}

			// if (this.flag) {
			// 	this.flag = false;
			// 	setTimeout(() => {
			// 		this.flag = true;
			// 		if (scrollTop > 5) {
			// 			this.opa = 1;
			// 		} else {
			// 			this.opa = 0;
			// 		}
			// 	}, 200)
			// }
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	.content {
		height: 2000rpx;
		background: pink;
	}
</style>

在这里插入图片描述

<template>
	<view class="top_nav_box">
		<!-- 新建view，撑开状态栏的高度 -->
		<view  :class="{opa:opa}"    :style="{'height':statusBarHeight+'px'}"></view>
		<view  :class="{opa:opa}"    class="nav_box">
			<text class="iconfont " :class="{ iconback: left }"></text>
			<view class="text_box">
				<slot>默认的头部</slot>
			</view>
			<text></text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			left: {
				type: Boolean,
				default: false,
			},
			opa:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				statusBarHeight: 0
			};
		},
		created() {
			console.log(uni.getSystemInfoSync());
			// this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		}
	}
</script>

<style lang="less" scoped>
	.top_nav_box {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;

		.nav_box {
			height: 45px;
			padding: 5px;
			background: rgba(0, 0, 0, 0);
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
		}

	}

	.opa {
		background: #eee!important;
	}
</style>

三、uni-app常用组件及组件的二次封装

3.1使用swiper組件

官网-组件-视图容器-swiper
在这里插入图片描述
在这里插入图片描述

3.2swiper组件需要往下移动

navBar是fixed状态，整个swiper往上错，所以现在整个要往下错

在这里插入图片描述
3.3在fixed的view外面加一个view
在这里插入图片描述
在这里插入图片描述

<template>
	<view :style="{'height':statusBarHeight + 45+ 'px'}">
		<view class="top_nav_box">
			<!-- 新建view，撑开状态栏的高度 -->
			<view  :class="{opa:opa}"    :style="{height:statusBarHeight+'px'}"></view>
			<view  :class="{opa:opa}"    class="nav_box">
				<text class="iconfont " :class="{'iconback': left }"></text>
				<view class="text_box">
					<slot>默认的头部</slot>
				</view>
				<text></text>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			left: {
				type: Boolean,
				default: false,
			},
			opa:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				statusBarHeight: 0
			};
		},
		created() {
			console.log(uni.getSystemInfoSync());
			// this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		}
	}
</script>

<style lang="less" scoped>
	.top_nav_box {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;

		.nav_box {
			height: 45px;
			padding: 5px;
			background: rgba(0, 0, 0, 0);
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
		}

	}

	.opa {
		background: #eee!important;
	}
</style>

3.4轮播图数据
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.5扩展组件

官网-组件-拓展组件
在这里插入图片描述

在这里插入图片描述

账号：qq邮箱
密码：dandan020800

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

在这里插入图片描述

四、uni-app中使用条件编译实现多端匹配

官网-介绍-条件编译
html、js、css都可以使用
在这里插入图片描述

<!-- #ifdef H5 -->
仅出现在 H5 平台下的代码
	<view class="hah">
		哈哈哈哈哈
	</view>
<!-- #endif -->

<!-- #ifndef H5 -->
除了 H5 平台，其它平台均存在的代码
	<view class="hah">
		非H5
	</view>
<!-- #endif -->

H5的结果：
在这里插入图片描述

小程序的结果

在这里插入图片描述

weixin_42580704
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app从入门到精通-10311421.pdf
05-28
uniapp，现在是很流行的，跨端用起来还是比较快的，大家可以尝试一下，这是一篇不错的文档，下载下来看一看。希望大家都来尝试。小程序还可以，不涉及到太多的原生调用，还是不错的，
uni-app从入门到实战系列：商城项目练习
11-02
原博客地址：https://blog.csdn.net/u010356768/article/details/126267124
uni-app从入门到实战
Debug的博客
03-16 3591
uni-app是啥？ uni-app是一个使用vue.js来开发所有前端应用的框架，开发者开发一套代码可以发布到os，安卓，h5等各种小程序 uni-app的作用 大大减少了开发者的时间成本，学会一个uni即可开发多个系统的应用，不需要再去学习其他的框架 环境搭建 安装HbuildX 安装完成之后创建项目为uni-app格式 安装微信开发者工具 如果是第一次使用微信小程序打开uni-app则会自动弹出需要配置小程序的安装路径，路径配置完之后打开微信小程序调试安全设置的开启 项目文件介绍
Uni—App初学者指南：从入门到精通
Csy123520的博客
04-16 967
UniApp是一个基于Vue.js框架的跨平台应用开发框架，可以帮助开发者使用Vue.js编写一次代码，然后将其发布到多个平台，包括iOS、Android和Web。对于初学者来说，掌握UniApp可以为你的应用开发之路带来巨大的便利。在本指南中，我们将探讨UniApp的学习目标、注意事项、提升方法以及项目案例练习。: 在掌握UniApp之前，首先需要对Vue.js有基本的了解和掌握，包括组件、指令、数据绑定等。
笔记-uni-app入门到实战 以项目为导向 掌握完整开发流程
qq_45784828的博客
08-25 863
总结所学 ​ uni.getSystemInfoSync //同步获取设备信息 // #ifndef APP-PLUS||H5 //h5不会编译下面这段话 let menuButton = uni.getMenuButtonBoundingClientRect();//获取微信胶囊信息 插件icons scoll-view组件 引用数据库 const db = uniCloud.database() 使用get，拿到数据。返回给客户端 await db.collection('user').doc(user
Uni-app从入门到实战3天训练营 （三）
weixin_42580704的博客
09-01 417
一、自定义弹窗组件 1.1实现播放的样式 index.vue <!-- 认识uniapp --> <view class="video"> <view class="til"> 认识uniapp </view> <view class="video_box"> <image src="http://www.zhufengpeixun.cn/skin/20142/img/zfBg2.jpg" mode="aspectFill"&
Uni-App从入门到实战
m0_52933282的博客
07-03 2665
Uni-App入门到一般
uni-app 从入门到光头.txt
05-12
uni-app多端适配技术自我学习，通往强者（光头）的钥匙
Uni-App从入门到实战教程[视频课程].txt打包整理.zip
03-06
Uni-App从入门到实战教程[视频课程].txt打包整理.zip
uni-app实战入门到实战项目之网易云音乐完整资料&视频教程
最新发布
04-28
uni-app实战入门到实战项目之网易云音乐完整资料视频教程提取方式是百度网盘分享地址
uni-app入门到实战
热门推荐
stc_ljc的博客
04-20 12万+
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台
uni-app前后端实战课悦读全套视频教程源码资源百度云资源
07-30
uni-app 前后端实战课 -《悦读》百度云视频 uni-app实战教程 – 《悦读》项目实战以uniapp为基础后端使用php+mysql，详细讲解了跨平台应用开发的方方面面！包含接口安全、接口交互、多图上传、服务器部署、uni-app开发常用知识点讲解！是一套非常全面的uniapp实战教程！
uni-app实战——创建项目、项目结构详解
02-24
注意这里的项目名称不是你的app的名称，app的名称需要在代码里定义这里要注意一下，我们以后写一个页面，一般是一个template里面嵌套一个view，然后在view里面编写你的代码最好不要一个template里面写多个view并列，否则会有一些未知的错误,下面是错误示范然后是js的代码，里面主要是vue的js语法 最后是css代码，用来美化页面页面就包含以上三个部分，我们点减号把代码收起，可以清晰的看到它的代码结构。里面有很多配置，比如应用名称、模块权限配置（支付、分享等权限）。。。这里主要是一个全局的js，我们写的通用的js方法可以封装，然后在这里引入，然后就可以在每个页面里用了。好了，大
uni-app开发基础与项目实战
06-30
课程分为两个章节 第一章：uni-app基础入门 第二章：项目实战 带领大家迅速掌握uni-app基础知识，各种组件的使用，数据渲染等等，通过调用接口，掌握数据的交互！ 下图是最终要做的uni-app实例
Uni-App从入门到实战教程
爱酷码的博客
11-21 1412
教程介绍 本课程从零开始，详细讲解环境搭建、数据绑定、生命周期、组件使用、条件注释跨端兼容、导航跳转等Uni-App基础，并结合【黑马商城】项目实战，让你快速熟悉并灵活运用Uni-app框架。适合有一定Vue基础或需要学习小程序开发的学员。 学习地址 百度：https://pan.baidu.com/s/10rujMNunJsNu1IDqwOVM7Q ...
【前后端实战项目】带你从入门到实战全面掌握 uni-app
你若盛开，清风自来
03-23 4534
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，具备"编写一次代码可发布到多个平台"的特点，大大的节省了开发成本，极速提升了开发效率。
【uni-app从入门到实战】组件和样式学习
Errol's Blog
08-12 780
组件和样式学习
2023年最新最全uniapp入门学习，零基础入门uniapp到实战项目，unicloud数据后台快速打造uniapp小程序项目
编程小石头
11-03 2万+
零基础入门uniapp的开发
uni-app入门介绍
05-27
Uni-app是一款跨端开发框架，可以使用Vue语法编写一次代码，即可在多个平台上运行，包括微信小程序、支付宝小程序、H5、App等。以下是对Uni-app的入门介绍： 1. 环境搭建：首先需要安装Node.js和HBuilderX，其中Node.js是JavaScript的运行环境，HBuilderX是Uni-app的开发工具。 2. 创建项目：在HBuilderX中创建Uni-app项目。可以选择创建空项目或者使用模板，如Vue、原生APP等。 3. 编写代码：Uni-app采用Vue语法，开发者可以使用Vue的组件、指令、生命周期等特性，编写跨端应用的代码。 4. 运行调试：在HBuilderX中可以使用模拟器或者真机调试，验证应用在不同平台上的运行效果。 5. 发布应用：在HBuilderX中可以选择发布应用，即将应用打包成不同平台的程序或者文件，发布到各个应用商店或者服务器上。 总之，Uni-app是一款非常优秀的跨端开发框架，具有高效、兼容性好、性能优秀等特性，适合开发者快速开发跨端应用。初学者可以通过搭建环境、创建项目、编写代码、运行调试和发布应用来快速上手Uni-app的开发。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值