文章目录

一、uniapp介绍
二、环境搭建
三、网络
四、跳转
五、数据缓存
六、位置

一、uniapp介绍

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

即使不跨端，uni-app同时也是更好的小程序开发框架。

具有vue和微信小程序的开发经验，可快速上手uni-app

为什么要去学习uni-app？

相对开发者来说，减少了学习成本，因为只学会uni-app之后，即可开发出iOS、Android、H5、以及各种小程序的应用，不需要再去学习开发其他应用的框架，相对公司而言，也大大减少了开发成本。

二、环境搭建

安装编辑器HbuilderX 下载地址

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。

下载App开发版，可开箱即用

安装微信开发者工具下载地址

2.1、利用HbuilderX初始化项目

点击HbuilderX菜单栏文件>项目>新建
选择uni-app,填写项目名称，项目创建的目录

2.2、运行项目

在菜单栏中点击运行，运行到浏览器，选择浏览器即可运行

在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app

在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机

注意：

如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功
微信开发者工具在设置中安全设置，服务端口开启

2.3、介绍项目目录和文件作用

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。

App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。

main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

unpackage就是打包目录，在这里有各个平台的打包文件

pages所有的页面存放目录

static静态资源目录，例如图片等

components组件存放目录

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

页面文件遵循 Vue 单文件组件 (SFC) 规范
组件标签靠近小程序规范，详见uni-app 组件规范
接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
为兼容多端运行，建议使用flex布局进行开发

三、网络

1、发起请求

uni.request(object) 发起网络请求.

<template>
	<view class="content">
		<button type="warn" @click="handelClick()">发送网络请求</button>
		<view>
			{{contant}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				contant: ''
			}
		},
		onLoad() {

		},
		methods: {
			handelClick() {
				uni.request({
					//url请求接口
					url: 'https://www.escook.cn/api/cart',
					//请求方式
					method:"GET",
					//成功返回数据
					success: (res) => {
						this.contant=res
						uni.showToast({
							title: '获取数据成功',
							duration: 2000
						});
					},
					//
					fail() {
					console.log('请求失败')
					}
				})
			}
		}
	}
</script>

<style>
</style>

在这里插入图片描述

2、上传

uni.uploadFile(object)本地资源上传到开发者服务器，客户端发起一个 POST 请求。

<template>
	<view class="content">
		<button @click="handelClickPic()" type="warn">上传图片</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				contant: ''
			}
		},
		onLoad() {

		},
		methods: {
	
			//上传图片
			handelClickPic() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						//上传图片
						const uploadTask = uni.uploadFile({
							url: 'https://www.escook.cn/api/cart',
							// 要上传文件资源的路径。
							filePath: tempFilePaths[0],
							// 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
							name: 'file',
							// HTTP 请求中其他额外的 form data
							formData: {
								'user': 'test'
							},
							// 接口调用成功的回调函数
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
							}
						});
                        
						//获取文件长度，上传时间
						uploadTask.onProgressUpdate((res) => {
							console.log('上传进度' + res.progress);
							console.log('已经上传的数据长度' + res.totalBytesSent);
							console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);


							// 测试条件，取消上传任务。
							if (res.progress > 50) {
								uploadTask.abort();
							}
							uni.showToast({
								title: '上传成功',
								duration: 1000
							});
						});
					
					},
					// 接口调用失败的回调函数
					fail() {
						uni.showToast({
							title: '上传失败',
							duration: 1000
						});
					}
				});
			},

		}
	}
</script>

<style>
</style>

3、下载

uni.downloadFile(object)下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。

<template>
	<view class="content">
		<button @click="addClickPic()" type="warn">下载图片</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				contant: ''
			}
		},
		onLoad() {

		},
		methods: {		
			addClickPic(){
				const downloadTask = uni.downloadFile({
					// 下载资源的 url
						url: 'https://www.escook.cn/api/cart', 
						// 下载成功后以 tempFilePath 的形式传给页面，res = {tempFilePath: '文件的临时路径'}
						success: (res) => {
							if (res.statusCode === 200) {
								console.log('下载成功');
							}
						}
					});
					
					// onProgressUpdate 获取下载进度、已经下载的数据长度、预期需要下载的数据总长度
					downloadTask.onProgressUpdate((res) => {
						console.log(res)
						console.log('下载进度' + res.progress);
						console.log('已经下载的数据长度' + res.totalBytesWritten);
						console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
					
						// 满足测试条件，取消下载任务。
						if (res.progress > 50) {
							downloadTask.abort();
						}
					});
			}
			
			
		
		}
	}
