uni-app学习笔记

news2024/11/25 13:47:18

目录

一、前期准备

1、项目认识

2、pages.json基本配置

3、创建页面

二、tabBar

1、获取图标

2、代码配置

三、基础认识

1、页面生命周期

2、App.vue应用生命周期

四、基础组件

1、scroll-view可滚动视图区域

2、提示框

3、swiper滑块视图容器

4、form表单组件

一、前期准备

1、项目认识

（1）新建项目

（2）启动项目

①运行到浏览器上

②运行到微信开发者工具

如果出现以下弹框，选择已安装好的微信开发者工具路径，确定即可

如果出现“工具的服务端口已关闭”，是因为微信开发者工具设置问题

解决如下：

随便打开微信开发者工具的一个工程=》点击设置=》通用设置=》安全=》打开服务端口

（3）中文解释

2、pages.json基本配置

（1）globalStyle全局配置

{
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "全局",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
}

（2）局部页面的配置

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		}
	],
}

3、创建页面

（1）右键pages文件夹=》点击新建页面

（2）新页面配置

①如果没有自动生成需要手动添加配置

②注意：与微信小程序一样，配置时，哪个页面放在前面，就先显示哪个页面

{
	"pages": [
		{
		    "path" : "pages/about/about",
		    "style" :                                                                                    
		    {
		        "navigationBarTitleText": "关于",
		        "enablePullDownRefresh": false
		    }
		    
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		}
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "全局",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

二、tabBar

1、获取图标

（1）小伙伴可以在iconfont选择需要的图标

iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具icon-default.png?t=N7T8https://www.iconfont.cn/（2）将下载好的图标放到static文件夹中

2、代码配置

{
	"pages": [
		{
		    "path" : "pages/about/about",
		    "style" :                                                                                    
		    {
		        "navigationBarTitleText": "关于",
		        "enablePullDownRefresh": false
		    }
		    
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		}
    ],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "全局",
		"navigationBarBackgroundColor": "#000000",
		"backgroundColor": "#ffffff"
	},
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#1296db",
		"borderStyle": "black",
		"backgroundColor": "#000000",
		"list": [{
			"pagePath": "pages/index/index",
			"iconPath": "/static/首页2.png",
			"selectedIconPath": "/static/首页.png",
			"text": "首页"
		}, {
			"pagePath": "pages/about/about",
			"iconPath": "/static/关于2.png",
			"selectedIconPath": "/static/关于.png",
			"text": "关于"
		}]
	},
	"uniIdRouter": {}
}

三、基础认识

1、页面生命周期

（1）onLoad 监听页面加载【类似于 vue2 生命周期中的 create】

此时响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object

2、App.vue应用生命周期

（1）globalData 全局变量，此处定义的变量，可以在任何页面获取

①App.vue

<script>
	export default {
		globalData: {
			text: 'text'
		},
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

②index.vue

<script>
	export default {
		data() {
			return {}
		},
		onLoad() {
			console.log(getApp().globalData);
		},
	}
</script>

四、基础组件

1、scroll-view可滚动视图区域

<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-title uni-common-mt">
				Vertical Scroll
				<text>\n纵向滚动</text>
			</view>
			<view>
				<!-- scroll-y="true"允许纵向滚动 -->
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
					<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
					<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
				</scroll-view>
			</view>
			<view @tap="goTop" class="uni-link uni-center uni-common-mt">
				点击这里返回顶部
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 设置竖向滚动条位置
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		onLoad() {
			console.log(getApp().globalData);
		},
		methods: {
			// 滚动到顶部/左边会触发
			upper: function(e) {
				console.log(e)
			},
			// 滚动到底部/右边会触发
			lower: function(e) {
				console.log(e)
			},
			// 滚动时触发
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			// 返回顶部
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				// 弹窗
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			}
		}
	}
</script>

<style>
.scroll-Y {
		height: 300rpx;
	}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
	.uni-bg-red{
		background-color: red;
	}
	.uni-bg-green{
		background-color: green;
	}
	.uni-bg-blue{
		background-color: blue;
	}
</style>

2、提示框

（1）showToast显示消息提示框

（2）showLoading显示 loading 加载中

<template>
	<view>
			<button @click="showToast" class="btn">点击显示消息提示框</button>
			<button @click="showLoading" class="btn">点击显示Loading提示框</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			// 显示消息提示框
			showToast: function(e) {
				uni.showToast({
					icon: "none",
					title: "显示消息内容"
				})
			},
			// 显示Loading提示框
			showLoading: function(e) {
				uni.showLoading({
					title: "加载中"
				})
				// 2秒后提示隐藏
				setTimeout(function () {
					uni.hideLoading();
				}, 2000);
			},
		}
	}
