uni-app移动应用开发（微课版）课件 项目六 uni-app常用API

项目六uni-app常用API

项目六uni-app常用API

项目任务：任务1API概述任务2网络类API任务3页面和路由类API任务4数据缓存类API任务5位置类API任务6设备类API任务7界面类API任务8用户登录API任务9综合案例01任务1API概述

任务1API概述

uni-app的API由两部分组成，分别是标准ECMAScript的JSAPI和uni自身扩展的API。其中，标准ECMAScript的JSAPI是最基础的JS，不包括额外的扩展对象。uni自身扩展的API是对ECMAScript的扩展，在ECMAScript的基础上扩展出uni对象，uni对象内部封装了很多API，这些API支持Web端和非Web端（App和小程序端）平台运行。uni-app的API通常以uni.开头，且命名与小程序保持兼容。这些API总体上包括基础API、网络API、页面路由API、数据缓存API、位置API、媒体API、设备API、文件API和界面等。uni-app的API使用非常简单，以最常见的网络请求API为例，一个基本的uni-appAPI写法如下。

任务1API概述uni.request({

url:"/request",//非真实接口地址，仅作为模拟

success:(res)=>{

console.log(res.data);

},

fail:(err)=>{

console.log(err);

},

complete:()=>{

console.log(‘请求完成’);

},});

其中，通过url属性设置请求URL，请求成功进入success回调函数处理，在success回调函数内部可通过res.data获取响应数据。请求失败进入fail回调函数处理，在fail回调函数内部可通过err参数获取失败信息。无论请求是成功还是失败，在请求结束后都会进入complete回调函数处理，在complete回调函数内部可进行释放资源等工作。如未特殊约定，所有uni-app的API接口都接受一个OBJECT作为参数。OBJECT中可以指定success，fail，complete回调来接收接口调用结果。

任务1API概述

除了上述写法外，uni-app的部分API还支持使用Promise化写法。Promise化写法有Vue2和Vue3两个版本，这里只针对Vue3版本做介绍。Vue3版本的Promise化写法统一使用then和catch方法作为回调函数。调用成功进入then方法执行，调用失败进入catch方法执行。//使用Promise化写法，then和catch方法作为回调uni

.request({

url:"/request",

//非真实接口地址，仅作为模拟

})

.then((res)=>{

//此处的res参数，与上述success回调中的res参数一致

console.log(res.data);

})

.catch((err)=>{

//此处的err参数，与上述fail回调中的err参数一致

console.error(err);

});

任务1API概述

何时使用Promise化写法，uni-app约定如下规则。

1.所有同步API方法，即方法名末尾以sync结束的。统一不采用Promise化写法。例如uni.getSystemInfoSync()

2.所有API方法名以create开头的方法如uni.createMapContext()，不采用Promise化写法。

3.所有API方法名以manager结束的方法如uni.getBackgroundAudioManager()，不采用Promise化写法。

4.对于异步API方法，且没有返回对象的，使用时如果不传入success、fail、complete等回调参数，必须使用Promise化写法。

5.对于异步API方法，且有返回对象的，如果需要获取返回对象，不能使用Promise化写法。必须至少传入success、fail、complete等回调参数中的一项才能获取返回对象。02任务2网络类API

6.2.1request网络请求request网络请求API用于前后端的数据交互，作用类似于Vue中的axios组件。request主要参数参数名类型是否必填默认值说明urlString是

设置后端服务器接口地址dataObject/String/ArrayBuffer否

设置请求参数headerObject否1设置请求头，请求头中不能设置Referer属性。App、Web端的请求头会自动带上cookie，且Web端cookie不可手动修改methodString否GET设置请求方法，有效值为GET、POST、PUT、DELETE等，有效值必须大写timeoutNumber否60000设置超时时间，单位msdataTypeString否json设置响应数据返回格式，如果值为json，会对响应数据进行一次JSON.parse操作，否则不会进行JSON.parse操作responseTypeString否text设置响应的数据类型。有效值为text、arraybuffersslVerifyBoolean否true设置是否验证ssl证书，仅安卓App端支持withCredentialsBoolean否false设置跨域请求时是否携带凭证cookies，仅Web端支持successFunction否

收到开发者服务器成功返回的回调函数failFunction否

接口调用失败的回调函数completeFunction否

接口调用结束的回调函数，调用成功、失败都会执行

6.2.1request网络请求

在API请求时，如果是真机测试环境下，url地址必须使用HTTPS域名地址，且需配置域名白名单，否则不能正常获取数据。配置步骤为：进入微信小程序官网（/）并登录，在首页中服务器域名一栏配置“request合法域名”。

6.2.1request网络请求

