Uni-app常用知识点总结

news2025/8/8 6:47:53

一、一句话总的形容一下uniapp与vue和微信小程序的异同点

        简单来讲Uni-app就是用着vue的指令和小程序的组件和API

二、Uniapp中配置tabbar的方式

见之前的单独文章——

(3条消息) Uni-app中的tabBar的配置_终将抵达丶的博客-CSDN博客_uniapp设置tabbar图片大小https://blog.csdn.net/gkx19898993699/article/details/127559442?spm=1001.2014.3001.5502

三、Uniapp中常见的组件

        text

selectablebooleanfalse否文本是否可选
spacestring.否显示连续空格，可选参数：ensp、emsp、nbsp
decodebooleanfalse否是否解码

        view

View 视图容器， 类似于 HTML 中的 div

        button

sizeStringdefault按钮的大小
typeStringdefault按钮的样式类型
plainBooleanfalse按钮是否镂空，背景色透明
disabledBooleanfalse是否按钮
loadingBooleanfalse名称是否带 loading t图标

        image

属性名类型默认值说明平台差异说明
srcString图片资源地址
modeString‘scaleToFill’图片裁剪、缩放的模式

四、Uniapp中常用的指令语句

        v-for：循环渲染 （注意加：key）

        v-if ：控制元素的删除添加       

        v-show：控制元素的显示隐藏

        v-model：双向数据绑定

        v-on：事件绑定（简写@）

        v-bind：属性绑定（简写：）

五、Uniapp应用的生命周期、页面的生命周期、组件的生命周期

详情见我的另一篇单独文章——

(3条消息) Uni-app中的生命周期_终将抵达丶的博客-CSDN博客https://blog.csdn.net/gkx19898993699/article/details/127559613?spm=1001.2014.3001.5502

六、注意下拉刷新和触底加载的使用

1.监听下拉刷新

通过onPullDownRefresh可以监听到下拉刷新的动作

export default {
  data () {
    return {
      arr: ['前端','java','ui','大数据']
    }
  },
  methods: {
    startPull () {
      uni.startPullDownRefresh()
    }
  },
  onPullDownRefresh () {
    console.log('触发下拉刷新了')
  }
}

2.关闭下拉刷新

uni.stopPullDownRefresh()

停止当前页面下拉刷新。

案例演示

<template>
	<view>
		<button type="primary" @click="startPull">开启下拉刷新</button>
		杭州学科
		<view v-for="(item,index) in arr" :key="index">
			{{item}}
		</view>
	</view>
</template>
<script>
	export default {
		data () {
			return {
				arr: ['前端','java','ui','大数据']
			}
		},
		methods: {
			startPull () {
				uni.startPullDownRefresh()
			}
		},
		
		onPullDownRefresh () {
			this.arr = []
			setTimeout(()=> {
				this.arr = ['前端','java','ui','大数据']
				uni.stopPullDownRefresh()
			}, 1000);
		}
	}
</script>

3.上拉加载

通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离，默认为50px

通过onReachBottom监听到触底的行为

<template>
	<view>
		<button type="primary" @click="startPull">开启下拉刷新</button>
		杭州学科
		<view v-for="(item,index) in arr" :key="index">
			{{item}}
		</view>
	</view>
</template>
<script>
	export default {
		data () {
			return {
				arr: ['前端','java','ui','大数据','前端','java','ui','大数据']
			}
		},
		onReachBottom () {
			console.log('触底了')
		}
	}
</script>

<style>
	view{
		height: 100px;
		line-height: 100px;
	}
</style>

七、Uniapp中的条件注释（不同平台）

详情见我的另一篇单独文章——

(3条消息) Uni-app条件注释的跨端兼容_终将抵达丶的博客-CSDN博客_uniapp注解https://blog.csdn.net/gkx19898993699/article/details/127558653?spm=1001.2014.3001.5502

八、uni.request的使用及封装

在uni中可以调用uni.request方法进行请求网络请求

需要注意的是：在小程序中网络相关的 API 在使用前需要配置域名白名单。

示例：

<template>
	<view>
		<button @click="sendGet">发送请求</button>
	</view>