</script>

<style>
</style>

4、SocketTask

1、SocketTask.onMessage(callback)

监听 WebSocket 接受到服务器的消息事件

在这里插入图片描述

2、SocketTask.send(object)

通过 WebSocket 连接发送数据

在这里插入图片描述

3、SocketTask.close(object)

关闭 WebSocket 连接

在这里插入图片描述

4、SocketTask.onOpen(callback)

监听 WebSocket 连接打开事件

在这里插入图片描述

5、SocketTask.onClose(callback)

监听 WebSocket 连接关闭事件

6、SocketTask.onError(callback)

监听 WebSocket 错误事件

在这里插入图片描述

四、跳转

1、uni.navigateTo(object)

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

uni.navigateTo({
	url:'./car/index'
});

注意

页面跳转路径有层级限制，不能无限制跳转新页面
跳转到 tabBar 页面只能使用 switchTab 跳转
路由API的目标页面必须是在pages.json里注册的vue页面。
APP-NVUE平台暂不支持以this.getOpenerEventChannel()方式获取eventChannel，请换用this.$scope.eventChannel来获取。

2、uni.redirectTo(object)

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

uni.redirectTo({
	url: './hoem/index'
});

注意

跳转到 tabBar 页面只能使用switchTab跳转

3、uni.reLaunch(object)

关闭所有页面，打开到应用内的某个页面。

uni.reLaunch({
	url: './hoem/index'
});
export default {
	onLoad: function (option) {
		console.log(option.id);
	}
}

注意

如果调用了 uni.preloadPage(OBJECT) (opens new window)不会关闭，仅触发生命周期 onHide
H5端调用uni.reLaunch之后之前页面栈会销毁，但是无法清空浏览器之前的历史记录，此时navigateBack不能返回，如果存在历史记录的话点击浏览器的返回按钮或者调用history.back()仍然可以导航到浏览器的其他历史记录。

4、uni.switchTab(object)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

//pages.json
{
  "tabBar": {
    "list": [{
      "pagePath": "pages/home/index",
      "text": "首页"
    },{
      "pagePath": "pages/other/other",
      "text": "其他"
    }]
  }
}

//home.vue
uni.switchTab({
	url: '/pages/home/index'
});

注意

如果调用了 uni.preloadPage(OBJECT) (opens new window)不会关闭，仅触发生命周期 onHide

5、uni.navigateBack(object)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
uni.navigateTo({
	url: 'B?id=1'
});

// 此处是B页面
uni.navigateTo({
	url: 'C?id=1'
});

// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({
	delta: 2
});

总结

navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
不能在App.vue里面进行页面跳转。
H5端页面刷新之后页面栈会消失，此时navigateBack不能返回，如果一定要返回可以使用history.back()导航到浏览器的其他历史记录。

6、窗口动画

窗口的显示/关闭动画效果，支持在 API、组件、pages.json 中配置，优先级为：API = 组件 > pages.json
1、API
有效的路由 API

navigateTo
navigateBack

uni.navigateTo({	url: '../test/test',	animationType: 'pop-in',	animationDuration: 200});
uni.navigateBack({	delta: 1,	animationType: 'pop-out',	animationDuration: 200});

二、组件
open-type 有效值

navigateTo
navigateBack

<navigator animation-type="pop-in" animation-duration="300" url="../test/test">navigator</navigator>
<navigator animation-type="pop-out" animation-duration="300" open-type="navigateBack" >navigator</navigator>

三、pages.json
pages.json 中配置的是窗口显示的动画

"style": {
	"app-plus": {
		"animationType": "fade-in",
		"animationDuration": 300
	}
}