</script>

<style>
.btn{
	width: 80%;
	margin:20rpx auto;
}
</style>

3、swiper滑块视图容器

<template>
	<view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in imgArr">
					<view class="swiper-item" :class="item.background">{{item.title}}</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="swiper-list">
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="uni-list-cell-db">指示点</view>
				<switch :checked="indicatorDots" @change="changeIndicatorDots" />
			</view>
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="uni-list-cell-db">自动播放</view>
				<switch :checked="autoplay" @change="changeAutoplay" />
			</view>
		</view>
		
		<view class="uni-padding-wrap">
			<view class="uni-common-mt">
				<text>幻灯片切换时长(ms)</text>
				<text class="info">{{duration}}</text>
			</view>
			<slider @change="durationChange" :value="duration" min="500" max="2000" />
			<view class="uni-common-mt">
				<text>自动播放间隔时长(ms)</text>
				<text class="info">{{interval}}</text>
			</view>
			<slider @change="intervalChange" :value="interval" min="2000" max="10000" />
		</view>
	</view>
</template>

<script>
export default {
    data() {
        return {
						// 是否显示面板指示点
            indicatorDots: true,
						// 是否自动切换
            autoplay: true,
            interval: 2000,
            duration: 500,
						imgArr:[{
							title:"A",
							background:"uni-bg-red"
						},
						{
							title:"B",
							background:"uni-bg-green"
						},
						{
							title:"C",
							background:"uni-bg-blue"
						}]
        }
    },
    methods: {
        changeIndicatorDots(e) {
            this.indicatorDots = !this.indicatorDots
        },
        changeAutoplay(e) {
            this.autoplay = !this.autoplay
        },
        intervalChange(e) {
            this.interval = e.target.value
        },
        durationChange(e) {
            this.duration = e.target.value
        }
    }
}
</script>

<style>
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}
	.swiper {
		height: 300rpx;
	}
	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}
	.info {
		position: absolute;
		right: 20rpx;
	}
	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
</style>

 

注意：如果滑块没有背景色，是因为小编把背景色的css配置在了App.vue的全局样式

4、form表单组件

（1）说明

<form @submit="formSubmit" @reset="formReset"></form>

① @submit：携带 form 中的数据，触发 submit 事件

② @reset：表单重置，触发 reset 事件

（2）代码实例

<template>
	<view>
		<view>
			<form @submit="formSubmit" @reset="formReset">
				<view class="uni-form-item uni-column">
					<view class="title">switch</view>
					<view>
						<switch name="switch" />
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">性别</view>
					<radio-group name="radio">
						<label>
							<radio value="0" /><text>男</text>
						</label>
						<label>
							<radio value="1" /><text>女</text>
						</label>
					</radio-group>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">爱好</view>
					<checkbox-group name="checkbox">
						<label>
							<checkbox value="sing" /><text>唱歌</text>
						</label>
						<label>
							<checkbox value="dance" /><text>跳舞</text>
						</label>
						<label>
							<checkbox value="other" /><text>其它</text>
						</label>
					</checkbox-group>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">slider</view>
					<slider value="50" name="slider" show-value></slider>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">input</view>
					<input class="uni-input" name="input" placeholder="这是一个输入框" />
				</view>
				<view class="uni-btn-v">
					<button form-type="submit">Submit</button>
					<button type="default" form-type="reset">Reset</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
			formSubmit: function(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				var formdata = e.detail.value
				uni.showModal({
					content: '表单数据内容：' + JSON.stringify(formdata),
					showCancel: false
				});
			},
			formReset: function(e) {
				console.log('清空数据')
			}
		}
	}
</script>

<style>
	.uni-form-item .title {
		padding: 20rpx 0;
	}
</style>

 form 中的组件需要加上 name 来作为 key，使得 submit 事件会将组件中的 value 值进行提交

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1173697.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

第 370 周赛 100112. 平衡子序列的最大和（困难，离散化，权值树状数组）

第 370 周赛 100112. 平衡子序列的最大和（困难，离散化，权值树状数组）

太难了&#xff0c;看答案理解了半天 题目的要求可以理解为 nums[ij] - ij > nums[ii] - ii &#xff0c;所以问题化为求序列 bi nums[i] - i 的非递减子序列的最大元素和需要前置知识&#xff0c;离散化&#xff0c;树状数组离散化&#xff1a;将分布大却数量少(即稀疏)的…
阅读更多...
【嵌入式框架】搭建调试输出、建立时间系统

