一、uniapp介绍
uni-app
是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。
为什么要去学习uni-app?
相对开发者来说,减少了学习成本,因为只学会uni-app之后,即可开发出iOS、Android、H5、以及各种小程序的应用,不需要再去学习开发其他应用的框架,相对公司而言,也大大减少了开发成本。
二、环境搭建
安装编辑器HbuilderX 下载地址
HBuilderX是通用的前端开发工具,但为uni-app
做了特别强化。
下载App开发版,可开箱即用
安装微信开发者工具 下载地址
2.1、利用HbuilderX初始化项目
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变量预置。
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'
});
注意
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'
});
注意
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.jsonpages.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)
<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)
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>
未完,待续中…