</template>
<script>
	export default {
		methods: {
			sendGet () {
				uni.request({
					url: 'http://localhost:8082/api/getlunbo',
					success(res) {
						console.log(res)
					}
				})
			}
		}
	}
</script>

OBJECT 参数说明

参数名类型必填默认值说明平台差异说明
urlString是开发者服务器接口地址
dataObject/String/ArrayBuffer否请求的参数App 3.3.7 以下不支持 ArrayBuffer 类型
headerObject否设置请求的 header，header 中不能设置 Referer。App、H5端会自动带上cookie，且H5端不可手动修改
methodString否GET有效值详见下方说明
timeoutNumber否60000超时时间，单位 msH5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序（2.10.0）、支付宝小程序
dataTypeString否json如果设为 json，会尝试对返回的数据做一次 JSON.parse
responseTypeString否text设置响应的数据类型。合法值：text、arraybuffer支付宝小程序不支持
sslVerifyBoolean否true验证 ssl 证书仅App安卓端支持（HBuilderX 2.3.3+），不支持离线打包
withCredentialsBoolean否false跨域请求时是否携带凭证（cookies）仅H5支持（HBuilderX 2.6.15+）
firstIpv4Boolean否falseDNS解析时优先使用ipv4仅 App-Android 支持 (HBuilderX 2.8.0+)
successFunction否收到开发者服务器成功返回的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

更多详情请查询官网——

uni.request(OBJECT) | uni-app官网 (dcloud.net.cn)icon-default.png?t=M85Bhttps://uniapp.dcloud.net.cn/api/request/request.html

九、Uniapp中的本地缓存

（一）同步

1.存储：uni.setStorageSync

<template>
	<view>
		<button type="primary" @click="setStor">存储数据</button>
	</view>
</template>

<script>
	export default {
		methods: {
			setStor () {
				uni.setStorageSync('id',100)
			}
		}
	}
</script>

<style>
</style>

2.获取：uni.getStorageSync

<template>
	<view>
		<button type="primary" @click="getStorage">获取数据</button>
	</view>
</template>
<script>
	export default {
		methods: {
			getStorage () {
				const id = uni.getStorageSync('id')
				console.log(id)
			}
		}
	}
</script>

（二）异步

1.存储：uni.setStorage

<template>
	<view>
		<button type="primary" @click="setStor">存储数据</button>
	</view>
</template>

<script>
	export default {
		methods: {
			setStor () {
				uni.setStorage({
				 	key: 'id',
				 	data: 100,
				 	success () {
				 		console.log('存储成功')
				 	}
				 })
			}
		}
	}
</script>

<style>
</style>

2.获取：uni.getStorage

<template>
	<view>
		<button type="primary" @click="getStorage">获取数据</button>
	</view>
</template>
<script>
	export default {
		data () {
			return {
				id: ''
			}
		},
		methods: {
			getStorage () {
				uni.getStorage({
					key: 'id',
					success:  res=>{
						this.id = res.data
					}
				})
			}
		}
	}
</script>

（三）删除

        uni.removeStorageSync

从本地缓存中同步移除指定 key。

<template>
	<view>
		<button type="primary" @click="removeStorage">删除数据</button>
	</view>
</template>
<script>
	export default {
		methods: {
			removeStorage () {
				uni.removeStorageSync('id')
			}
		}
	}
</script>

十、Uniapp中的跳转方式（navigator标签、uni.navigateTo方法）及传参

1.利用navigator标签进行跳转

navigator详细文档：文档地址

        跳转到普通页面

<navigator url="/pages/about/about" hover-class="navigator-hover">
  <button type="default">跳转到关于页面</button>
</navigator>

        跳转到tabbar页面

<navigator url="/pages/message/message" open-type="switchTab">
  <button type="default">跳转到message页面</button>
</navigator>

2.利用navigateTo进行导航跳转

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

<button type="primary" @click="goAbout">跳转到关于页面</button>

通过navigateTo方法进行跳转到普通页面

goAbout () {
  uni.navigateTo({
    url: '/pages/about/about',
  })
}

3.通过switchTab跳转到tabbar页面

跳转到tabbar页面

<button type="primary" @click="goMessage">跳转到message页面</button>

通过switchTab方法进行跳转

goMessage () {
  uni.switchTab({
    url: '/pages/message/message'
  })
}

4.redirectTo进行跳转

关闭当前页面，跳转到应用内的某个页面。

<!-- template -->
<button type="primary" @click="goMessage">跳转到message页面</button>
<!-- js -->
goMessage () {
  uni.switchTab({
    url: '/pages/message/message'
  })
}

传参方式

在导航进行跳转到下一个页面的同时，可以给下一个页面传递相应的参数，接收参数的页面可以通过onLoad生命周期进行接收

传递参数的页面

goAbout () {
  uni.navigateTo({
    url: '/pages/about/about?id=80',
  });
}

接收参数的页面

<script>
	export default {
		onLoad (options) {
			console.log(options)
		}
	}
</script>

十一、Uniapp中组件的创建以及使用和传参方式

（一）组件的创建

        在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过impot的方式导入，在通过components进行注册即可

        1.创建login组件，在component中创建login目录，然后新建login.vue文件

<template>
	<view>
		这是一个自定义组件
	</view>
</template>

<script>
</script>

<style>
</style>

        2.在其他组件中导入该组件并注册

import login from "@/components/test/test.vue"

        3.注册组件

components: {test}

        4.使用组件

<test></test>

（二）组件间的通讯

        1.父传子

子组件中：通过props来接受外界传递到组件内部的值

<template>
	<view>
		这是一个自定义组件 {{msg}}
	</view>
</template>

<script>
	export default {
		props: ['msg']
	}
</script>

<style>
</style>

父组件中：在使用login组件的时候传递值

<template>
	<view>
		<test :msg="msg"></test>
	</view>
</template>

<script>
	import test from "@/components/test/test.vue"
	export default {
		data () {
			return {
				msg: 'hello'
			}
		},
		
		components: {test}
	}
</script>

        2.子传父

 （1）父组件定义自定义事件并接收参数

<template>
	<view>
		<test :msg="msg" @myEvent="getMsg"></test>
	</view>
</template>
<script>
	import test from "@/components/test/test.vue"
	export default {
		data () {
			return {
				msg: 'hello'
			}
		},
		methods: {
			getMsg (res) {
				console.log(res)
			}
		},
		
		components: {test}
	}
</script>

（2）通过$emit触发事件进行传递参数

<template>
	<view>
		这是一个自定义组件 {{msg}}
		<button type="primary" @click="sendMsg">给父组件传值</button>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				status: '打篮球'
			}
		},
		props: {
			msg: {
				type: String,
				value: ''
			}
		},
		methods: {
			sendMsg () {
				this.$emit('myEvent',this.status)
			}
		}
	}
</script>

十二、Uniapp中的事件总线

详情见我的另一篇单独文章——

(3条消息) Uni-app中的事件总线_终将抵达丶的博客-CSDN博客https://blog.csdn.net/gkx19898993699/article/details/127558358?spm=1001.2014.3001.5502

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

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

相关文章

利用霍尔效应传感器和Arduino研究了一个简单的钟摆

利用霍尔效应传感器和Arduino研究了一个简单的钟摆

A simple pendulum studied using Hall effect sensor and Arduino 利用霍尔效应传感器和Arduino研究了一个简单的钟摆&#xff1a;原文&#xff08;Hall effect sensor (scitation.org)&#xff09; ARTICLES YOU MAY BE INTERESTED IN Measurement of gravitational accele…
阅读更多...
One UI 5 升级来了

One UI 5 升级来了

从11月23日开始&#xff0c;三星多款手机海内外开始推送安卓13/One UI 5.0正式版&#xff0c;大家心心念念的One UI 5终于来了&#xff0c;接下来我们看下有关新版One UI 5相关的更新内容&#xff0c;具体如下&#xff1a; One UI 5 升级 (Android 13) One UI 5 为您带来更加强…
阅读更多...
Eureka服务注册与发现

Eureka服务注册与发现

✨ Eureka服务注册与发现微服务的注册中心注册中心的基本介绍注册中心的主要作用注册中心基本原理常见的注册中心Eureka基本介绍服务治理服务注册Eureka 两大组件搭建EurekaEureka端服务注册中心创建新模块 cloud-eureka-server7001添加pom依赖yml配置启动类服务中心管理后台服…
阅读更多...
Connection（数据库连接对象）