【嵌入式框架】搭建调试输出、建立时间系统

一、Zorb简介 Zorb Framework是一个基于面向对象的思想来搭建一个轻量级的嵌入式框架。 搭建Zorb Framework的目的是为在不能运行Linux的芯片上快速开发应用&#xff0c;不用反复造轮子。 Zorb Framework的初步设计功能有&#xff1a; 1、时间系统功能zf_time 2、环形缓冲…
阅读更多...
微信小程序获取openid

微信小程序获取openid

1.需要小程序中调用 wx.login获取临时code值&#xff08;每次获取的code值只能用一次&#xff09; wx.login({success (res) {console.log(res)} }) 打印结果为&#xff1a; 2.调用微信提供的apid接口&#xff0c;获取openid&#xff0c;入参需要三个参数&#xff1a;AppID(小…
阅读更多...
SPSS单因素方差分析

SPSS单因素方差分析

前言&#xff1a; 本专栏参考教材为《SPSS22.0从入门到精通》&#xff0c;由于软件版本原因&#xff0c;部分内容有所改变&#xff0c;为适应软件版本的变化&#xff0c;特此创作此专栏便于大家学习。本专栏使用软件为&#xff1a;SPSS25.0 本专栏所有的数据文件请点击此链接下…
阅读更多...
Python 用户输入和字符串格式化指南

Python 用户输入和字符串格式化指南

Python 允许用户输入数据。这意味着我们可以向用户询问输入。在 Python 3.6 中&#xff0c;使用 input() 方法来获取用户输入。在 Python 2.7 中&#xff0c;使用 raw_input() 方法来获取用户输入。以下示例要求用户输入用户名&#xff0c;并在输入用户名后将其打印在屏幕上&am…
阅读更多...
Prometheus接入AlterManager配置企业微信告警(基于K8S环境部署)

Prometheus接入AlterManager配置企业微信告警(基于K8S环境部署)

文章目录 一、创建企业微信机器人二、配置AlterManager告警发送至企业微信三、Prometheus接入AlterManager配置四、部署PrometheusAlterManager(放到一个Pod中)五、测试告警 注意&#xff1a;请基于 PrometheusGrafana监控K8S集群(基于K8S环境部署)文章之上做本次实验。 一、创…
阅读更多...
IDEA快捷键总结+常识积累

IDEA快捷键总结+常识积累

&#xff08;一&#xff09;常用快捷键总结 以下快捷键输入完成后按Tab键即可。 1、输入main public static void main(String[] args) {}2、输入sout System.out.println();3、输入fori for (int i 0; i < ; i) {}4、输入foreach&#xff08;增强for循环快捷键&#x…
阅读更多...
CMake引用QT、CMake构建一个转换为3d tile的开源代码

CMake引用QT、CMake构建一个转换为3d tile的开源代码

在CMake里单独运行一下 find_package(Qt5 REQUIRED COMPONENTS Core Xml Test) ，Core Xml Test 这三个是需要的qt组件； 情况如下；提示找不到QT； 根据资料，cmake引用qt需要3-4个方面， 首先Qt包含三个编译工具：moc、uic、rcc， moc：元对象编译器（Meta O…
阅读更多...
翻页电子杂志制作功略，快收藏，保管好用！

翻页电子杂志制作功略，快收藏，保管好用！

翻页电子杂志&#xff0c;我相信这对大家很熟悉吧&#xff0c;大家也都经常看电子杂志吧。它和我们的生活紧密相关&#xff0c;也极大地改变了我们的阅读方式。听到这“翻页电子杂志”&#xff0c;是不是觉得制作起来肯定很难很复杂&#xff0c;需要专业的人才能制作呢&#xf…
阅读更多...
2023 年最值得推荐的 10 款 iPhone 数据恢复软件

2023 年最值得推荐的 10 款 iPhone 数据恢复软件

iPhone 从来都不是一个简单的打电话电话。它就像一台微型电脑&#xff0c;让我们互相联系、拍照、拍视频、发邮件、看文档、看书。然而&#xff0c;随着它成为日常生活的必需品&#xff0c;我们总是容易因各种原因丢失数据&#xff0c;如删除、恢复出厂设置、iOS 错误、文件同步…
阅读更多...
python 之softmx 函数

python 之softmx 函数

文章目录 总的介绍小应用 总的介绍 Softmax函数是一个常用的激活函数&#xff0c;通常用于多类别分类问题中。它将一个实数向量转换为概率分布。这个函数的输出是一个概率分布&#xff0c;表示输入样本属于每个可能类别的概率。 给定一个具有 (K) 个不同数值的实数向量 z (z1…
阅读更多...
从功能测试到测试开发，待遇翻倍，我整理的超全学习指南！

从功能测试到测试开发，待遇翻倍，我整理的超全学习指南！

在这个吃技术的IT行业来说&#xff0c;我刚入行的时候每天做的也是最基础的工作&#xff0c;但是随着时间的消磨&#xff0c;我产生了对自我和岗位价值和意义的困惑。 一是感觉自己在浪费时间&#xff0c;另一个就是做了快2年的测试&#xff0c;感觉每天过得浑浑噩噩&#xff…
阅读更多...
【Spring Security】Spring Security 认证与授权

【Spring Security】Spring Security 认证与授权

在前面的章节中，我们沿用了Spring Security默认的安全机制：仅有一个用户，仅有一种角色。在实际开发中，这自然是无法满足需求的。本章将更加深入地对Spring Security迚行配置，且初步使用授权机制。 3.1 默认数据库模型的认证与授权 3.1.1、资源准备 首先，在controller包…
阅读更多...
Linux文件共享的完美助手：深入探索Samba和NFS

Linux文件共享的完美助手：深入探索Samba和NFS

1 samba介绍 1.1 samba基本介绍 作用&#xff1a;网络文件共享 smb&#xff08;Server Message Block &#xff09;是 Miscrosoft公司软件。 cifs &#xff08; Common Internet File System &#xff09;是Sum公司开发&#xff0c;是smb的开源版。 1.2 samba基本信息 服务启…
阅读更多...
全球首例无液氦脑磁图辅助下的胶质瘤切除手术顺利完成

全球首例无液氦脑磁图辅助下的胶质瘤切除手术顺利完成

近日&#xff0c;在国家重点研发计划“新型无液氦脑磁图系统研发”项目支持下&#xff0c;首都医科大学附属北京天坛医院季楠教授团队完成全球首例无液氦脑磁图运动功能区定位辅助下的胶质瘤切除手术。 手术对一例肿瘤累及运动功能区的年轻女性在术前分别利用无液氦脑磁图仪和功…
阅读更多...
使用Gradle创建SpringBoot项目

使用Gradle创建SpringBoot项目

Spring Boot Gradle 插件在Gradle 提供Spring Boot 支持。它允许您打包可执行jar 或war 归档文件&#xff0c;运行SpringBoot 应用程序&#xff0c;并使用Spring-Boot-dependencies 提供的依赖管理。相关文档请参考&#xff1a; https://docs.spring.io/spring-boot/docs/curre…
阅读更多...
【算法挨揍日记】day19——62. 不同路径、63. 不同路径 II

【算法挨揍日记】day19——62. 不同路径、63. 不同路径 II

62. 不同路径 62. 不同路径 题目描述&#xff1a; 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#x…
阅读更多...
2023年【熔化焊接与热切割】免费试题及熔化焊接与热切割考试总结

2023年【熔化焊接与热切割】免费试题及熔化焊接与热切割考试总结

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 熔化焊接与热切割免费试题参考答案及熔化焊接与热切割考试试题解析是安全生产模拟考试一点通题库老师及熔化焊接与热切割操作证已考过的学员汇总&#xff0c;相对有效帮助熔化焊接与热切割考试总结学员顺利通过考试。…
阅读更多...
小熊猫c++ 搭配keil

小熊猫c++ 搭配keil

小熊猫c 搭配keil 除了vs codekeil插件外&#xff0c;用国产的小熊猫C也可以写keil代码&#xff0c; 两者区别在于vs code多一个有编译功能&#xff0c;而小熊猫C的相对vscode方式&#xff0c;需要多了一个手动切换到keil进行编译步骤。 目的&#xff1a;小熊猫C可以 【代码提…
阅读更多...
【MATLAB】基于灰狼优化算法优化BP神经网络 (GWO-BP)的数据回归预测

【MATLAB】基于灰狼优化算法优化BP神经网络 (GWO-BP)的数据回归预测

文章目录 效果一览文章概述订阅专栏只能获取一份代码部分源码参考资料效果一览 文章概述 【MATLAB】基于灰狼优化算法优化BP神经网络 (GWO-BP)的数据回归预测 在MATLAB中，基于灰狼优化算法优化BP神经网络（GWO-BP）进行数据回归预测的步骤如下： 数据准备：首先，将用于回归预…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023