显示动画与关闭动画，会有默认的对应规则。但是如果通过 API 或组件配置了窗口关闭的动画类型，则不会使用默认的类型。

在这里插入图片描述

五、数据缓存

1、uni.setStorage(object)

将数据存储在本地缓存中指定的key中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

<template>
	<view>
		<button type="warn" @click="setStorage">异步数据缓存</button>
	</view>
</template>
<script>
	export default {
		methods: {
			setStorage() {
				uni.setStorage({
					// 本地缓存中的指定的 key
					key: 'storage_key',
					// 需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象
					data: '好好学习天天向上',
					// 接口调用成功的回调函数
					success: function() {
						uni.showToast({
							title: '存储成功',
							duration: 1000
						})
					},
					// 接口调用失败的回调函数
					fail() {
						uni.showToast({
							title: '存储失败',
							duration: 1000
						})
					}
				});

			}
		}

	}
</script>

uni-、uni_、dcloud-、dcloud_为前缀的key，为系统保留关键前缀。如uni_deviceId、uni_id_token，请开发者为key命名时避开这些前缀。

2、uni.setStorageSync(key,data)

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

try {
	uni.setStorageSync('storage_key', 'hello');
} catch (e) {
	// error
}

3、uni.getStorage(object)

从本地缓存中异步获取指定 key 对应的内容。

<template>
	<view>
		<button type="warn" @click="getStorage">本地缓存获取key的内容</button>

	</view>
</template>
<script>
	export default {
		methods: {
			getStorage() {
				uni.getStorage({
					// 本地缓存中的指定的 key
					key: 'storage_key',
					// 接口调用的回调函数，res = {data: key对应的内容}
					success: function(res) {
						console.log(res.data)
						uni.showToast({
							title: '获取成功',
							duration: 1000
						})
					},
					//失败
					fail() {
						uni.showToast({
							title: '获取失败',
							duration: 1000
						})
					}
				});
			}


		},
	}
</script>

4、uni.getStorageSync(key)

从本地缓存中同步获取指定key对应的内容。

try {
	const value = uni.getStorageSync('storage_key');
	if (value) {
		console.log(value);
	}
} catch (e) {
	// error
}

5、uni.getStorageInfo(object)

异步获取当前 storage 相关信息。

<template>
	<view>
		<button type="warn" @click="getStorageInfo">异步获取当前storage的相关信息</button>

	</view>
</template>
<script>
	export default {
		methods: {
			getStorageInfo() {
				uni.getStorageInfo({
					// 接口调用的回调函数，详见返回参数说明
					success: function(res) {
						uni.showToast({
							title: '获取数据成功',
							duration: 1000
						});
						console.log(res.keys);
						console.log(res.currentSize);
						console.log(res.limitSize);
					},
					// 接口调用失败的回调函数
					fail() {
						uni.showToast({
							title: '获取数据失败',
							duration: 1000
						});
					}
				});

			}
		},
	}
</script>

6、uni.getStorageInfoSync()

同步获取当前 storage 的相关信息

<template>
	<view>
		<button type="warn" @click="getStorageInfoSync">同步获取当前storage的相关信息</button>

	</view>
</template>
<script>
	export default {
		methods: {
			getStorageInfoSync() {
				try {
					//获取信息
					const res = uni.getStorageInfoSync();
					console.log(res.keys);
					console.log(res.currentSize);
					console.log(res.limitSize);
				} catch (e) {
					// error
					console.log(e)
				}
			}

		},
	}
</script>

7、uni.removeStorage(object)

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

<template>
	<view>
		<button type="warn" @click="removeStorage">从本地缓存中异步移除指定 key。</button>

	</view>
</template>
<script>
	export default {
		methods: {
			removeStorage() {
				uni.removeStorage({
					// 本地缓存中的指定的 key
					key: 'storage_key',
					// 接口调用的回调函数
					success: function(res) {
						console.log('success');
						uni.showToast({
							title: "成功",
							duration: 1000
						})
					},
					fail() {
						uni.showToast({
							title: "失败",
							duration: 1000
						})
					}
				});

			}
		},
	}
