Uni-app常用知识点总结

一、一句话总的形容一下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

selectable	boolean	false	否	文本是否可选
space	string	.	否	显示连续空格，可选参数：`ensp`、`emsp`、`nbsp`
decode	boolean	false	否	是否解码

view

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

button

size	String	default	按钮的大小
type	String	default	按钮的样式类型
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否按钮
loading	Boolean	false	名称是否带 loading t图标

image

属性名	类型	默认值	说明	平台差异说明
src	String		图片资源地址
mode	String	‘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()

停止当前页面下拉刷新。

案例演示


<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监听到触底的行为


<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 在使用前需要配置域名白名单。

示例：


<script>
	export default {
		methods: {
			sendGet () {
				uni.request({
					url: 'http://localhost:8082/api/getlunbo',
					success(res) {
						console.log(res)
					}
				})
			}
		}
	}
script>

OBJECT 参数说明

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

九、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进行跳转

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


<button type="primary" @click="goMessage">跳转到message页面button>
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

相关阅读:
系统架构设计师之系统应用集成
 Java--日志管理
 婴灵在恶泣
 前端 | 如何使用 css 实现居中效果
 工业智能网关BL110应用之七：支持 Modbus ，MQTT,opc 等协议,上传到阿里华为云等LOT
JavaScript从入门到精通系列第三十篇：详解JavaScript中的正则表达式语法
 【AI视野·今日Robot 机器人论文速览第五十一期】Tue, 10 Oct 2023
c语言顺序栈、链栈
 Kamiya丨Kamiya艾美捷小鼠转铁蛋白ELISA说明书
 百度ERNIE系列预训练语言模型浅析(2)-ERNIE2.0
原文地址：https://blog.csdn.net/gkx19898993699/article/details/128031330