如果是在微信开发者工具中，url地址可以使用使用HTTP/HTTPS域名地址，不需配置域名白名单，只需要勾选“不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书”选项即可。

6.2.1request网络请求

requestAPI对于最终发送给服务器的请求数据data统一使用String类型，如果传入的不是String类型，也会被强制转换成String类型，具体转换规则如下。

1.对于GET方法，会将数据转换为querystring。例如请求数据{name:'name',age:18}转换后的结果是name=name&age=18。

2.对于POST方法且请求头content-type属性为application/json的请求数据，会自动进行JSON序列化处理。

3.对于POST方法且请求头content-type属性为application/x-www-form-urlencoded的请求数据，会将数据自动转换为querystring。

请求成功success回调函数返回参数如下。请求失败fail回调函数内部可通过errCode参数获取失败状态码，errMsg获取具体的失败信息。参数类型说明dataObject/String/ArrayBuffer后端服务器接口返回数据statusCodeNumber后端服务器接口返回的HTTP状态码headerObject后端服务器接口返回的响应头cookiesArray.<string>后端服务器接口返回的cookies，格式为字符串数组

6.2.1request网络请求requestAPI的非Promise化写法使用示例如下，默认请求方式是GET，可省略method属性。uni.request({

url:'/request',//仅为示例，并非真实接口地址

data:{

name:'name',

age:18

},

header:{

'custom-header':'hello'//自定义请求头信息

},

success:(res)=>{

if(res.data.code==200)

console.log(res.data.data);

}})

6.2.1request网络请求

如果是POST请求，需在代码中配置method:'POST'，并根据后端服务器的content-type值配置content-type属性。uni.request({

url:'/request',//仅为示例，并非真实接口地址

method:'POST',

data:{

name:'name',

age:18

},

header:{

'custom-header':'hello'//自定义请求头信息

'content-type':'application/json'

},

success:(res)=>{

if(res.data.code==200)

console.log(res.data.data);

}})

6.2.1request网络请求如果希望中断请求，可采用如下写法获取一个RequestTask对象，并调用abort方法。varrequestTask=uni.request({ url:'/request',//仅为示例，并非真实接口地址。 complete:()=>{}})requestTask.abort()//中断请求

下面以GET请求方式，对网络开源接口：/try/ajax/json_demo.json，进行request网络请求，演示request

API用法。该接口返回如下JSON格式的数据，使用多列选择器对其中sites属性的内容进行展示。{

"name":"网站",

"num":3,

"sites":[

{"name":"Google","info":["Android","Google搜索","Google翻译"]},

{"name":"Runoob","info":["菜鸟教程","菜鸟工具","菜鸟微信"]},

{"name":"Taobao","info":["淘宝","网购"]}

]}

6.2.1request网络请求<template> <view> <pickermode="multiSelector":range="list"@change="pickerChange" range-key="name"@columnchange="columnChange"> <view>{{selectValue}}</view> </picker> </view></template><scriptsetup> import{onLoad}from'@dcloudio/uni-app' import{ref,reactive}from'vue'; letselectValue=ref("请选择") lettotalData=reactive([]) letlist=reactive([]) onLoad((option)=>{ uni.request({ url:'/try/ajax/json_demo.json', success:(res)=>{ if(res.statusCode==200){ totalData=res.data.sites letarray1=[]//剩余代码见下一页

6.2.1request网络请求 for(letindexinres.data.sites){ array1.push({id:index,name:res.data.sites[index].name}) } letarray2=[] for(letindexinres.data.sites[0].info){ array2.push({id:index,name:res.data.sites[0].info[index]}) } list.push(array1) list.push(array2) console.log(list); } } }) }) functioncolumnChange(e){ letcol=e.detail.column//获取选择的第几列

letcolindex=e.detail.value//获取选择列值对应的索引

if(col==0){ list.length=0 letarray1=[]//剩余代码见下一页

6.2.1request网络请求 for(letindexintotalData){ array1.push({id:index,name:totalData[index].name}) } letarray2=[] for(letindexintotalData[colindex].info){ array2.push({id:index,name:totalData[colindex].info[index]}) } list.push(array1) list.push(array2)

} } functionpickerChange(e){ letindex1=e.detail.value[0]//获取第一列变更值的索引

letindex2=e.detail.value[1]//获取第二列变更值的索引

selectValue.value=list[0][index1].name+","+list[1][index2].name }</script><style></style>

6.2.1request网络请求在微信开发者工具运行效果。

6.2.2uploadFile文件上传

uploadFileAPI将本地资源上传到开发者服务器，客户端发起一个POST请求，其中content-type为multipart/form-data。uploadFile主要参数参数名类型是否必填说明urlString是设置后端服务器文件上传的接口地址filesArray是（files和filePath选其一）设置需要上传的文件列表。使用files时，filePath和name不生效，该参数仅App和Web端支持filePathString是（files和filePath选其一）设置要上传文件资源的路径fileTypeString支付宝小程序必填设置文件类型，image/video/audio，仅支付宝小程序，且必填。nameString是设置文件对应的ke，开发者在服务器端通过这个key可以获取到文件二进制内容headerObject否设置HTTP请求头，请求头中不能设置ReferertimeoutNumber否设置超时时间，单位msformDataObject否设置HTTP请求中其他额外的formdatasuccessFunction否收到开发者服务器成功返回的回调函数，内部可通过statusCode获取HTTP状态码，通过data属性获取具体的返回数据failFunction否接口调用失败的回调函数，内部可通过errCode参数获取失败状态码，errMsg获取具体的失败信息completeFunction否接口调用结束的回调函数，调用成功、失败都会执行

6.2.2uploadFile文件上传

files参数是一个file对象的数组。files内部对象结构参数名类型是否必填说明nameString否设置multipart提交时，表单的项目名，默认为file，如果name不填或填的值相同，可能导致服务端读取文件时只能读取到一个文件fileFile否设置要上传的文件对象，仅Web端支持uriString是设置文件本地地址

uploadFile

API使用时需注意以下几点：

1.和requestAPI一样，如果是真机测试环境下，url地址必须使用HTTPS域名地址，且需配置域名白名单，否则不能正常获取数据。如果是在微信开发者工具中，url地址可以使用使用HTTP/HTTPS域名地址，不需配置域名白名单。

2.uploadFile

API在App端支持多文件上传，而在微信小程序只支持单文件上传。为支持跨端，建议多文件上传时统一使用循环方式调用本API。

3.如需统一配置网络请求的超时时间，可在manifest.json中配置networkTimeout属性。

6.2.2uploadFile文件上传

uploadFileAPI使用示例如下，可先通过uni.chooseImage等接口获取到一个本地资源的临时文件路径后，再通过此接口将本地资源上传到指定服务器。uni.chooseImage({ success:(chooseImageRes)=>{ consttempFilePaths=chooseImageRes.tempFilePaths; uni.uploadFile({ url:'/upload',//仅为示例，非真实的接口地址

filePath:tempFilePaths[0], name:'file', formData:{ 'user':'test' }, success:(uploadFileRes)=>{ console.log(uploadFileRes.data); } }); }})

6.2.2uploadFile文件上传如果希望返回一个UploadTask对象，需要至少传入success/fail/complete参数中的一个。varuploadTask=uni.uploadFile({ url:'/upload',//仅为示例，并非真实接口地址。 complete:()=>{}})通过UploadTask对象可以中断上传任务，监听上传进度。UploadTask对象提供了如下一些方法。UploadTask对象方法方法名参数说明abort

中断上传任务onProgressUpdatecallback监听上传进度条变化，内部可通过progress属性获取上传进度百分比，通过totalBytesSent属性获取已经上传的数据长度，通过totalBytesExpectedToSend属性获取预期需要上传的数据总长度onHeadersReceivedcallback监听HTTPResponseHeader事件offProgressUpdatecallback取消监听上传进度条变化事件offHeadersReceivedcallback取消监听HTTPResponseHeader事件

6.2.2uploadFile文件上传使用uploadFileAPI来上传图片示例代码。<template> <view> <buttontype="primary"size="mini"@click="uploadFile">上传文件</button> </view></template><scriptsetup> functionuploadFile(){

//选择文件

uni.chooseImage({ success:(chooseImageRes)=>{

//文件本地路径列表tempFilePaths consttempFilePaths=chooseImageRes.tempFilePaths;

//for循环依次从tempFilePaths中获取文件路径上传

for(letitemoftempFilePaths){ constuploadTask=uni.uploadFile({ url:'http://localhost:8080/upload',//仅为示例，非真实地址

filePath:item, name:'file',

//name的值要和后端接收参数名保持一致

formData:{ 'user':'test' },//剩余代码见下一页

6.2.2uploadFile文件上传 success:(uploadFileRes)=>{ console.log(uploadFileRes.data); }, fail:(err)=>{ console.log(err.errMsg); } }); uploadTask.onProgressUpdate((res)=>{ console.log('上传进度'+gress); console.log('已经上传的数据长度'+res.totalBytesSent); console.log('预期需要上传的数据总长度'+

res.totalBytesExpectedToSend); }); } } }); }</script><style></style>

6.2.2uploadFile文件上传@PostMapping("/upload'")@ResponseBodypublicStringupload(@RequestPart(value="file")MultipartFilefile)throwsIOException{ if(!file.isEmpty()){ //省略代码，将文件写到指定目录 } return"success";}如使用SpringBoot做后端接收上传的文件，后端可使用如下代码实现。

6.2.3downloadFile文件下载

downloadFileAPI将文件资源从服务器下载到本地，客户端直接发起一个HTTPGET请求，返回文件的本地临时路径。该临时路径在应用本次启动期间可以正常使用，如需持久保存，需在调用saveFile文件API将文件保存在本地，才能在应用下次启动时访问得到。downloadFile主要参数参数名类型是否必填说明urlString是设置后端服务器文件下载的接口地址headerObject否设置HTTP请求头，请求头中不能设置ReferertimeoutNumber否设置超时时间，单位ms，H5、APP、微信小程序、支付宝小程序、抖音小程序、快手小程序filePathString否设置文件下载后存储的本地路径，小程序端支持（微信IOS小程序保存到相册需要添加此字段才可以正常保存）successFunction否收到开发者服务器成功返回的回调函数，内部可通过statusCode获取HTTP状态码，通过tempFilePath属性获取下载成功后文件的临时路径failFunction否接口调用失败的回调函数，内部可通过errCode参数获取失败状态码，errMsg获取具体的失败信息completeFunction否接口调用结束的回调函数，调用成功、失败都会执行

6.2.3downloadFile文件下载

downloadFileAPI使用示例如下。uni.downloadFile({ url:'http://localhost:8080/download',//仅为示例，并非真实的资源

success:(res)=>{ if(res.statusCode===200){ console.log('下载成功'); console.log('文件临时存储路径'+res.tempFilePath);

//通过文件临时存储路径将文件保存本地

uni.saveFile({ tempFilePath:res.tempFilePath, success:function(res1){ console.log('文件保存本地路径'+res1.savedFilePath); } }); } } fail:(err)=>{ console.log(err.errMsg); }})

6.2.3downloadFile文件下载

如果希望返回一个DownloadTask对象，可采用如下写法，至少传入success/fail/complete参数中的一个。vardownloadTask=uni.downloadFile({ url:'http://localhost:8080/download',//仅为示例，并非真实接口地址。

complete:()=>{}});

通过DownloadTask对象可取消下载任务，监听下载进度变化。DownloadTask对象常用方法如下。DownloadTask对象方法方法名参数说明abort

取消下载任务onProgressUpdatecallback监听下载进度条变化，内部可通过progress属性获取下载进度百分比，通过totalBytesWritten属性获取已经下载的数据长度，通过totalBytesExpectedToWrite属性获取预期需要下载的数据总长度onHeadersReceivedcallback监听HTTPResponseHeader事件offProgressUpdatecallback取消监听下载进度条变化事件offHeadersReceivedcallback取消监听HTTPResponseHeader事件

6.2.3downloadFile文件下载

DownloadTask对象使用示例如下。downloadTask.onProgressUpdate((res)=>{ console.log('下载进度'+gress); console.log('已经下载的数据长度'+res.totalBytesWritten); console.log('预期需要下载的数据总长度'+res.totalBytesExpectedToWrite); //满足测试条件，取消下载任务。 if(gress>50){ downloadTask.abort(); }})03任务3页面和路由类API

6.3.1navigateTo路由API

navigateToAPI用于保留当前页面，跳转到应用内的某个页面，跳转完毕后还可以使用navigateBack可以返回到原页面。navigateTo主要参数参数名类型是否必填说明urlString是需要跳转的应用内非tabBar的页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如'path?key=value&key2=value2'，path为下一个页面的路径，可在下一个页面使用onLoad函数得到传递的参数animationTypeString否设置窗口显示的动画效果，默认值为pop-in，仅App端支持animationDurationNumber否设置窗口动画持续时间，单位为ms，默认值为300，仅App端支持eventsObject否页面间通信接口，用于监听被打开页面发送到当前页面的数据successFunction否接口调用成功的回调函数，内部可通过eventChannel属性向被打开页面传送数据failFunction否接口调用失败的回调函数，内部可通过errCode参数获取失败状态码，errMsg获取具体的失败信息completeFunction否接口调用结束的回调函数，调用成功、失败都会执行

6.3.1navigateTo路由API

success回调函数中的eventChannel属性是一个EventChannel对象，用于页面间事件通信和数据传递。EventChannel对象提供以下4个方法。EventChannel对象方法方法名说明emit(StringeventName,Anyargs)用于触发一个事件。eventName为事件名称，args为事件参数off(StringeventName,Functionfn)用于取消监听一个事件。给出第二个参数时，只取消给出的监听函数，否则取消所有监听函数。eventName为事件名称，fn为事件监听函数on(stringeventName,functionfn)用于持续监听一个事件。eventName为事件名称，fn为事件监听函数once(stringeventName,functionfn)用于监听一个事件一次，触发后失效。eventName为事件名称，fn为事件监听函数

6.3.1navigateTo路由API

在uniappdemo6项目pages/navigate-to目录下新建一个navigate-to.vue页面作为上一级页面存在。<template> <view> <buttontype="primary"size="mini"@click="navigateTo">跳转页面</button> </view></template><scriptsetup> functionnavigateTo(){ //当前页面跳转到test.vue页面并传递参数

uni.navigateTo({ url:"../navigate-to/test?id=1&name=uniapp", events:{ //为指定事件添加监听器，获取test.vue页面传送到当前页面的数据

acceptDataFromOpenedPage:function(data){ console.log(data) }, //为指定事件添加监听器，获取test.vue页面传送到当前页面的数据

someEvent:function(data){ console.log(data) } },//剩余代码见下一页

6.3.1navigateTo路由API success:function(res){ //跳转成功通过eventChannel向test.vue页面传送数据 res.eventChannel.emit('acceptDataFromOpenerPage',{ data:'datafromstarterpage', }) } }); }</script><style></style>

6.3.1navigateTo路由API

新建一个test.vue页面作为下一级页面存在。在其中输入如下代码控制从navigate-to页面跳转到test.vue页面时互相传递参数。<template> <view> </view></template><scriptsetup> import{onLoad}from'@dcloudio/uni-app' import{getCurrentInstance}from'vue'; constinstance=getCurrentInstance().proxy consteventChannel=instance.getOpenerEventChannel() onLoad((option)=>{ console.log(option.id) console.log() eventChannel.emit('acceptDataFromOpenedPage',{ data:'datafromtestpage', }) eventChannel.emit('someEvent',{ data:'datafromtestpageforsomeEvent' });//剩余代码见下一页

6.3.1navigateTo路由API //监听acceptDataFromOpenerPage事件， //获取上一页面通过eventChannel传送到当前页面的数据 eventChannel.on('acceptDataFromOpenerPage',function(data){ console.log('acceptDataFromOpenerPage',data) }) })</script><style></style>

6.3.1navigateTo路由API

navigateTo

API使用时需注意以下几点：

1.页面跳转路径有层级限制，不能无限制跳转新页面。

2.如要跳转到tabBar页面路径，只能使用switchTab跳转。

3.url属性指向的目标页面路径必须是在pages.json里注册的。

4.通过url有长度限制，如传递参数长度过长会失败，可使用页面通信API实现，页面通信API将在后续内容介绍。

5.通过url传递的参数出现空格等特殊字符时需要对参数使用encodeURIComponent进行编码，例如跳转test.vue页面并传递item参数，可使用如下写法。

在test.vue页面接受参数时需使用decodeURIComponent解码。url:"../navigate-to/test?item="+encodeURIComponent(JSON.stringify(item))onLoad:function(option){ constitem=JSON.parse(decodeURIComponent(option.item));}

6.3.2redirectTo路由API

redirectToAPI用于关闭当前页面，重定向跳转到应用内的某个页面，跳转完毕后不能使用navigateBack可以返回到原页面。redirectTo主要参数参数名类型是否必填说明urlString是需要跳转的应用内非tabBar的页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如'path?key=value&key2=value2'，path为下一个页面的路径，可在下一个页面使用onLoad函数得到传递的参数successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数，内部可通过errMsg获取具体的失败信息completeFunction否接口调用结束的回调函数，调用成功、失败都会执行

6.3.2redirectTo路由APIredirectTo使用示例如下。uni.redirectTo({ url:'test?id=1', success:function(res){

})})

6.3.3reLaunch路由API

reLaunchAPI用于关闭所有页面，打开到应用内的某个页面，跳转完毕后不能使用navigateBack可以返回到原页面。reLaunch主要参数参数名类型是否必填说明urlString是需要跳转的应用内非tabBar的页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如'path?key=value&key2=value2'，path为下一个页面的路径，可在下一个页面使用onLoad函数得到传递的参数successFunction否接口调用成功的回调函数，内部可通过errMsg获取具体的失败信息failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数，调用成功、失败都会执行

6.3.3reLaunch路由API

reLaunch使用示例如下。uni.reLaunch({ url:'test?id=1', success:function(res){

})})

Web端调用uni.reLaunch之后之前页面栈会销毁，但是无法清空浏览器之前的历史记录，此时navigateBack不能返回，可通过点击浏览器的返回按钮或者调用history.back()导航到浏览器的历史记录页面。

6.3.3reLaunch路由API

switchTabAPI用于跳转到tabBar页面，并关闭其他所有非tabBar页面。switchTab主要参数参数名类型是否必填说明urlString是需要跳转的tabBar页面的路径，需在pages.json文件的tabBar字段定义的页面路由，路径后不能带参数successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数，内部可通过errMsg获取具体的失败信息completeFunction否接口调用结束的回调函数，调用成功、失败都会执行

6.3.3reLaunch路由APIswitchTab使用示例如下。uni.switchTab({ url:'/pages/index/index'});同时pages.json文件中需进行如下tabBar配置。{

"tabBar":{

"list":[{

"pagePath":"pages/index/index",

"text":"首页"

},{

"pagePath":"pages/other/other",

"text":"其他"

}]

}}

6.3.5navigateBack路由API

navigateBackAPI用于关闭当前页面，返回上一页面或多级页面。跳转多级页面可通过getCurrentPages()获取当前的页面栈，决定需要返回几层。navigateBack主要参数参数名类型是否必填说明deltaNumber否返回的页面数，默认值为1。如果delta大于现有页面数，则返回到首页animationTypeString否设置窗口关闭的动画效果，默认值为pop-out，仅App端支持animationDurationNumber否设置窗口关闭动画持续时间，单位为ms，默认值为300，仅App端支持successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数，内部可通过errCode参数获取失败状态码，errMsg获取具体的失败信息completeFunction否接口调用结束的回调函数，调用成功、失败都会执行

6.3.5navigateBack路由API

通过navigateTo跳转的页面会被加入页面栈，可以使用navigateBack返回。通过redirectTo跳转的页面不会加入页面栈，不能使用navigateBack返回。

navigateBack使用示例如下。//此处是A页面uni.navigateTo({ url:'B?id=1'})

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

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

6.3.6getCurrentPages页面API

getCurrentPagesAPI用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页实例，最后一个元素为当前页面实例。页面跳转时，getCurrentPages可用于上下级页面互相访问对方成员。每个页面实例的属性和方法如下。表6-14页面实例的属性和方法属性/方法说明page.$getAppWebview()获取当前页面的WebView对象实例，仅App端支持page.$vm当前页面的Vue实例page.route获取当前页面的路由

这里在项目pages/get-currents目录下新建pres.vue页面作为上级页面，新建get-currents.vue页面作为下级页面。输入代码在pres.vue页面添加按钮，单击按钮跳转到get-currents.vue页面。在get-currents.vue页面中通过getCurrentPages访问pres.vue页面的变量和方法。

6.3.6getCurrentPages页面API<template> <view> <buttontype="primary"size="mini"@click="navigateTo">跳转页面</button> </view></template><scriptsetup> lettitle="aaa" consttest=()=>{ console.log("test方法执行") } constnavigateTo=()=>{ uni.navigateTo({ url:"/pages/get-currents/get-currents" }) } //暴露变量和方法，给下一级页面get-currents.vue访问

defineExpose({ test, title })</script><style></style>pres.vue

6.3.6getCurrentPages页面API<template> <view> </view></template><scriptsetup> import{onLoad}from'@dcloudio/uni-app' onLoad((option)=>{ //获取当前页面栈实例（此时最后一个元素为当前页）

constpages=getCurrentPages() //获取上一级页面Vue实例

constprevPage=pages[pages.length-2] //获取上一级页面title变量值

console.log(prevPage.$vm.title) //调用上一级页面test方法

prevPage.$vm.test() })</script><style></style>get-currents.vue

6.3.7页面通信API

页面通信API允许用户自定义一个全局事件，通过该事件可实现页面之间的参数传递。页面通信API包括$emit、$on、$once和$off四类。页面通信API方法名说明$emit(StringeventName,Objectobject)触发全局的自定义事件，附加参数都会传给监听器回调函数。eventName为事件名称，object为触发事件携带的附加参数$off(StringeventName,Functioncallback)移除全局自定义事件监听器。eventName为事件名称，callback为事件监听函数$on(stringeventName,functioncallback)监听全局的自定义事件，事件由$emit触发，回调函数会接收事件触发函数的传入参数。eventName为事件名称，callback为事件监听函数$once(stringeventName,functioncallback)监听全局的自定义事件，事件由$emit触发，但仅触发一次，在第一次触发之后移除该监听器。eventName为事件名称，callback为事件监听函数

6.3.7页面通信API

$off的使用需注意以下几点：

1.如果$off没有传入参数，则移除所有事件监听器。

2.如果只提供了事件名（eventName），则移除该事件名对应的所有监听器。

3.如果同时提供了事件与回调函数，则只移除这个事件回调函数对应的监听器。注意回调函数必须跟$on的回调函数保持一致，为同一个函数，才能生效。

4.$emit和$on属于全局级别跨页面、跨组件的传参，接收端页面接收数据后，要及时移除监听器。如使用$on监听，可在页面onUnload周期使用$off移除监听器，或者在接收端使用$once监听一次。

这里在项目pages/emit目录下新建emit.vue页面作为上级页面，新建emit-sub.vue页面作为下级页面。在emit.vue页面中定义按钮跳转到emit-sub.vue页面，并同时使用$emit向emit-sub.vue页面传递数据，emit-sub.vue页面使用$on监听接收传递过来的数据。

6.3.7页面通信API<template> <view> <buttontype="primary"size="mini"@click="navigateTo">跳转页面</button> </view></template><scriptsetup> constnavigateTo=()=>{ uni.navigateTo({ url:"/pages/emit/emit-sub", success:(res)=>{ //先跳转页面，待emit-sub加载完毕后传递数据，否则接收不到数据

console.log("跳转成功后，向emit-sub传递数据") uni.$emit("emit",{ data:1 }) } }) }</script><style></style>emit.vue

6.3.7页面通信API<template> <view> 收到页面emit传递的数据:{{data}} </view></template><scriptsetup> import{onLoad,onUnload}from'@dcloudio/uni-app' import{ref}from'vue'; letdata=ref(0) onLoad((option)=>{ uni.$on("emit",(res)=>{ console.log('收到页面emit传递的数据:',res.data); data.value=res.data }) }) //页面销毁时移除监听 onUnload(()=>{ uni.$off("emit"); })</script><style></style>emit-sub.vue04任务4数据缓存类API

6.4.1setStorage类API

setStorage类API用于将数据存储在本地缓存中指定的一个key中，如果该key值已存在，会覆盖掉key中已存储的内容。setStorage类API分为同步和异步两种，同步API名为setStorageSync，异步API名为setStorage。

setStorageSyncAPI只有两个参数key和data。setStorageSync参数参数名类型是否必填说明keyString是本地缓存中的指定的keydataAny是需要存储的内容，只支持原生类型、及能够通过JSON.stringify序列化的对象

6.4.1setStorage类API

setStorageAPI在setStorageSyncAPI基础上新增了success、fail和complete三个异步回调函数作为参数。setStorage参数参数名类型是否必填说明keyString是本地缓存中的指定的

keydataAny是需要存储的内容，只支持原生类型、及能够通过JSON.stringify序列化的对象successFunction否接口调用成功的回调函数，failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数，调用成功、失败都会执行

注意：uni-、uni_、dcloud-、dcloud_为前缀的key，为系统保留关键前缀。在命名key时请避开这些前缀。

6.4.1setStorage类APIsetStorageSyncAPI使用示例如下。setStorageAPI使用示例如下。uni.setStorageSync('storage_key','hello');uni.setStorage({ key:'storage_key', data:'hello', success:function(){ console.log('success'); }})

6.4.2getStorage类API

getStorage类API用于从本地缓存中获取指定key对应的内容。getStorage类API分为同步和异步两种，同步API名为getStorageSync，异步API名为getStorage。

getStorageSyncAPI只有1个参数key，用于从本地缓存中读取数据时指定key。

getStorageAPI在getStorageSyncAPI基础上新增了success、fail和complete三个异步回调函数作为参数。getStorage参数参数名类型是否必填说明keyString是本地缓存中的指定的keysuccessFunction否接口调用成功的回调函数，可通过data属性获取key对应的数据内容failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数，调用成功、失败都会执行

6.4.2getStorage类APIgetStorageSyncAPI使用示例如下。setStorageAPI使用示例如下。constvalue=uni.getStorageSync('storage_key');if(value){ console.log(value);}uni.getStorage({ key:'storage_key', success:function(res){ console.log(res.data); }})

6.4.3getStorageInfo类API

getStorageInfo类API获取当前本地缓存的相关信息，包括本地缓存的所有key、占用空间大小等。getStorageInfo类API分为同步和异步两种，同步API名为getStorageInfoSync，异步API名为getStorageInfo。

getStorageInfoSyncAPI没有输入参数。返回值包括keys、currentSize和limitSize三个属性。getStorageInfoSync返回值属性参数名类型说明keysArray＜String＞获取本地缓存中所有的keycurrentSizeNumber获取本地缓存当前占用的空间大小,单位为kblimitSizeFunction获取本地缓存限制的空间大小,单位为kb

6.4.3getStorageInfo类API

getStorageAPI在getStorageSyncAPI基础上新增了success、fail和complete三个异步回调函数作为参数。

getStorageInfoSyncAPI使用示例如下。constres=uni.getStorageInfoSync();console.log(res.keys);console.log(res.currentSize);console.log(res.limitSize);getStorageInfo

API使用示例如下。uni.getStorageInfo({ success:function(res){ console.log(res.keys); console.log(res.currentSize); console.log(res.limitSize); }})

6.4.4removeStorage和clearStorage类API

removeStorage和clearStorage类API都用于清除本地缓存。所不同的是removeStorage类API用于从本地缓存中移除指定key。clearStorage类API用于一次性清理本地数据缓存。

1.removeStorage类API

removeStorage类API分为同步和异步两种，同步API名为removeStorageSync，异步API名为removeStorage。

removeStorageSyncAPI只有1个参数key，用于从本地缓存中移除数据时指定key。

removeStorageAPI在removeStorageSyncAPI基础上新增了success、fail和complete三个异步回调函数作为参数。removeStorage参数参数名类型是否必填说明keyString是本地缓存中的指定的keysuccessFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数，调用成功、失败都会执行

6.4.4removeStorage和clearStorage类API

removeStorageSyncAPI使用示例如下。uni.removeStorageSync('storage_key');

removeStorageAPI使用示例如下。uni.removeStorage({ key:'storage_key', success:function(res){ console.log('success'); }})

2.clearStorage类API

clearStorage类API分为同步和异步两种，同步API名为clearStorageSync，异步API名为clearStorage。

clearStorageSync和clearStorage都没有参数，使用示例如下。uni.clearStorageSync();

//同步清理本地缓存uni.clearStorage();

//异步清理本地缓存05任务5位置类API

任务5位置类API

位置类API允许开发人员获取当前位置信息，用于地图定位、查找附件人或店铺、显示详细地址信息等。位置类API中最常用的就是getLocation。getLocation用于获取当前的地理位置和速度。getLocation参数参数名类型是否必填说明typeString否设置返回坐标类型，有效值为wgs84（默认值，返回GPS坐标）和gcj02（返回国测局坐标）。gcj02类型坐标可直接用于uni.openLocation和map组件定位。App和Web端需配置定位SDK信息才可支持gcj02，小程序端可直接使用gcj02altitudeBoolean否设置获取高度，默认值为false,传入true会返回高度信息，由于获取高度需要较高精确度，会减慢接口返回速度。抖音小程序、飞书小程序、支付宝小程序不支持geocodeBoolean否设置是否解析地址信息，默认值false。仅App平台支持（安卓需指定type为gcj02并配置三方定位SDK）highAccuracyExpireTimeNumber否设置高精度定位超时时间(ms)，指定时间内返回最高精度，该值3000ms以上高精度定位才有效果isHighAccuracyBoolean否设置是否开启高精度定位successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数，调用成功、失败都会执行

任务5位置类API

sucess回调函数返回参数如下。sucess回调函数返回参数参数名说明latitude获取纬度，浮点数，范围为-90~90，负数表示南纬longitude获取经度，浮点数，范围为-180~180，负数表示西经speed获取速度，浮点数，单位m/saccuracy获取位置的精确度altitude获取高度，单位mverticalAccuracy获取垂直精度，单位m（Android无法获取，返回0）horizontalAccuracy获取水平精度，单位maddress获取详细地址信息（仅App端支持，需配置geocode为true）

address详细地址信息的有效字段包括：country（国家）、province（省）、city（市）、district（区县）、street（街道）、streetNum（门牌号）、poiName（POI信息）、postalCode（邮编）、cityCode（城市代码），如果其中某个字段无法获取，则返回undefined。

任务5位置类API

使用getLocation之前需先在manifest.json的“源码视图”一栏进行如下黑体配置。否则会报错：getLocation:failtheapineedtobedeclaredintherequiredPrivateInfosfieldinapp.json/ext.json。

/*小程序特有相关*/

"mp-weixin":{

"appid":"",

"setting":{

"urlCheck":false

},

"usingComponents":true,

"permission":{

"scope.userLocation":{

"desc":"获取位置"

}

},

"requiredPrivateInfos":["getLocation"]

任务5位置类API

getLocation使用示例代码如下，可获取当前位置经纬度、高度、速度等信息。<template> <view> </view></template><scriptsetup> import{onLoad}from'@dcloudio/uni-app' onLoad((option)=>{ uni.getLocation({ type:"gcj02", success:function(res){ console.log(res.longitude) console.log(res.latitude) }, fail:(err)=>{ console.log(err.errMsg) } }) })</script><style></style>

任务5位置类API

下面结合地图组件map使用getLocation获取当前坐标并在地图上标记位置。<template> <view> <mapclass="map":markers="markers" :latitude="latitude":longitude="longitude"></map> </view></template>