</script>

8、uni.removeStorageSync(key)

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

try {
	uni.removeStorageSync('storage_key');
} catch (e) {
	// error
}

9、uni.clearStorage()

清理本地数据缓存

uni.clearStorage();

10、uni.clearStorageSync()

同步清理本地数据缓存

try {
	uni.clearStorageSync();
} catch (e) {
	// error
}

六、位置

1、获取位置

1、uni.getLocation(object)

获取当前的地理位置、速度等等。

<template>
	<view>
		<button type="warn" @click="getLocation">获取当前的地理位置、速度</button>

	</view>
</template>
<script>
	export default {
		methods: {
			getLocation() {
				uni.getLocation({
					// 默认为 wgs84 返回 gps 坐标，gcj02 返回国测局坐标，可用于 uni.openLocation 和 map 组件坐标，App 和 H5 需配置定位 SDK 信息才可支持 gcj02。
					type: 'wgs84',
					// 传入 true 会返回高度信息，由于获取高度需要较高精确度，会减慢接口返回速度
					altitude: true,
					// 默认false，是否解析地址信息
					geocode: true,
					// 开启高精度定位
					isHighAccuracy: true,
					// 高精度定位超时时间(ms)，指定时间内返回最高精度，该值3000ms以上高精度定位才有效果
					highAccuracyExpireTime: 10000,
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						console.log('速度：' + res.speed);
						console.log('位置的精确度：' + res.accuracy);
						console.log('高度：' + res.altitude);
						console.log('垂直精度：' + res.verticalAccuracy);
						console.log('水平精度：' + res.horizontalAccuracy);
						console.log('地址信息：' + res.address);
						uni.showToast({
							title: '获取成功',
							duration: 1000,
						})

					},
					fail() {
						uni.showToast({
							title: '获取失败',
							duration: 1000,
						})
					}
				});

			}


		}
	}
</script>

2、uni.chooseLocation(object)

打开地图选择位置

<template>
	<view>
		<button type="warn" @click="chooseLocation">打开地图选择位置</button>

	</view>
</template>
<script>
	export default {
		methods: {
			chooseLocation() {
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					}
				});

			}
		}
	}
</script>

2、查看位置

1、uni.openLocation(OBJECT)

使用应用内置地图查看位置。

<template>
	<view>
		<button type="warn" @click="openLocation">使用应用内置地图查看位置</button>

	</view>
</template>
<script>
	export default {
		methods: {
			openLocation() {
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function (res) {
						//纬度
						const latitude = res.latitude;
						//经度
						const longitude = res.longitude;
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							success: function () {
								console.log('success');
							}
						});
					}
				});


			}
		}
	}
</script>

未完，待续中…

uniapp学习笔记之知识点大总结

文章目录

一、uniapp介绍

二、环境搭建

2.1、利用HbuilderX初始化项目

2.2、运行项目

2.3、介绍项目目录和文件作用

三、网络

1、发起请求

2、上传

3、下载

4、SocketTask

1、SocketTask.onMessage(callback)

2、SocketTask.send(object)

3、SocketTask.close(object)

4、SocketTask.onOpen(callback)

5、SocketTask.onClose(callback)

6、SocketTask.onError(callback)

四、跳转

1、uni.navigateTo(object)

2、uni.redirectTo(object)

3、uni.reLaunch(object)

4、uni.switchTab(object)

5、uni.navigateBack(object)

总结

6、窗口动画

五 、数据缓存

1、uni.setStorage(object)

2、uni.setStorageSync(key,data)

3、uni.getStorage(object)

4、uni.getStorageSync(key)

5、uni.getStorageInfo(object)

6、uni.getStorageInfoSync()

7、uni.removeStorage(object)

8、uni.removeStorageSync(key)

9、uni.clearStorage()

10、uni.clearStorageSync()

六、位置

1、获取位置

1、uni.getLocation(object)

2、uni.chooseLocation(object)

2、查看位置

1、uni.openLocation(OBJECT)

相关推荐

五、数据缓存