请选择 进入手机版 | 继续访问电脑版

uni-app入门教程(6)接口的扩展应用

[复制链接]
为你演绎 发表于 2021-1-3 11:54:37 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
文章目次




  2021年的第一篇博客,愿自己2020年重在参加、2021年重在脱单,祝各位读者如牛般舞出自己的美丽前程、如牛般游出自己的甜美爱情、如牛般点燃自己的美丽心情。
前言

本文主要先容了接口的扩展应用:设备相关的接口包罗获取系统信息、网络状态、拨打电话、扫码等;导航栏的动态设置;下拉刷新和上拉加载更多的实现;用条件编译实现小步伐、APP等多端兼容;提示框、Loading、模态弹窗等的交互反馈。
一、设备相关

1.系统信息

uni.getSystemInfo(OBJECT)接口用来异步获取系统信息。
OBJECT常见参数和寄义如下:
参数名范例是否必填说明successFunction是接口调用乐成的回调failFunction否接口调用失败的回调函数completeFunction否接口调用竣事的回调函数(调用乐成、失败都会执行)success返回的常见参数和寄义如下:
参数说明brand手机品牌model手机型号pixelRatio设备像素比screenWidth屏幕宽度screenHeight屏幕高度windowWidth可使用窗口宽度windowHeight可使用窗口高度windowTop可使用窗口的顶部位置windowBottom可使用窗口的底部位置version引擎版本号hello uniapp项目中,index.vue如下:
  1.                         获取系统信息       
复制代码
显示:

可以获取到当前设备比力全面的信息。
除了使用uni.getSystemInfo(OBJECT)异步获取设备信息,还可以使用uni.getSystemInfoSync()同步获取系统信息;
uni.canIUse(String)可用于判断应用的 API、回调、参数、组件等是否在当前版本可用。
2.网络状态

uni.getNetworkType(OBJECT)用来获取网络范例。
OBJECT常见参数如下:
参数名范例必填说明successFunction是接口调用乐成,返回网络范例 networkTypefailFunction否接口调用失败的回调函数completeFunction否接口调用竣事的回调函数(调用乐成、失败都会执行)uni.onNetworkStatusChange(CALLBACK)用于监听网络状态变革。
CALLBACK返回参数及寄义如下:
参数范例说明isConnectedBoolean当前是否有网络毗连networkTypeString网络范例如下:
  1.                         获取网络范例       
复制代码
显示:

可以看到,获取到了当前的网络范例。
3.加速度计

uni.onAccelerometerChange(CALLBACK)用于监听加速度数据,频率为5次/秒,接口调用后会自动开始监听,可使用uni.offAccelerometer取消监听。
CALLBACK 返回参数和寄义如下:
参数范例说明xNumberX 轴yNumberY 轴zNumberZ 轴uni.startAccelerometer(OBJECT)用于开始监听加速度数据。
OBJECT参数和寄义如下:
参数名范例默认必填说明intervalStringnormal否接口调用乐成的回调successFunction无否接口调用乐成的回调failFunction无否接口调用失败的回调函数completeFunction无否接口调用竣事的回调函数(调用乐成、失败都会执行)uni.stopAccelerometer(OBJECT)用于停止监听加速度数据。
OBJECT 参数和寄义如下:
参数名范例必填说明successFunction否接口调用乐成的回调failFunction否接口调用失败的回调函数completeFunction否接口调用竣事的回调函数(调用乐成、失败都会执行)4.拨打电话

uni.makePhoneCall(OBJECT)用于拨打电话。
OBJECT 参数如下:
参数名范例必填说明phoneNumberString是需要拨打的电话号码successFunction否接口调用乐成的回调failFunction否接口调用失败的回调函数completeFunction否接口调用竣事的回调函数(调用乐成、失败都会执行)如下:
  1.                         拨打电话       
复制代码
显示:

可以看到,模仿了拨打电话。
除了拨打电话,还可以实现发送短信等。
5.扫码

uni.scanCode(OBJECT)用于调起客户端扫码界面,并在扫码乐成后返回对应的效果。
OBJECT 参数及其寄义如下:
参数名范例必填说明onlyFromCameraBoolean否是否只能从相机扫码,不允许从相册选择图片scanTypeArray否扫码范例,参数范例是数组,二维码是’qrCode’,一维码是’barCode’,DataMatrix是‘datamatrix’,pdf417是‘pdf417’successFunction否接口调用乐成的回调failFunction否接口调用失败的回调函数(识别失败、用户取消等情况下触发)completeFunction否接口调用竣事的回调函数(调用乐成、失败都会执行)此中,success 返回参数如下:
参数说明result所扫码的内容scanType所扫码的范例charSet所扫码的字符集path当所扫的码为当前应用的正当二维码时,会返回此字段,内容为二维码携带的 path简单使用如下:
  1.                         扫描二维码       
复制代码
6.剪贴板

