推荐（免费）：uni-app教程
文章目录
前言一、设备相关1.系统信息2.网络状态3.加速度计4.拨打电话5.扫码6.剪贴板7.屏幕7.振动8.手机联系人二、导航设置三、下拉和上拉1.下拉刷新2.案例--上拉加载更多四、跨端兼容五、交互反馈1.uni.showtoast(object)和uni.hidetoast()2.uni.showloading(object)和uni.hideloading()3.uni.showmodal(object)4.uni.showactionsheet(object)总结前言
本文主要介绍了接口的扩展应用：设备相关的接口包括获取系统信息、网络状态、拨打电话、扫码等；导航栏的动态设置；下拉刷新和上拉加载更多的实现；用条件编译实现小程序、app等多端兼容；提示框、loading、模态弹窗等的交互反馈。
一、设备相关
1.系统信息
uni.getsysteminfo(object)接口用来异步获取系统信息。
object常见参数和含义如下：
参数名类型是否必填说明
success function 是 接口调用成功的回调
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
success返回的常见参数和含义如下：
参数说明
brand 手机品牌
model 手机型号
pixelratio 设备像素比
screenwidth 屏幕宽度
screenheight 屏幕高度
windowwidth 可使用窗口宽度
windowheight 可使用窗口高度
windowtop 可使用窗口的顶部位置
windowbottom 可使用窗口的底部位置
version 引擎版本号
hello uniapp项目中，index.vue如下：
<template> <view> <button type="primary" @click="getinfo">获取系统信息</button> </view></template><script> export default { data() { return { } }, onload() { }, onshow() { console.log('index onshow') }, onhide() { console.log('index onhide') }, methods: { getinfo: function(){ uni.getsysteminfo({ success:function(res){ console.log(res) } }) } } }</script><style></style>
显示：
可以获取到当前设备比较全面的信息。
除了使用uni.getsysteminfo(object)异步获取设备信息，还可以使用uni.getsysteminfosync()同步获取系统信息；
uni.caniuse(string)可用于判断应用的 api、回调、参数、组件等是否在当前版本可用。
2.网络状态
uni.getnetworktype(object)用来获取网络类型。
object常见参数如下：
参数名类型必填说明
success function 是 接口调用成功，返回网络类型 networktype
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
uni.onnetworkstatuschange(callback)用于监听网络状态变化。
callback返回参数及含义如下：
参数类型说明
isconnected boolean 当前是否有网络连接
networktype string 网络类型
如下：
<template> <view> <button type="primary" @click="getnetworktype">获取网络类型</button> </view></template><script> export default { data() { return {} }, onload() { }, onshow() { console.log('index onshow') }, onhide() { console.log('index onhide') }, methods: { getnetworktype: function(){ uni.getnetworktype({ success:function(res){ console.log(res.networktype); } }); uni.onnetworkstatuschange(function(res){ console.log(res) }) }, } }</script><style></style>
显示：
可以看到，获取到了当前的网络类型。
3.加速度计
uni.onaccelerometerchange(callback)用于监听加速度数据，频率为5次/秒，接口调用后会自动开始监听，可使用uni.offaccelerometer取消监听。
callback 返回参数和含义如下：
参数类型说明
x number x 轴
y number y 轴
z number z 轴
uni.startaccelerometer(object)用于开始监听加速度数据。
object参数和含义如下：
参数名类型默认必填说明
interval string normal 否 接口调用成功的回调
success function 无 否 接口调用成功的回调
fail function 无 否 接口调用失败的回调函数
complete function 无 否 接口调用结束的回调函数（调用成功、失败都会执行）
uni.stopaccelerometer(object)用于停止监听加速度数据。
object 参数和含义如下：
参数名类型必填说明
success function 否 接口调用成功的回调
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
4.拨打电话
uni.makephonecall(object)用于拨打电话。
object 参数如下：
参数名类型必填说明
phonenumber string 是 需要拨打的电话号码
success function 否 接口调用成功的回调
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
如下：
<template> <view> <button type="primary" @click="tel">拨打电话</button> </view></template><script> export default { data() { return {} }, onload() { }, onshow() { console.log('index onshow') }, onhide() { console.log('index onhide') }, methods: { tel: function(){ uni.makephonecall({ phonenumber: '10086' }) }, } }</script><style></style>
显示：
可以看到，模拟了拨打电话。
除了拨打电话，还可以实现发送短信等。
5.扫码
uni.scancode(object)用于调起客户端扫码界面，并在扫码成功后返回对应的结果。
object 参数及其含义如下：
参数名类型必填说明
onlyfromcamera boolean 否 是否只能从相机扫码，不允许从相册选择图片
scantype array 否 扫码类型，参数类型是数组，二维码是’qrcode’，一维码是’barcode’，datamatrix是‘datamatrix’，pdf417是‘pdf417’
success function 否 接口调用成功的回调
fail function 否 接口调用失败的回调函数（识别失败、用户取消等情况下触发）
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
其中，success 返回参数如下：
参数说明
result 所扫码的内容
scantype 所扫码的类型
charset 所扫码的字符集
path 当所扫的码为当前应用的合法二维码时，会返回此字段，内容为二维码携带的 path
简单使用如下：
<template> <view> <button type="primary" @click="sca">扫描二维码</button> </view></template><script> export default { data() { return {} }, onload() { }, onshow() { console.log('index onshow') }, onhide() { console.log('index onhide') }, methods: { sca: function(){ uni.scancode({ success:function(res){ console.log(res) } }) }, } }</script><style></style>
6.剪贴板
uni.setclipboarddata(object)用于设置系统剪贴板的内容。
object参数和含义如下：
参数名类型必填说明
data string 是 需要设置的内容
success function 否 接口调用成功的回调
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
uni.getclipboarddata(object)用于获取系统剪贴板内容。
object 参数和含义如下：
参数名类型必填与否说明
success function 否 接口调用成功的回调
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
如下：
<template> <view> <button type="primary" @click="sca">复制文字</button> <text>{{txt}}</text> </view></template><script> var _self; export default { data() { return { txt: hello } }, onload() { _self = this }, onshow() { console.log('index onshow') }, onhide() { console.log('index onhide') }, methods: { sca: function(){ uni.setclipboarddata({ data: 'https://blog.csdn.net/cufeecr', success:function(res){ console.log(res); uni.getclipboarddata({ success:function(gres){ console.log(gres.data) _self.txt = gres.data } }) } }) }, } }</script><style></style>
显示：
7.屏幕
uni.setscreenbrightness(object)用于设置屏幕亮度。
object 参数如下：
参数名类型必填与否说明
value number 是 屏幕亮度值，范围 0~1，0 最暗，1 最亮
success function 否 接口调用成功的回调
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
uni.getscreenbrightness(object)用于获取屏幕亮度。
object 参数如下：
参数名类型必填与否说明
success function 否 接口调用成功的回调
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
uni.setkeepscreenon(object)用于设置是否保持常亮状态。仅在当前应用生效，离开应用后设置失效。
object 参数如下：
参数名类型必填与否说明
keepscreenon boolean 是 是否保持屏幕常亮
success function 否 接口调用成功的回调
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
例如：
<template> <view> <button type="primary" @click="srn">设置屏幕亮度</button> </view></template><script> var _self; export default { data() { return { txt: hello } }, onload() { _self = this }, onshow() { console.log('index onshow') }, onhide() { console.log('index onhide') }, methods: { srn: function(){ uni.setscreenbrightness({ value: 0.1, success:function(){ console.log('set success') } }) }, } }</script><style></style>
7.振动
uni.vibrate(object)用于使手机发生振动。
object 参数如下：
参数名类型必填与否说明
success function 否 接口调用成功的回调
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
uni.vibratelong(object)用于使手机发生较长时间的振动（400ms），uni.vibrateshort(object)用于使手机发生较短时间的振动（15ms），object参数与uni.vibrate(object)相同。
8.手机联系人
uni.addphonecontact(object)调用后，用户可以选择将该表单以“新增联系人”或“添加到已有联系人”的方式，写入手机系统通讯录，完成手机通讯录联系人和联系方式的增加。
参数名类型必填与否说明
photofilepath string 否 头像本地文件路径
lastname string 否 姓氏
firstname string 是 名字
mobilephonenumber string 否 手机号
workphonenumber string 否 工作电话
email string 否 电子邮件
url string 否 网站
success function 否 接口调用成功的回调
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
二、导航设置
之前导航栏是通过配置实现的，但是不够灵活，这时可以使用接口实现导航栏。
uni.setnavigationbartitle(object)用于动态设置当前页面的标题。
object参数如下：
参数名类型必填与否说明
title string 是 页面标题
success function 否 接口调用成功的回调
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
uni.setnavigationbarcolor(object)用于设置页面导航条颜色。如果需要进入页面就设置颜色，请延迟执行，防止被框架内设置颜色逻辑覆盖。
object参数如下：
参数名类型必填与否说明
frontcolor string 是 前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
backgroundcolor string 是 背景颜色值，有效值为十六进制颜色
animation object 否 动画效果，{duration,timingfunc}
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
uni.shownavigationbarloading(object)用于在当前页面显示导航条加载动画，uni.hidenavigationbarloading(object)在当前页面隐藏导航条加载动画。
它们的object参数如下：
参数名类型必填与否说明
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
示例如下：
<template> <view> <button type="primary" @click="settitle">设置标题</button> </view></template><script> var _self; export default { data() { return { txt: hello } }, onload() { uni.shownavigationbarloading(); }, onshow() { console.log('index onshow') }, onhide() { console.log('index onhide') }, methods: { settitle: function(){ uni.setnavigationbartitle({ title: 'hello...' }); uni.hidenavigationbarloading(); }, } }</script><style></style>
显示：
可以看到，实现了设置标题和控制加载。
三、下拉和上拉
1.下拉刷新
onpulldownrefresh是一个处理函数，和onload等生命周期函数同级，用于监听该页面用户下拉刷新事件。
使用前，需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablepulldownrefresh；
当处理完数据刷新后，uni.stoppulldownrefresh 可以停止当前页面的下拉刷新。
uni.startpulldownrefresh(object)用于开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
参数名类型必填与否说明
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
uni.stoppulldownrefresh()用于停止当前页面下拉刷新。
如下：
<template> <view> <view v-for="(item, index) in newslist" class="newslist">{{item}}</view> </view></template><script> var _self; export default { data() { return { newslist: [] } }, onload() { _self = this }, onshow() { console.log('index onshow') }, onhide() { console.log('index onhide') }, onpulldownrefresh() { this.getnews() }, methods: { getnews: function() { uni.shownavigationbarloading(); uni.request({ url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page=1', success:function(res){ console.log(res); var newslist = res.data.split('--hcsplitor--'); _self.newslist = newslist; uni.stoppulldownrefresh(); uni.hidenavigationbarloading(); } }) } } }</script><style> .newslist { line-height: 2em; padding: 20px; }</style>
显示：
可以看到，实现了下拉刷新加载数据。
2.案例–上拉加载更多
上拉加载更多有两种实现方式：
通过scroll-view组件，识别滚动区域，滚动到底部出发加载事件；识别页面滚动到底部来触发加载事件。这里使用第二种方式，即生命周期函数onreachbottom来实现，即滚动条滚动到底部时触发事件。
初步实现如下：
<template> <view> <view v-for="(item, index) in newslist" class="newslist">{{item}}</view> </view></template><script> // 添加page全局变量 var _self, page; export default { data() { return { newslist: [] } }, onload() { _self = this }, onshow() { console.log('index onshow') }, onhide() { console.log('index onhide') }, onpulldownrefresh() { this.getnews() }, onreachbottom() { this.getmorenews() }, methods: { getnews: function() { page = 1; uni.shownavigationbarloading(); uni.request({ url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page, success:function(res){ console.log(res); var newslist = res.data.split('--hcsplitor--'); _self.newslist = _self.newslist.concat(newslist); uni.stoppulldownrefresh(); uni.hidenavigationbarloading(); page++; } }) }, getmorenews: function() { uni.shownavigationbarloading(); uni.request({ url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page, success:function(res){ console.log(res); uni.hidenavigationbarloading(); if(res.data == null){ return false }; var newslist = res.data.split('--hcsplitor--'); _self.newslist = newslist; uni.stoppulldownrefresh(); page++; } }) } } }</script><style> .newslist { line-height: 2em; padding: 20px; }</style>
其中，添加全局变量page用于指定需要请求的数据的页数；
定义函数分别实现第一次获取数据和加载更多数据。
显示：
可以看到，加载了2页数据后，就不能再加载数据了。
此时还可以进行完善，如添加“加载更多”文本提示。
如下：
<template> <view> <view v-for="(item, index) in newslist" class="newslist">{{item}}</view> <view class="loading">{{loadingtext}}</view> </view></template><script> // 添加page、timer全局变量 var _self, page, timer = null; export default { data() { return { newslist: [], loadingtext: 下拉加载 } }, onload() { _self = this }, onshow() { console.log('index onshow') }, onhide() { console.log('index onhide') }, onpulldownrefresh() { this.getnews() }, onreachbottom() { if(timer != null){ cleartimeout(timer) }; timer = settimeout(function(){ _self.getmorenews() }, 500); }, methods: { getnews: function() { page = 1; uni.shownavigationbarloading(); uni.request({ url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page, success:function(res){ console.log(res); var newslist = res.data.split('--hcsplitor--'); _self.newslist = _self.newslist.concat(newslist); uni.stoppulldownrefresh(); uni.hidenavigationbarloading(); page++; } }) }, getmorenews: function() { if(_self.loadingtext == 已加载完毕){ return false }; _self.loadingtext = 加载中; uni.shownavigationbarloading(); uni.request({ url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page, success:function(res){ console.log(res); uni.hidenavigationbarloading(); if(res.data == null){ _self.loadingtext = 已加载完毕; return false }; var newslist = res.data.split('--hcsplitor--'); _self.newslist = newslist; uni.stoppulldownrefresh(); _self.loadingtext = 加载更多; page++; } }) } } }</script><style> .newslist { line-height: 2em; padding: 20px; } .loading { line-height: 2em; text-align: center; color: #dd524d; margin-top: 30px; }</style>
使用延时器让页面先渲染完，再加载数据；
同时在getmorenews函数中，先判断是否加载完毕，如果已加载完毕则可以不再执行该函数。
显示：
显然，此时表现更好。
四、跨端兼容
很多时候，每个平台有自己的一些特性，小程序和app上实现是有一定区别的，可能不一定能兼容所有平台。
此时需要使用条件编译，即用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台，即使用#ifdef、#ifndef和#endif来判断平台类型，其中：
符号含义
#ifdef if defined 仅在某平台存在
#ifndef if not defined 除了某平台均存在
%platform% 平台名称
对于api、组件、样式等，有不同的注释方式，具体如下：
方式适用平台
api和pages.json // #ifdef platform和// #endif
组件 <!-- #ifdef platform -->和<!-- #endif -->
样式 /* #ifdef platform */和/* #endif */
测试如下：
<template> <view> <!-- #ifdef mp-weixin --> <view class="wx">微信小程序</view> <!-- #endif --> <!-- #ifdef app-plus --> <view class="h5">h5+app</view> <!-- #endif --> </view></template><script> export default { data() { return { } }, onload() { //#ifdef mp-weixin console.log('wx...') //#endif //#ifdef app-plus console.log('app...') //#endif }, onshow() { console.log('index onshow') }, onhide() { console.log('index onhide') }, methods: { } }</script><style></style>
显示：
显然，判断出了当前为微信小程序平台。
五、交互反馈
交互反馈包括提示框、加载等的设置。
1.uni.showtoast(object)和uni.hidetoast()
分别用于显示和隐藏消息提示框。
object参数和含义如下：
参数名类型必填与否说明
title string 是 提示的内容，长度与 icon 取值有关
icon string 否 图标，有效值详见下方说明。
image string 否 自定义图标的本地路径
mask boolean 否 是否显示透明蒙层，防止触摸穿透，默认：false
duration number 否 提示的延迟时间，单位毫秒，默认：1500
position string 否 纯文本轻提示显示位置，填写有效值后只有 title 属性生效， 有效值详见下方说明。
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
2.uni.showloading(object)和uni.hideloading()
前者用于显示 loading 提示框，需主动调用后者才能关闭提示框。
object参数和含义如下：
参数名类型必填与否说明
title string 是 提示的内容
mask boolean 否 是否显示透明蒙层，防止触摸穿透，默认：false
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
测试如下：
<template> <view> <button type="default" @click="showtoast">显示提示框</button> <button type="default" @click="showloading">显示并关闭loading提示框</button> </view></template><script> export default { data() { return { } }, onload() { }, onshow() { console.log('index onshow') }, onhide() { console.log('index onhide') }, methods: { showtoast: function(){ uni.showtoast({ title: 'hello...', icon: 'success' }) }, showloading: function(){ uni.showloading({ title: 'loading...', mask: true, success:function(){ settimeout(function(){ uni.hideloading() }, 3000) } }) } } }</script><style></style>
显示：
可以看到，可正常显示、关闭提示框和loading。
3.uni.showmodal(object)
用于显示模态弹窗，类似于标准 html 的消息框alert、confirm。
object参数和含义如下：
参数名类型必填与否说明
title string 否 提示的标题
content string 否 提示的内容
showcancel boolean 否 是否显示取消按钮，默认为 true
canceltext string 否 取消按钮的文字，默认为取消，最多 4 个字符
cancelcolor hexcolor 否 取消按钮的文字颜色，默认为#000000
confirmtext string 否 确定按钮的文字，默认为确定，最多 4 个字符
confirmcolor hexcolor 否 确定按钮的文字颜色，h5平台默认为#007aff，微信小程序平台默认为#3cc51f，百度小程序平台默认为#3c76ff
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
4.uni.showactionsheet(object)
用于显示操作菜单。
object参数和含义如下：
参数名类型必填与否说明
itemlist array 是 按钮的文字数组
itemcolor hexcolor 否 按钮的文字颜色，字符串格式，默认为#000000
success function 否 接口调用成功的回调函数，详见返回参数说明
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
测试如下：
<template> <view> <button type="default" @click="showmodal">显示模态弹窗</button> <button type="default" @click="showactionsheet">显示操作菜单</button> </view></template><script> var actions = ['music', 'reading']; export default { data() { return { } }, onload() { }, onshow() { console.log('index onshow') }, onhide() { console.log('index onhide') }, methods: { showmodal: function(){ uni.showmodal({ title: 'hello...', content: 'modal window', success:function(res){ if(res.confirm){ console.log('confirm') }else if(res.cancel){ console.log('cancel') } } }) }, showactionsheet: function(){ uni.showactionsheet({ itemlist: actions, success:function(res){ console.log(actions[res.tapindex]) }, fail:function(res){ console.log(res.errmsg) } }) } } }</script><style></style>
显示：
可以看到，可以对模态弹窗和操作菜单进行操作。
总结
uni-app的家口为开发者提供了丰富的功能，包括设备、界面等，我们只需要直接调用即可实现所需功能，减少了自己开发的麻烦，有利于快速开发。
更多精品文章敬请关注uni-app开发教程栏目！
以上就是uni-app入门教程之 接口的扩展应用的详细内容。