Connection（数据库连接对象）

Connection&#xff08;数据库连接对象&#xff09; 简介&#xff1a;通过代码来讲解Connection的含义。 推荐学习路线&#xff1a;JDBC数据库的连接->Connection&#xff08;数据库连接对象&#xff09;->Statement->ResultSet->通过PreparedStatement预防SQL注入…
阅读更多...
【云原生 | Kubernetes 系列】--Gitops持续交付 Argo Rollouts Analysis

【云原生 | Kubernetes 系列】--Gitops持续交付 Argo Rollouts Analysis

1. Argo Rollouts 由一个控制器和一组CRD组成,可为K8s提供高级部署功能 - blue-green - canary - canary analysis 结合外部指标系统金丝雀 - experimentation 实验性的结果 - progressive delivery 渐进式交付,精准管控外部流量策略,不用关心后端部署机制支持Ingress Contro…
阅读更多...
第六章《类的高级特性》第1节：static关键字的使用

第六章《类的高级特性》第1节：static关键字的使用

static意为“静态”，在Java语言中，使用static关键字可以定义静态属性、静态方法和静态块。 6.1.1 静态属性 在第5章中，我们定义了一个Person类的子类Student，用它来表示学生。假如每一个在读学生每年都能得到1000元的助学津贴，并且程序员希望在Student类中以属性的形式把…
阅读更多...
骨传导有没有副作用？骨传导耳机有什么优点吗？

骨传导有没有副作用？骨传导耳机有什么优点吗？

骨传导有没有副作用&#xff1f; 先说结论&#xff1a;是没有的。 骨传导耳机虽然是近两年在走向我们大众视野&#xff0c;但是骨传导技术早就已经在医疗、军事领域广泛应用&#xff0c;骨传导也不是什么高端的技术&#xff0c;像我们平常嗑瓜子&#xff0c;吃薯片&#xff0…
阅读更多...
javaee实验，SSM整合开发综合实例

javaee实验，SSM整合开发综合实例

由于不能使用maven管理&#xff0c;只能导入jar包做实验&#xff0c;最下面有截图展示所用到的jar包&#xff0c;可以自己搜索文档maven导入依赖&#xff1b; SSM整合开发综合实例 实验目的&#xff1a; &#xff08;1&#xff09;掌握SSM项目整合的原则&#xff1b; &#x…
阅读更多...
Microsoft Visual Studio C++开发环境的配置及使用

Microsoft Visual Studio C++开发环境的配置及使用

Microsoft Visual Studio C开发环境的配置及使用 本文引用自作者编写的下述图书; 本文允许以个人学习、教学等目的引用、讲授或转载&#xff0c;但需要注明原作者"海洋饼干叔 叔"&#xff1b;本文不允许以纸质及电子出版为目的进行抄摘或改编。 1.《Python编程基础及…
阅读更多...
大数据面试题（四）：Yarn核心高频面试题

大数据面试题（四）：Yarn核心高频面试题

文章目录 Yarn核心高频面试题 一、简述Hadoop1与Hadoop2的架构异同 二、为什么会产生yarn&#xff0c;它解决了什么问题&#xff0c;有什么优势&#xff1f; 三、HDFS的数据压缩算法&#xff1f;及每种算法的应用场景&#xff1f; 1、gzip压缩 2、Bzip2压缩 3、Lzo压缩 …
阅读更多...
SpringBoot框架接收参数的六种常用方式（全面详细）

SpringBoot框架接收参数的六种常用方式（全面详细）

文章目录[toc]一、基于PathVariable注解二、基于RequestParam注解三、基于PathVariableRequestParam混合四、基于RequestBody注解五、基于HttpServletRequest请求六、不基于任何注解进行表单传参一、基于PathVariable注解 RestControllerpublic class UserController {GetMapp…
阅读更多...
C#11新特性之原始字符串

C#11新特性之原始字符串

随着.NET 7与C#11的发布&#xff0c;微软发布了C# 11 中的原始字符串这个新特性。 这个新特性解决了祖传字符串中引号的问题。 微软官方的表述是:" Raw string literals"&#xff0c;圈里都叫他”原始字符串”。从字面不难看出&#xff0c;它是适用于字符串的新特性…
阅读更多...
elasticsearch 之 histogram 直方图聚合

elasticsearch 之 histogram 直方图聚合

1. 简介 直方图聚合是一种基于多桶值聚合&#xff0c;可从文档中提取的数值或数值范围值来进行聚合。它可以对参与聚合的值来动态的生成固定大小的桶。 2. bucket_key如何计算 假设我们有一个值是32&#xff0c;并且桶的大小是5&#xff0c;那么32四舍五入后变成30&#xff…
阅读更多...
两种方式实现css取消页面鼠标双击选中文字或单击拖动选中文字的效果

两种方式实现css取消页面鼠标双击选中文字或单击拖动选中文字的效果

问题描述 我们知道浏览器页面上的文字正常情况下我们是可以双击选中、或者单击鼠标横向拖动也能选中的&#xff0c;选中以后可以右击出现面板然后去复制什么的。但是有的时候&#xff0c;这种效果我们并不想要的&#xff0c;比如用户点快了的时候&#xff0c;所以我们需要禁用…
阅读更多...
TensorFlow之文本分类算法-3

TensorFlow之文本分类算法-3

1 前言 2 收集数据 3 探索数据 4 选择模型 5 准备数据 N-gram向量集 序列向量集 序列向量集主要是用于序列模型中对文本执行分词与向量化&#xff0c;与n-gram向量集类似&#xff0c;也使用特征选择与标准化的技术优化序列向量集的表示。 在一些文本样例中&#xff0c;…
阅读更多...
GaussDB-物理、逻辑备份 使用方法和[GAUSS-53403]解决办法

GaussDB-物理、逻辑备份 使用方法和[GAUSS-53403]解决办法

文章目录1.逻辑备份-gs_dump2.逻辑备份恢复数据库3.物理备份&#xff08;分布式集群验证&#xff09;查看物理全量备份集&#xff1a;查看物理增量备份集&#xff1a;查看所有备份集&#xff08;该命令无法确定备份是否有效&#xff09;停止物理备份&#xff1a;使用物理备份集…
阅读更多...
centos7安装mysql8.0.31

centos7安装mysql8.0.31

mysql 官网 https://www.mysql.com/ 找到对应的版本 然后下载 连接虚拟机 mysql 会和 mariadb这个有冲突&#xff0c;需要卸载掉 查看是否有mariadb rpm -qa|grep mariadb rpm -e --nodeps mariadb-libs 这个是强制卸载命令 再查看一下 rpm -qa|grep mariadb 在根目录创建…
阅读更多...
2022 APMCM亚太数学建模竞赛 C题 全球是否变暖 问题一python代码实现（更新完毕）

2022 APMCM亚太数学建模竞赛 C题 全球是否变暖 问题一python代码实现（更新完毕）

2022 APMCM亚太数学建模竞赛 C题 全球是否变暖 思路及代码实现(持续更新完毕) 更新信息 2022-11-24 10:00 更新问题1和问题2 思路 2022-11-24 23:20 更新问题一代码 2022-11-25 11:00 更新问题二代码 相关链接 【2022 APMCM亚太数学建模竞赛 C题 全球是否变暖 问题一pytho…
阅读更多...
高性能数据访问中间件 OBProxy（六）：一文讲透数据路由

高性能数据访问中间件 OBProxy（六）：一文讲透数据路由

在《高性能数据访问中间件 OBProxy&#xff08;五&#xff09;&#xff1a;一文讲透数据路由》中&#xff0c;我们讲到了数据路由影响因素包括功能因素、性能因素和高可用因素。本文主要介绍高可用因素相关的内容。 相比传统的 IOE 架构&#xff0c;OceanBase 利用更低的成本实…
阅读更多...
【你不知道的javascript上】2. 第三章 全局作用域，函数作用域和块作用域，立即执行函数

【你不知道的javascript上】2. 第三章 全局作用域，函数作用域和块作用域，立即执行函数

预警&#xff1a;【你不知道的javascript】开头的文章&#xff0c;是用来总结书籍《你不知道的Javascript》中我不熟悉的知识&#xff0c;单纯的用来巩固学到的知识&#xff0c;和加深记忆。 可能有些地方我理解的不透彻&#xff0c;所以不能够保证内容的正确性&#xff0c;欢迎…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023