uni.setClipboardData(OBJECT)用于设置系统剪贴板的内容。
OBJECT参数和寄义如下:
参数名范例必填说明dataString是需要设置的内容successFunction否接口调用乐成的回调failFunction否接口调用失败的回调函数completeFunction否接口调用竣事的回调函数(调用乐成、失败都会执行)uni.getClipboardData(OBJECT)用于获取系统剪贴板内容。
OBJECT 参数和寄义如下:
参数名范例必填与否说明successFunction否接口调用乐成的回调failFunction否接口调用失败的回调函数completeFunction否接口调用竣事的回调函数(调用乐成、失败都会执行)如下:
  1.                         复制文字                {{txt}}       
复制代码
显示:

7.屏幕

uni.setScreenBrightness(OBJECT)用于设置屏幕亮度。
OBJECT 参数如下:
参数名范例必填与否说明valueNumber是屏幕亮度值,范围 0~1,0 最暗,1 最亮successFunction否接口调用乐成的回调failFunction否接口调用失败的回调函数completeFunction否接口调用竣事的回调函数(调用乐成、失败都会执行)uni.getScreenBrightness(OBJECT)用于获取屏幕亮度。
OBJECT 参数如下:
参数名范例必填与否说明successFunction否接口调用乐成的回调failFunction否接口调用失败的回调函数completeFunction否接口调用竣事的回调函数(调用乐成、失败都会执行)uni.setKeepScreenOn(OBJECT)用于设置是否保持常亮状态。仅在当前应用生效,脱离应用后设置失效。
OBJECT 参数如下:
参数名范例必填与否说明keepScreenOnBoolean是是否保持屏幕常亮successFunction否接口调用乐成的回调failFunction否接口调用失败的回调函数completeFunction否接口调用竣事的回调函数(调用乐成、失败都会执行)比方:
  1.                         设置屏幕亮度       
复制代码
7.振动

uni.vibrate(OBJECT)用于使手机发生振动。
OBJECT 参数如下:
参数名范例必填与否说明successFunction否接口调用乐成的回调failFunction否接口调用失败的回调函数completeFunction否接口调用竣事的回调函数(调用乐成、失败都会执行)uni.vibrateLong(OBJECT)用于使手机发生较长时间的振动(400ms),uni.vibrateShort(OBJECT)用于使手机发生较短时间的振动(15ms),OBJECT参数与uni.vibrate(OBJECT)相同。
8.手机接洽人

uni.addPhoneContact(OBJECT)调用后,用户可以选择将该表单以“新增接洽人”或“添加到已有接洽人”的方式,写入手机系统通讯录,完成手机通讯录接洽人和接洽方式的增加。
参数名范例必填与否说明photoFilePathString否头像当地文件路径lastNameString否姓氏firstNameString是名字mobilePhoneNumberString否手机号workPhoneNumberString否工作电话emailString否电子邮件urlString否网站successFunction否接口调用乐成的回调failFunction否接口调用失败的回调函数completeFunction否接口调用竣事的回调函数(调用乐成、失败都会执行)二、导航设置

之前导航栏是通过设置实现的,但是不敷机动,这时可以使用接口实现导航栏。
uni.setNavigationBarTitle(OBJECT)用于动态设置当前页面的标题。
OBJECT参数如下:
参数名范例必填与否说明titleString是页面标题successFunction否接口调用乐成的回调failFunction否接口调用失败的回调函数completeFunction否接口调用竣事的回调函数(调用乐成、失败都会执行)uni.setNavigationBarColor(OBJECT)用于设置页面导航条颜色。如果需要进入页面就设置颜色,请延迟执行,防止被框架内设置颜色逻辑覆盖。
OBJECT参数如下:
参数名范例必填与否说明frontColorString是前景颜色值,包罗按钮、标题、状态栏的颜色,仅支持 #ffffff 和 #000000backgroundColorString是配景颜色值,有效值为十六进制颜色animationObject否动画效果,{duration,timingFunc}successFunction否接口调用乐成的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用竣事的回调函数(调用乐成、失败都会执行)uni.showNavigationBarLoading(OBJECT)用于在当前页面显示导航条加载动画,uni.hideNavigationBarLoading(OBJECT)在当前页面隐藏导航条加载动画。
它们的OBJECT参数如下:
参数名范例必填与否说明successFunction否接口调用乐成的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用竣事的回调函数(调用乐成、失败都会执行)示比方下:
  1.                         设置标题       
复制代码
显示:

可以看到,实现了设置标题和控制加载。
三、下拉和上拉

1.下拉刷新

onPullDownRefresh是一个处理处罚函数,和onLoad等生命周期函数同级,用于监听该页面用户下拉刷新事件。
使用前,需要在 pages.json 里,找到的当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh;
当处理处罚完数据刷新后,uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。
uni.startPullDownRefresh(OBJECT)用于开始下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
参数名范例必填与否说明successFunction否接口调用乐成的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用竣事的回调函数(调用乐成、失败都会执行)uni.stopPullDownRefresh()用于停止当前页面下拉刷新。
如下:
  1.                         {{item}}                .newslist {                line-height: 2em;                padding: 20px;        }
复制代码
显示:

