uni-app移动应用开发课件 5-uni-app组件

移动应用

开发uniAppuni-app组件第

五

章学习目标知识目标

掌握各个Api接口的使用开发并完善智云翻译项目。能力目标

具备熟练应用各种API的能力具备使用Vuex插件管理数据的能力具备项目测试能力具备使用插件的能力。素质目标

具有团队协作精神具有良好的软件编码规范素养具备遵循软件项目开发流程的职业素养具有探索新知、不畏困难的精神。目录CONTENTS计时器交互反馈API概述123网络4数据缓存5路由6案例

智云翻译7网络模块：包含发送Http网络请求、文件上传下载、WebSocket、SocketTask、Udp通信等与网络相关的API。基础模块：包含日志打印、定时器、拦截器、base64字符串和ArrayBuffer相互转换等工具API。数据缓存模块：提供了本地数据缓存的能力。界面模块：用于界面交互的API，比如提示框、模态框；以及媒体查询、设置导航条、设置TabBar、下拉刷新、设置背景等各种与界面相关的API。5.1API概述媒体模块：提供了图片、路由、文件、音频、视频、直播等各种媒体API。5.1API概述设备模块：提供访问系统信息、内存、剪切板、拨打电话、访问蓝牙设备等与设备相关的API。文件模块：包含保存文件、删除文件、得到文件信息、打开文档、得到文件系统管理器等API。绘画模块：提供了有关操作Canvas的API。第三方服务模块：包括获取服务供应商、登录、分享、支付、推送、语音等常见的应用场景API。许多API进行了Promise化，在调用的时候可以用Promise的调用方式来进行。consttask=uni.connectSocket(//正常使用success(res){console.log(res)})uni.connectSocket().then(res=>{//Promise化console.log(res)//此处即为正常使用时success回调的res})5.1API概述同步的方法（即以sync结束）。例如：uni.getSystemInfoSync()1以create开头的方法。例如：uni.createMapContext()2以manager结束的方法。例如：uni.getBackgroundAudioManager()3以下几类API没有进行Promise化：5.1API概述setTimeout在定时到期以后执行注册的回调函数。setInterval按照指定的周期（以毫秒计）来执行注册的回调函数。5.2计时器5.2计时器setTimeout1setTimeout（callback,delay,rest）：设定一个定时器，在定时到期以后执行注册的回调函数。参数类型必填说明callbackFunction是回调函数delayNumber否执行回调函数之间的时间间隔，单位msrestAny否param1,param2,...,paramN等附加参数，它们会作为参数传递给回调函数setTimeout参数说明5.2计时器setInterval2setInterval（callback,delay,rest）：设定一个定时器，按照指定的周期（以毫秒计）来执行注册的回调函数。delay为两次执行回调函数之间的时间间隔，单位为毫秒，其他参数、返回值与setTimeout相同。5.2.2取消计时器timeoutID和intervalID为Number类型，要取消的定时器的编号。取消由setTimeout设置的定时器。clearTimeout（timeoutID）：取消由setInterval设置的定时器。clearInterval（intervalID）：参数说明：setTimeout和setInterval设定的计时器都可以取消。实例：欢迎界面在welcome页面中，显示欢迎界面，2秒钟后跳转到index页面。在onLoad()函数中设置定时器，并读取系统信息，得到界面高度。在pages.json文件中，将welcome作为pages字段的第一项。计时器演示演示效果代码实现timeout.vue5.3交互反馈uni.showToast显示消息提示框uni.hideToast隐藏消息提示框uni.showModal显示模态对话框uni.showLoading显示loading提示框uni.hideLoading隐藏loading提示框uni.showActionSheet显示操作菜单通过使用这些界面交互API，可以给用户创造友好的使用体验，提供提示信息。5.3.1信息提示框显示信息提示框uni.showToast(OBJECT)：隐藏消息框uni.hideToast()：属性类型必填说明平台差异titleString是提示的内容，长度与icon取值有关。

iconString否图标，有效值有success、loading、none。

imageString否自定义图标的本地路径（app端暂不支持gif）App、H5、微信小程序、百度小程序maskBoolean否是否显示透明蒙层，防止触摸穿透，默认：falseApp、微信小程序durationNumber否提示的延迟时间，单位毫秒，默认：1500

positionString否显示位置，填写有效值后只有title属性生效，且不支持通过uni.hideToast隐藏。取值为top、center、bottomApptitleString是提示的内容，长度与icon取值有关。

iconString否图标，有效值详见下方说明。

imageString否自定义图标的本地路径（app端暂不支持gif）App、H5、微信小程序、百度小程序showToast(OBJECT)参数说明5.3.1信息提示框值说明平台差异说明success显示成功图标，此时title文本在小程序平台最多显示7个汉字长度。支付宝小程序无长度无限制loading显示加载图标，此时title文本在小程序平台最多显示7个汉字长度。支付宝小程序不支持none不显示图标，此时title文本在小程序最多可显示两行，App仅支持单行显示。icon属性的取值说明实例演示代码实现在<script>模块的methods中添加方法5.3.2loading提示框uni.showLoading(OBJECT)：用来显示loading提示框，其参数说明如表所示。uni.hideLoading()：用来隐藏loading提示框。参数类型必填说明平台差异说明titleString是提示的文字内容，显示在loading的下方

maskBoolean否是否显示透明蒙层，防止触摸穿透，默认：falseH5、App、微信小程序、百度小程序successFunction否接口调用成功的回调函数

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

completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）showLoading(OBJECT)参数说明5.3.2loading提示框5.3.3模态框uni.showModal(OBJECT)：显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。参数类型必填说明平台差异说明titleString否提示的标题

contentString否提示的内容

showCancelBoolean否是否显示取消按钮，默认为true

cancelTextString否取消按钮的文字，默认为"取消"

cancelColorHexColor否取消按钮的文字颜色，默认为"#000000"H5、微信小程序、百度小程序confirmTextString否确定按钮的文字，默认为"确定"

confirmColorHexColor否确定按钮的文字颜色，默认值：H5"#007aff"，微信小程序："#576B95"，百度小程序"#3c76ff"H5、微信小程序、百度小程序editableBoolean否是否显示输入框H5和APP(3.2.10+)、、微信小程序(2.17.1+)placeholderTextString否显示输入框时的提示文本同上successFunction否接口调用成功的回调函数，返回参数res.confirm为true时表示点了确定按钮、res.cance为true时，表示点了取消按钮

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

completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）showModal(OBJECT)参数说明演示模态框在Interactive.vue的<template>模块添加按钮。在<script>模块的methods中添加方法。5.3.4操作菜单uni.showActionSheet(OBJECT)：从底部向上弹出操作菜单。参数类型必填说明平台差异说明titleString否菜单标题App、H5、支付宝小程序、钉钉小程序、微信小程序3.4.5+（仅真机有效）alertTextString否警示文案（同菜单标题）微信小程序（仅真机有效）itemListArray<String>是按钮的文字数组微信、百度、字节跳动小程序数组长度最大为6个itemColorHexColor否按钮的文字颜色，字符串格式，默认为"#000000"App-iOS、字节跳动小程序、飞书小程序不支持popoverObject否大屏设备弹出原生选择按钮框的指示区域，默认居中显示。属性有top、left、width、height，分别指定坐标或宽度、高度App-iPad（2.6.6+）、H5（2.9.2）successFunction否接口调用成功的回调函数，res.tAPIndex：用户点击的按钮，从上到下，从0开始

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

completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

uni.showActionSheet(OBJECT)参数说明演示操作菜单在Interactive.vue的<template>模块添加按钮在<script>模块的methods中添加方法5.4.1request发起请求发起网络请求使用uni.request(OBJECT)，相当于ajax在实际开发中获取服务器端接口数据，其使用方式类似jQuery的ajax。参数名类型必填默认值说明平台差异说明urlString是

开发者服务器接口地址

dataObject/String/ArrayBuffer否

请求的参数App3.3.7以下不支持ArrayBuffer类型headerObject否

设置请求的header，header中不能设置Referer。App、H5端会自动带上cookie，且H5端不可手动修改methodString否GET有效值详见下方说明

timeoutNumber否60000超时时间，单位msH5(HBuilderX2.9.9+)、APP(HBuilderX2.9.9+)、微信小程序（2.10.0）、支付宝小程序dataTypeString否json如果设为json，会尝试对返回的数据做一次JSON.parse

responseTypeString否text设置响应的数据类型。合法值：text、arraybuffer支付宝小程序不支持sslVerifyBoolean否TRUE验证ssl证书仅App安卓端支持（HBuilderX2.3.3+），不支持离线打包withCredentialsBoolean否FALSE跨域请求时是否携带凭证（cookies）仅H5支持（HBuilderX2.6.15+）firstIpv4Boolean否FALSEDNS解析时优先使用ipv4仅App-Android支持(HBuilderX2.8.0+)successFunction否

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

failFunction否

接口调用失败的回调函数

completeFunction否

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

uni.request(OBJECT)参数说明5.4.1request发起请求data数据：最终发送给服务器的数据是String类型，如果传入的data不是String类型，会被转换成String。转换规则如下：1各参数说明：（1）对于GET方法，会将数据转换为querystring。例如{name:'name',age:18}转换后的结果是name=name&age=18。（2）对于POST方法且header['content-type']为application/json的数据，会进行JSON序列化。（3）对于POST方法且header['content-type']为application/x-www-form-urlencoded的数据，会将数据转换为querystring。method属性：取值可以有get、post、put、deletete、connect、head、options、trace。App、H5、微信小程序支持所有取值。Method属性值的取值取决于服务器端接口文档的描述，不得自己随意编写。25.4.1request发起请求success属性:回调函数。3参数类型说明dataObject/String/ArrayBuffer开发者服务器返回的数据statusCodeNumber开发者服务器返回的HTTP状态码headerObject开发者服务器返回的HTTPResponseHeadercookiesArray.<string>开发者服务器返回的cookies，格式为字符串数组各参数说明：success属性的回调函数参数说明演示网络请求uni-app内部对request进行了promise封装。调用成功会进入then方法回调。调用失败会进入catch方法回调。5.4.2上传文件使用uni.uploadFile()可以将本地资源上传到开发者服务器。客户端发起一个

POST

请求，其中

content-type

为

multipart/form-data。参数名类型必填说明平台差异说明urlString是开发者服务器url

filesArray是需要上传的文件列表。使用files时，filePath和name不生效。App、H5（2.6.15+）fileTypeString

文件类型，image/video/audio仅支付宝小程序，且必填。fileFile否要上传的文件对象。仅H5（2.6.15+）filePathString是要上传文件资源的路径。

nameString是文件对应的key,开发者在服务器端通过这个key可以获取到文件二进制内容

headerObject否HTTP请求Header,header中不能设置Referer。

timeoutNumber否超时时间，单位msH5、APP(HBuilderX2.9.9+)formDataObject否HTTP请求中其他的formdata

successFunction否接口调用成功的回调函数

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

completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）uni.uploadFile(OBJECT)参数说明5.4.2上传文件success回调函数中有2个参数：data、errMsg、statusCode。参数含义与uni.request的success回调函数一致。参数名类型必填说明平台差异说明urlString是开发者服务器url

filesArray是需要上传的文件列表。使用files时，filePath和name不生效。App、H5（2.6.15+）fileTypeString

文件类型，image/video/audio仅支付宝小程序，且必填。fileFile否要上传的文件对象。仅H5（2.6.15+）filePathString是要上传文件资源的路径。

nameString是文件对应的key,开发者在服务器端通过这个key可以获取到文件二进制内容

headerObject否HTTP请求Header,header中不能设置Referer。

timeoutNumber否超时时间，单位msH5、APP(HBuilderX2.9.9+)formDataObject否HTTP请求中其他的formdata

successFunction否接口调用成功的回调函数

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

completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）调用格式：uni.uploadFile(OBJECT)演示上传文件页面通过uni.chooseImage等接口获取到一个本地资源的临时文件路径后，可通过uni.uploadFile将本地资源上传到指定服务器。实现代码<template>的代码5.5数据缓存

uni-app提供了数据供数据本地缓存功能，如可以将用户信息缓存到本地保存起来，这样就不用每次调用服务器来获取这些信息了。数据缓存API就是用来将这些数据保存到本地的，另外还可以获取本地缓存数据、移除缓存数据及清理缓存数据。在实际开发中，经常用于保存会员登录状态信息、购物车、历史记录等场景。5.5.1将数据缓存到本地uni.SetStorage（OBJECT）以异步方式将数据存储在本地缓存指定的key中。uni.setStorageSynC（KEY，DATA）以同步方式将数据存储在本地缓存指定的key中。

将数据缓存到本地，不管是以同步方式还是以异步方式，都是通过key/value的形式存储数据的，只不过以同步方式需要等本地缓存成功后，才可以继续执行下面的程序，而以异步方式则不需要等待本地缓存成功就可以继续执行下面的程序。在数据缓存比较耗时的情况下，可以使用异步方式进行缓存，保证程序不用等待继续执行。5.5.1将数据缓存到本地参数名类型必填说明keyString是本地缓存中的指定的keydataAny是需要存储的内容，只支持原生类型、及能够通过JSON.stringify序列化的对象successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）uni.setStorage(OBJECT)参数说明5.5.1将数据缓存到本地参数名类型必填说明keyString是本地缓存中的指定的keydataAny是需要存储的内容，只支持原生类型、及能够通过JSON.stringify序列化的对象uni.setStorageSync(OBJECT)参数说明演示数据存储异步存储同步存储5.5.2获取本地缓存数据uni.getStorage（OBJECT）:以异步方式从本地缓存中异步获取指定key对应的内容。uni.getStorageSync（KEY）:以同步方式从本地缓存中同步获取指定key对应的内容。uni.getStorageInfo（OBJECT）:以异步方式获取本地所有key值集合。uni.getStorageInfoSync():以同步方式获取本地所有key值集合。5.5.2获取本地缓存数据uni.getStorage（OBJECT）使用异步方式从本地缓存中获取指定key对应的内容参数名类型必填说明keyString是本地缓存中的指定的keysuccessFunction否接口调用成功的回调函数，res为{data：key对应的内容}failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）onLoad(){//以异步方式获取本地数据uni.getStorage({key:'user',success:function(res){console.log(res);}})}示例代码：uni.getStorage(OBJECT)参数说明5.5.2获取本地缓存数据uni.getStorageSync（KEY）是一个同步的接口，用来从本地缓存中同步获取指定key对应的内容。onLoad(){

//以同步方式获取本地数据varuserSync=uni.getStorageSync('userSync');console.log(userSync);}示例代码参数说明：key为本地缓存中指定的key。5.5.2获取本地缓存数据uni.getStorageInfo是以异步方式获取key值集合，是获取所有key的值，Object参数说明如表所示。onLoad(){uni.getStorageInfo({success:function(res){console.log(res);}})}success返回参数说明参数名类型必填说明successFunction是接口调用成功的回调函数，返回见表failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）参数类型说明keysArray<String>当前storage中所有的keycurrentSizenumber当前占用的空间大小，单位为千字节limitSizenumber限制的空间大小，单位为千字节示例代码：获取到本地所有的key值后，根据该key值再调用uni.getStorage或uni.getStorageSync接口就可以获取到本地数据了。5.5.2获取本地缓存数据uni.getStorageInfoSync是以同步方法来获取当前storage的相关信息，示例代码：onLoad(){varstorage=uni.getStorageInfoSync();console.log(storage);}它和uni.getStorageInfo异步获取storage返回的数据一样都是所有的key值，然后根据key值再查找完整的数据。5.5.3清理本地缓存数据uni.removeStorage（OBJECT）用来异步从本地缓存中移除指定的key。onLoad(){

//异步移除key=user的数据uni.removeStorage({key:'user',success:function(res){console.log(res);},})}uni.removeStorageSync（OBJECT）用来同步从本地缓存中移除指定的keyonLoad(){

//同步移除key=userSync的数据

uni.removeStorageSync('userSync');}5.5.3清理本地缓存数据uni.clearStorage()和uni.clearStorageSync()用来清理本地所有缓存数据，前者是以异步方式，后者是以同步方式。uni.clearStorage()try{uni.clearStorageSync()}catch(e){}演示数据存储5.6路由API说明Open-type属性值uni.navigateTo(OBJECT)保留当前页面，跳转到应用内的某个页面，使用uni.navgateBack返回navigateuni.redirectTo(OBJECT)关闭当前页面，跳转到应用内的某个页面。redirectuni.switchTab(OBJECT)跳转到tabBar页面，并关闭其他所有非tabBar页面。switchTabuni.reLaunch(OBJECT)关闭所有页面，打开到应用内的某个页面。reLaunchuni.navigateBack(OBJECT)关闭当前页面，返回上一页面或多级页面。navigateBacknavigator组件的Open-type属性的5种取值，分别对应了5种不同的跳转方式。路由API5.6路由uni.navigateTo(OBJECT)、uni.navigateBack(OBJECT)API的OBJECT参数说明参数类型必填默认值说明差异说明urlString是

需要跳转的应用内非tabBar的页面的路径uni.navigateTo中的参数deltaNumber否1返回的页面数，如果delta大于现有页面数，则返回到首页uni.navigateBack的参数animationTypeString否pop-inAppanimationDurationNumber否300窗口动画持续时间，单位为msAppeventsObject否

页面间通信接口，用于监听被打开页面发送到当前页面的数据。2.8.9+开始支持。uni.navigateTo的参数successFunction否

接口调用成功的回调函数

failFunction否

接口调用失败的回调函数

completeFunction否

接口调用结束的回调函数（调用成功、失败都会执行）5.6路由uni.navigateTo(OBJECT)、uni.navigateBack(OBJECT)API的OBJECT参数说明参数类型必填说明差异说明urlString是需要跳转的应用内非tabBar的页面的路径uni.switchTab的路径不能带参数successFunction否接口调用成功的回调函数

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

completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）5.6路由注意：navigateTo，redirectTo只能打开非tabBar页面。页面跳转路径有层级限制，不能无限制跳转新页面，微信小程序有10层限制。switchTab只能打开tabBar页面。reLaunch可以打开任意页面。页面底部的tabBar由页面决定，即只要是定义为tabBar的页面，底部都有tabBar。不能在App.vue里面进行页面跳转。H5端页面刷新之后页面栈会消失，此时navigateBack不能返回，如果一定要返回可以使用history.back()导航到浏览器的其他历史记录。演示页面路由5.6.2数据传递uni.navigateTo、uni.redirectTo、uni.relaunch这3个路由API中OBJECT参数中url都可以携带参数，如'path?key=value&key2=value2'。uni-app是在onLoad（）生命周期函数中接受参数。onLoad（）方法接受的参数为object类型，会序列化上面页面传递的参数。演示数据传递navigate.vueaccepData.vue运行效果综合案例：智云翻译操作步骤初始配置1（1）在有道智云AI开发平台注册账号并登录，点击头像进入控制台，点击“应用总览”页面中的“创建应用”，创建成功后，可以得到该应用的应用ID和应用密匙（2）新建一个使用uni-ui项目的uni-app项目translate-demo（注意选择vue2）。删除pages下的index文件夹，新建三个页面：翻译页面translate.vue、翻译结果页面result.vue、查看翻译历史页面history.vue。参照第2.1节的内容完成tabbar导航。跨域配置2打开mani