uni-app学习笔记

目录

一、前期准备

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.mfbz.cn/a/117475.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

番外---9.0 firewall 网络

番外---9.0 firewall 网络

### 网络配制方式&#xff1a; 00&#xff1a;依据图形界面形式配置&#xff08;nmtui&#xff09;&#xff1b; 01&#xff1a;命令形式配置(nmcli)&#xff1b; 02&#xff1a;使用系统菜单配置&#xff1b; 00&#xff1a;依据图形界面形式配置&#xff08;nmtui&#xff0…
阅读更多...
解决方案中word中分页符的使用

解决方案中word中分页符的使用

在投标方案中要善于使用“分页符”&#xff0c;尽可能少使用分节符号&#xff0c;没有分页符前&#xff0c;你每次修改你的标书或者文件&#xff0c;增加或者修改内容后。你的格式字段前后都是会发生变化&#xff0c;如何稳定的保证结构呢&#xff0c;那就是分页符的使用&#…
阅读更多...
C语言映射表在串口数据解析中的应用

C语言映射表在串口数据解析中的应用

一、映射表在串口数据解析中的应用 1、数据结构 typedef struct {char CMD[CMDLen];unsigned char (*cmd_operate)(char *data); }Usart_Tab; 2、指令、函数映射表 static const Usart_Tab InstructionList[CMDMax] {{"PWON",PowOn},{"PWOFF",PowOff}…
阅读更多...
antd的Table组件使用rowSelection属性实现多选时遇到的bug

antd的Table组件使用rowSelection属性实现多选时遇到的bug

前言 前端样式框架采用AntDesign时&#xff0c;经常会使用到Table组件&#xff0c;如果要有实现多选或选择的需求时往往就会用到rowSelection属性&#xff0c;效果如下 rowSelection属性属性值如下 问题 文档中并没有说明选择时以数据中的哪个属性为准&#xff0c;看官方案例…
阅读更多...
docker 下安装mysql8.0

docker 下安装mysql8.0

在docker中查询mysql镜像 PS C:\Users\admin> docker search mysql NAME DESCRIPTION STARS OFFICIAL AUTOMATED mysql MySQL is a widely used, open-source relation……
阅读更多...
答题测评考试小程序的效果如何

答题测评考试小程序的效果如何

在线答题系统是一种在线练习、考试、测评的智能答题系统&#xff0c;适用于企业培训、测评考试、知识竞赛、模拟考试等场景&#xff0c;管理员可任意组题、随机出题&#xff0c;答题者成功提交后&#xff0c;系统自动判分。 多种题目类型&#xff0c;两种答题模式 练习模式&a…
阅读更多...
Linux shell编程学习笔记20：case ... esac、continue 和break语句

Linux shell编程学习笔记20：case ... esac、continue 和break语句

一、case ... esac语句说明 在实际编程中&#xff0c;我们有时会请到多条件多分支选择的情况&#xff0c;用if…else语句来嵌套处理不烦琐&#xff0c;于是JavaScript等语言提供了多选择语句switch ... case。与此类似&#xff0c;Linux Shell脚本编程中提供了case...in...esa…
阅读更多...
《人工智能算法图解》书籍推荐

《人工智能算法图解》书籍推荐

书籍介绍 今天&#xff0c;人工智能在我们的生活中随处可见。它能推送我们喜欢的电视节目&#xff0c;帮助我们诊断疑难杂症&#xff0c;还能向我们推荐商品。因此&#xff0c;让我们掌握人工智能的核心算法&#xff0c;拥抱日新月异的智能世界吧。 与那些充斥着公式和术语的教…
阅读更多...
麒麟KYLINIOS软件仓库搭建02-软件仓库添加新的软件包

麒麟KYLINIOS软件仓库搭建02-软件仓库添加新的软件包

原文链接&#xff1a;麒麟KYLINIOS软件仓库搭建02-软件仓库添加新的软件包 hello&#xff0c;大家好啊&#xff0c;今天给大家带来麒麟桌面操作系统软件仓库搭建的文章02-软件仓库添加新的软件包&#xff0c;本篇文章主要给大家介绍了如何在麒麟桌面操作系统2203-x86版本上&…
阅读更多...
应用安全四十二：SSO安全

应用安全四十二：SSO安全

一、什么是SSO SSO是单点登录（Single Sign On）的缩写，是指在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。这种方式减少了由登录产生的时间消耗，辅助了用户管理，是比较流行的企业业务整合的解决方案之一。 身份验证过程依赖于双方之间的信任关…
阅读更多...
【Git】git的下载安装与使用

【Git】git的下载安装与使用

目录 目录 一.下载安装 官方下载 淘宝镜像下载 安装 二.创建本地仓库 三.git的基本操作命令 git status git add . git commit -m " " 四.gitee(码云&#xff09;的使用 配置ssh公钥 ​编辑 查看公钥 gitee创建仓库 将本地仓库的文件上传到远程仓库…
阅读更多...
使用 ChatGPT 提升 LeetCode 刷题效率

使用 ChatGPT 提升 LeetCode 刷题效率

文章目录 1 背景2 操作步骤 1 背景 在做 LeetCode 的 SQL 题库时, 想在本地调试, 需要在本地的数据库上创建表以及准备测试数据, 大家都是有经验的开发人员, 简单粗暴的办法就不讲了 可以借助 ChatGPT 的能力, 生产数据库的表以及测试数据的 sql, 提升刷题效率 2 操作步骤 将…
阅读更多...
【计算机组成与设计】Chisel取指和指令译码设计

【计算机组成与设计】Chisel取指和指令译码设计

本次试验分为三个部分&#xff1a; 目录 设计译码电路 设计寄存器文件 实现一个32个字的指令存储器 设计译码电路 输入位32bit的一个机器字&#xff0c;按照课本MIPS 指令格式&#xff0c;完成add、sub、lw、sw指令译码&#xff0c;其他指令一律译码成nop指令。输入信号名…
阅读更多...
【UE 材质】简单的闪闪发光材质

【UE 材质】简单的闪闪发光材质

效果 节点 参考视频&#xff1a; https://www.bilibili.com/video/BV1uK411y737/?vd_source36a3e35639c44bb339f59760641390a8
阅读更多...
【Liunx系统编程】命令模式3

【Liunx系统编程】命令模式3

目录 一&#xff0c;zip/unzip压缩指令 二&#xff0c;tar打包/压缩/解包指令 三&#xff0c;uname获取系统信息指令 四&#xff0c;Liunx下常用且重要的按键和关机指令 五&#xff0c;文件之间的互传 1&#xff0c;Windows与Linux之间的互传 2&#xff0c;Linux系统之间…
阅读更多...
0xGame Web 2023

0xGame Web 2023

0xGame Web 2023 [Week 1] signin 这题直接看源码就行&#xff0c;easy [Week 1] baby_php OST /?aQNKCDZO&b240610708 HTTP/1.1 Host: 120.27.148.152:50014 Content-Length: 11 Pragma: no-cache Cache-Control: no-cache Upgrade-Insecure-Requests: 1 Origin: htt…
阅读更多...
K8s学习笔记——认识理解篇

K8s学习笔记——认识理解篇

1. K8s诞生背景 回顾应用的部署&#xff0c;经历了以下几个阶段&#xff1a; 传统部署&#xff1a;物理服务器上运行应用程序。虚拟机部署&#xff1a;物理服务器上安装虚拟机&#xff0c;在虚拟机上运行应用程序。容器部署&#xff1a;物理服务器上安装容器运行时&#xff0…
阅读更多...
android studio 编译Telegram源码经验总结(2023-11-05)

android studio 编译Telegram源码经验总结(2023-11-05)

前言 Telegram是一款强大的端到端加密IM&#xff0c;专注于安全性和速度&#xff0c;支持Android/IOS/Windows/macOS等平台&#xff0c;功能丰富&#xff0c;运行流畅&#xff0c;免费开源&#xff0c;代码具有学习和研究意义。 一、android telegram源码下载地址&#xff1a; …
阅读更多...
MQTT协议零基础快速入门

MQTT协议零基础快速入门

MQTT协议零基础快速入门 MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;是一种轻量级的发布/订阅消息传输协议&#xff0c;广泛应用于物联网&#xff08;IoT&#xff09;和机器对机器&#xff08;M2M&#xff09;通信场景。它具有简单、开放、易于实现等优…
阅读更多...
2014年亚太杯APMCM数学建模大赛C题公共基础课教师专业化培养方式研究求解全过程文档及程序

2014年亚太杯APMCM数学建模大赛C题公共基础课教师专业化培养方式研究求解全过程文档及程序

2014年亚太杯APMCM数学建模大赛 C题 公共基础课教师专业化培养方式研究 原题再现 近年来&#xff0c;世界基础工业、信息产业、服务业的跨越式发展引发了大量人才需求&#xff0c;导致了职业教育的飞速发展&#xff0c;除原有专科层次高等职业教育院校外&#xff0c;大量普通…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站