可以看到,实现了下拉刷新加载数据。
2.案例–上拉加载更多

上拉加载更多有两种实现方式:


  • 通过scroll-view组件,识别滚动区域,滚动到底部出发加载事件;
  • 识别页面滚动到底部来触发加载事件。
这里使用第二种方式,即生命周期函数onReachBottom来实现,即滚动条滚动到底部时触发事件。
开端实现如下:
  1.                         {{item}}                .newslist {                line-height: 2em;                padding: 20px;        }
复制代码
此中,添加全局变量page用于指定需要请求的数据的页数;
界说函数分别实现第一次获取数据和加载更多数据。
显示:

可以看到,加载了2页数据后,就不能再加载数据了。
此时还可以举行完善,如添加“加载更多”文本提示。
如下:
  1.                         {{item}}                {{loadingText}}                .newslist {                line-height: 2em;                padding: 20px;        }        .loading {                line-height: 2em;                text-align: center;                color: #DD524D;                margin-top: 30px;        }
复制代码
使用延时器让页面先渲染完,再加载数据;
同时在getMoreNews函数中,先判断是否加载完毕,如果已加载完毕则可以不再执行该函数。
显示:

显然,此时体现更好。
四、跨端兼容

许多时候,每个平台有自己的一些特性,小步伐和APP上实现是有一定区别的,大概不一定能兼容所有平台。
此时需要使用条件编译,即用特殊的注释作为标志,在编译时根据这些特殊的注释,将注释内里的代码编译到差别平台,纵然用#ifdef、#ifndef和#endif来判断平台范例,此中:
符号寄义#ifdefif defined 仅在某平台存在#ifndefif not defined 除了某平台均存在%PLATFORM%平台名称对于API、组件、样式等,有差别的注释方式,详细如下:
方式适用平台API和pages.json// #ifdef PLATFORM和// #endif组件和样式/* #ifdef PLATFORM */和/* #endif */测试如下:
  1.                                         微信小步伐                                                H5+APP                       
复制代码
显示:

显然,判断出了当前为微信小步伐平台。
五、交互反馈

交互反馈包罗提示框、加载等的设置。
1.uni.showToast(OBJECT)和uni.hideToast()

分别用于显示和隐藏消息提示框。
OBJECT参数和寄义如下:
参数名范例必填与否说明titleString是提示的内容,长度与 icon 取值有关iconString否图标,有效值详见下方说明。imageString否自界说图标的当地路径maskBoolean否是否显示透明蒙层,防止触摸穿透,默认:falsedurationNumber否提示的延迟时间,单位毫秒,默认:1500positionString否纯文本轻提示显示位置,填写有效值后只有 title 属性生效, 有效值详见下方说明。successFunction否接口调用乐成的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用竣事的回调函数(调用乐成、失败都会执行)2.uni.showLoading(OBJECT)和uni.hideLoading()

前者用于显示 loading 提示框,需主动调用后者才气关闭提示框。
OBJECT参数和寄义如下:
参数名范例必填与否说明titleString是提示的内容maskBoolean否是否显示透明蒙层,防止触摸穿透,默认:falsesuccessFunction否接口调用乐成的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用竣事的回调函数(调用乐成、失败都会执行)测试如下:
  1.                         显示提示框                显示并关闭Loading提示框       
复制代码
显示:

可以看到,可正常显示、关闭提示框和loading。
3.uni.showModal(OBJECT)

用于显示模态弹窗,雷同于标准 html 的消息框alert、confirm。
OBJECT参数和寄义如下:
参数名范例必填与否说明titleString否提示的标题contentString否提示的内容showCancelBoolean否是否显示取消按钮,默认为 truecancelTextString否取消按钮的文字,默认为"取消",最多 4 个字符cancelColorHexColor否取消按钮的文字颜色,默认为"#000000"confirmTextString否确定按钮的文字,默认为"确定",最多 4 个字符confirmColorHexColor否确定按钮的文字颜色,H5平台默认为"#007aff",微信小步伐平台默认为"#3CC51F",百度小步伐平台默认为"#3c76ff"failFunction否接口调用失败的回调函数completeFunction否接口调用竣事的回调函数(调用乐成、失败都会执行)4.uni.showActionSheet(OBJECT)

​用于显示操纵菜单
OBJECT参数和寄义如下:
参数名范例必填与否说明itemListArray是按钮的文字数组itemColorHexColor否按钮的文字颜色,字符串格式,默认为"#000000"successFunction否接口调用乐成的回调函数,详见返回参数说明failFunction否接口调用失败的回调函数completeFunction否接口调用竣事的回调函数(调用乐成、失败都会执行)测试如下:
  1.                         显示模态弹窗                ​显示操纵菜单       
复制代码
显示:

可以看到,可以对模态弹窗和操纵菜单举行操纵。
总结

uni-app的家口为开发者提供了丰富的功能,包罗设备、界面等,我们只需要直接调用即可实现所需功能,淘汰了自己开发的贫苦,有利于快速开发。

来源:https://blog.csdn.net/CUFEECR/article/details/112067894
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )