uniapp接口文档怎么使用,uni-app菜鸟教程
UNI-APP开发(仿饿)开发课程：进入学习
推荐（免费）：uni-app教程
文章目录
简介：设备相关1。系统信息2。网络状态3。加速度计4。呼叫5。扫码6。剪贴板7。7号屏幕。振动8。电话联系2。导航设置3。下拉和上拉1。下拉刷新2。案例-拉起加载更多4。跨端兼容性5。互动反馈1.uni.showToast(对象)和uni 2。uni 2.uni.showLoading(对象)和uni的概要。hideloading () 3。大学。showmodal (object) 4。大学。showactionsheet(object)前言
主要介绍接口的扩展应用：与设备相关的接口包括获取系统信息、网络状态、打电话、扫码等。导航栏的动态设置；刷新和上拉加载更多实现；利用条件编译实现小程序和app的多终端兼容；提示框、加载、模态弹出等交互反馈。
一、设备相关
1.系统信息
Uni.getSystemInfo(OBJECT)接口用于从异步获取系统信息。
对象的常见参数和含义如下：
参数类型是否为必选：successFunction为接口调用成功的回调failFunction为接口调用失败的无回调函数completeFunction为接口调用完成的无回调函数(调用成功和失败都执行)。success返回的常见参数和含义如下：
参数品牌手机型号手机型号pixelRatio设备像素比例屏幕宽度屏幕高度屏幕高度窗口宽度可用窗口宽度可用窗口高度可用窗口顶部可用窗口底部可用窗口底部可用窗口版本引擎版本号hello uniapp项目，index.vue如下：
模板
视角
button type= primary @ click= getinfo 获取系统信息/button
/view/templatescript
导出默认值{
data() {
返回{
}
},
onLoad() {
},
昂秀(){
console.log(索引onshow )
},
onHide() {
console . log( ide上的索引)
},
方法：{
getinfo: function(){
uni.getSystemInfo({
成功：函数(res){
console.log(res)
}
})
}
}
}/scriptstyle/style显示：
您可以获得关于当前设备的更全面的信息。
除了使用uni.getSystemInfo(OBJECT)异步获取设备信息，还可以使用uni.getSystemInfoSync()同步获取系统信息；Uni.canIUse(String)可以用来判断API、回调、参数、组件等。应用程序的当前版本中提供了。
2.网络状态
Uni.getNetworkType(OBJECT)用于获取网络类型。
对象的常用参数如下：
参数类型必选说明successFunction是一个成功的接口调用，返回网络类型networkTypefailFunction没有接口调用失败的回调函数completeFunction没有接口调用结束的回调函数(调用成功或失败都会执行)Uni。onnetworkstatuschange(回调)用于监视网络状态变化。
回调返回参数及其含义如下：
参数说明isConnectedBoolean当前是否有网络连接networkTypeString网络类型如下：
模板
视角
button type= primary @ click= getnetworktype 获取网络类型/按钮
/view/templatescript
导出默认值{
data() {
返回{}
},
onLoad() {
},
昂秀(){
console.log(索引onshow )
},
onHide() {
console . log( ide上的索引)
},
方法：{
getNetworkType: function(){
uni.getNetworkType({
成功：函数(res){
console . log(RES . network type)；
}
});
uni.onNetworkStatusChange(函数(res){
console.log(res)
})
},
}
}/scriptstyle/style显示：
如您所见，获得了当前的网络类型。
3.加速度计
大学。onaccelerometerchange(回调)用于监控加速数据，频率为5次/秒。接口被调用后，会自动开始监控。您可以使用uni.offAccelerometer取消监控
回调返回参数及含义如下：
类型描述xNumberX轴yNumberY轴zNumberZ轴uni . start加速度计(OBJECT)用于开始监测加速度数据。
对象的参数和含义如下：
参数类型缺省必需描述intervalStringnormal无接口调用成功回调成功函数无接口调用成功回调失败函数无接口调用失败回调函数完成函数无接口调用结束回调函数(调用成功或失败都会执行)Uni。StopAccelerator(对象)用于停止监控加速度数据。
对象的参数和含义如下：
参数类型必需描述成功函数无接口调用成功回调失败函数无接口调用失败回调函数完成函数无接口调用结束回调函数(将执行成功和失败的调用)4.拨打电话
Uni.makePhoneCall(OBJECT)用于打电话。
对象参数如下：
参数类型必需说明phoneNumberString是要拨打的电话号码。成功函数无接口调用成功回调失败函数无接口调用失败回调函数完成函数无接口调用结束回调函数(将执行成功或失败的调用)如下：
模板
视角
button type= primary @ click= tel Call/button
/view/templatescript
导出默认值{
data() {
返回{}
},
onLoad() {
},
昂秀(){
console.log(索引onshow )
},
onHide() {
console . log( ide上的索引)
},
方法：{
电话：function(){
uni.makePhoneCall({
电话号码：“10086”
})
},
}
}/scriptstyle/style显示：
如你所见，呼叫是模拟的。
除了打电话，还可以发短信等。
5.扫码
Uni.scanCode(OBJECT)用于调用客户端的扫码接口，扫码成功后返回相应的结果。
对象的参数及其含义如下：
参数类型必选description only from cameraboolean否，是否只能从相机中扫码，不允许从相册中选择图片。无扫码类型，参数类型为数组，二维码为 QR code ，一维码为 barCode ，DataMatrix为 data matrix 。Pdf417是“pdf”pdf 417“成功功能。成功的接口调用没有回调函数失败的接口调用没有回调函数(在识别失败、用户取消等情况下触发。)completeFunction接口调用结束没有回调函数(调用成功或失败都会执行)。成功的返回参数如下：
解释参数结果扫描的代码内容。scanType扫描的代码类型。字符集扫描的代码的字符集路径。当扫描的代码是当前合法的二维码时，将返回该字段。内容是二维码承载的路径。简单使用如下：
模板
视角
按钮类型= primary @ click= SCA 扫描二维码/按钮
/view/templatescript
导出默认值{
data() {
返回{}
},
onLoad() {
},
昂秀(){
console.log(索引onshow )
},
onHide() {
console . log( ide上的索引)
},
方法：{
sca:函数(){
uni.scanCode({
成功：函数(res){
console.log(res)
}
})
},
}
}/scriptstyle/style6.剪贴板
Uni.setClipboardData(OBJECT)用于设置系统剪贴板的内容。
对象的参数和含义如下：
参数类型必需描述dataString是需要设置的内容。成功函数无接口调用成功回调失败函数无接口调用失败回调函数完成函数无接口调用结束回调函数(将在调用成功或失败时执行)。uni.getClipboardData(OBJECT)用于获取系统剪贴板的内容。
对象的参数和含义如下：
参数类型是否为必需表示成功函数成功的接口调用无回调函数失败的接口调用无回调函数完成函数结束接口调用无回调函数(成功和失败的调用都将被执行)如下：
模板
视角
按钮类型= primary @ click= SCA 复制文本/按钮
text{{txt}}/text
/view/templatescript
var _ self
导出默认值{
data() {
返回{
你好
}
},
onLoad() {
_self=这个
},
昂秀(){
console.log(索引onshow )
},
onHide() {
console . log( ide上的索引)
},
方法：{
sca:函数(){
uni.setClipboardData({
数据： https://blog.csdn.net/CUFEECR ，
成功：函数(res){
console . log(RES)；
uni.getClipboardData({
成功：函数(gres
console.log(gres.data)
_self.txt=gres.data}
})
}
})
},
}
}/scriptstyle/style显示：
7.屏幕
Uni.setScreenBrightness(OBJECT)用于设置屏幕亮度。
对象参数如下：
参数类型是否为必选表示valueNumber是屏幕亮度值，取值范围为0-1，0为最暗，1为最亮。成功函数无接口调用成功回调失败函数无接口调用失败回调函数完成函数无接口调用结束回调函数(将在调用成功或失败时执行)。uni.getScreenBrightness(OBJECT)用于获取屏幕亮度。
对象参数如下：
参数类型是否为必选表示成功函数无接口调用成功回调失败函数无接口调用失败回调函数完成函数无接口调用结束回调函数(成功和失败的调用都会执行)uni.setKeepScreenOn(OBJECT)用于设置是否始终开启。只有当前应用生效，离开应用后设置无效。
对象参数如下：
参数类型是否为必选，keepScreenOnBoolean为是否保持屏幕始终打开成功函数无接口调用成功回调失败函数无接口调用失败回调函数完成函数无接口调用结束回调函数(将执行成功或失败的调用)，例如：
模板
视角
button type= primary @ click= srn 设置屏幕亮度/按钮
/view/templatescript
var _ self
导出默认值{
data() {
返回{
你好
}
},
onLoad() {
_self=这个
},
昂秀(){
console.log(索引onshow )
},
onHide() {
console . log( ide上的索引)
},
方法：{
srn:函数(){
uni.setScreenBrightness({
值：0.1，
成功：函数(){
console.log(设置成功)
}
})
},
}
}/scriptstyle/style7.振动
Uni.vibrate(OBJECT)用于使手机振动。
对象参数如下：
参数类型是否为必选表示成功Function无接口调用成功回调失败Function无接口调用失败回调函数completeFunction无接口调用结束回调函数(成功调用和失败调用都会执行)uni.vibrateLong(OBJECT)用于使手机长时间振动(400ms)，Uni.vibrateShort(OBJECT)用于使手机短时间振动(15ms)，OBJECT参数同uni.vibrate(OBJECT)。
8.手机联系人
调用uni.addPhoneContact(OBJECT)后，用户可以选择“添加新联系人”或“添加到现有联系人”的方式将表单写入电话系统通讯录，完成电话通讯录中联系人和联系方式的增加。
参数类型是否需要的描述photoFilePathString No Avatar本地文件路径Last Name String No Last Name String No first Name String No Mobile Phone numberstring No Work Phone email String No E-mail URL String网站成功函数No interface call成功回调失败函数No interface call失败回调函数完成函数No interface call结束回调函数(成功和失败的调用都将执行)二、导航设置
以前导航条是通过配置实现的，但是不够灵活。此时，导航条可以通过接口实现。
Uni.setNavigationBartitle(对象)用于动态设置当前页面的标题。
对象参数如下：
参数类型是否为必选，titleString为页面标题成功函数无接口调用成功回调失败函数无接口调用失败回调函数完成函数无接口调用结束回调函数(调用成功或失败都会执行)Uni。SetNavigationBarColor (object)用于设置页面导航栏的颜色。如果需要进入页面设置颜色，请延迟执行，防止被框架中设置颜色的逻辑覆盖。
对象参数如下：
参数type是否为必选，表示frontColorString为前景色值，包括按钮、标题、状态栏的颜色。背景色值只支持#ffffff和# 00000 backgroundcolorstring，有效值为十六进制颜色animation object No animation effect，{duration，timing func } success func No interface call成功回调函数failFunction No interface call失败回调函数completeFunction No interface call完成回调函数(调用成功或失败都会执行)Uni。ShowNavigationBarloading(object)用于显示当前页面的导航栏加载动画，uni . hideninavigationbarloading(object)隐藏当前页面的导航栏加载动画。
它们的对象参数如下：
参数名类型必填与否说明成功功能否接口调用成功的回调函数故障函数否接口调用失败的回调函数完成功能否接口调用结束的回调函数（调用成功、失败都会执行)示例如下：
模板
视角
按钮类型=primary @click=setTitle 设置标题/按钮
/view/templatescript
var _自我
导出默认值{
data() {
返回{
你好
}
},
onLoad() {
大学。shownavigationbarloading()；
},
昂秀(){
console.log(索引昂秀’)
},
onHide() {
控制台。日志( ide上的索引)
},
方法：{
setTitle: function(){
uni.setNavigationBarTitle({
标题："你好…"
});
大学。hideenavigationbarloading()；
},
}
}/脚本样式/样式显示：
可以看到，实现了设置标题和控制加载。
三、下拉和上拉
1.下拉刷新
onPullDownRefresh是一个处理函数，和装载等生命周期函数同级，用于监听该页面用户下拉刷新事件。
使用前，需要在页面。数据里，找到的当前页面的页节点，并在风格选项中开启enablePullDownRefresh
当处理完数据刷新后，uni.stopPullDownRefresh可以停止当前页面的下拉刷新。
uni.startPullDownRefresh(对象)用于开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
参数名类型必填与否说明成功功能否接口调用成功的回调函数故障函数否接口调用失败的回调函数完成功能否接口调用结束的回调函数（调用成功、失败都会执行)uni.stopPullDownRefresh()用于停止当前页面下拉刷新。
如下：
模板
视角
在新闻列表 class=新闻列表{ item } }/视图中查看v-for=(项目，索引)
/view/templatescript
var _自我
导出默认值{
data() {
返回{
新闻列表：[]
}
},
onLoad() {
_self=这个
},
昂秀(){
console.log(索引昂秀’)
},
onHide() {
控制台。日志( ide上的索引)
},
onPullDownRefresh() {
this.getNews()
},
方法：{
getNews: function() {
大学。shownavigationbarloading()；
uni.request({
网址： https://demo.hcoder.net/index.php？user=hcoderpwd=hcoderm=list 1 page=1 ，
成功：函数(资源){
控制台。日志(分辨率)；
var新闻列表=研究数据。split(-hcSplitor-)；
_ self.newslist=newslist
大学。stoppulldownrefresh()；
大学。hideenavigationbarloading()；
}
})
}
}
}/脚本样式。新闻列表{
行高：2em
填充：20px
}/样式显示：
可以看到，实现了下拉刷新加载数据。
2.案例上拉加载更多
上拉加载更多有两种实现方式：
通过滚动视图组件，识别滚动区域，滚动到底部出发加载事件；识别页面滚动到底部来触发加载事件。这里使用第二种方式，即生命周期函数在每个底部来实现，即滚动条滚动到底部时触发事件。
初步实现如下：
模板
视角
在新闻列表 class=新闻列表{ item } }/视图中查看v-for=(项目，索引)
/view/templatescript
//添加页，面，张，版全局变量
var _self，页面
导出默认值{
data() {
返回{
新闻列表：[]
}
},
onLoad() {
_self=这个
},
昂秀(){
console.log(索引昂秀’)
},
onHide() {
控制台。日志( ide上的索引)
},
onPullDownRefresh() {
this.getNews()
},
onReachBottom() {
this.getMoreNews()
},
方法：{
getNews: function() {
page=1；
大学。shownavigationbarloading()；
uni.request({
网址： https://demo.hcoder.net/index.php？user=hcoderpwd=hcoderm=list 1 page= page，
成功：函数(资源){
控制台。日志(分辨率)；
var新闻列表=研究数据。split(-hcSplitor-)；
_ self。新闻列表=_ self。新闻列表。concat(新闻列表)；
大学。stoppulldownrefresh()；
大学。hideenavigationbarloading()；
页面；
}
})
},
getmorews:function(){
大学。shownavigationbarloading()；
uni.request({
网址： https://demo.hcoder.net/index.php？user=hcoderpwd=hcoderm=list 1 page= page，
成功：函数(资源){
控制台。日志(分辨率)；
大学。hideenavigationbarloading()；
if(res.data==null){
返回错误的
};
var新闻列表=研究数据。split(-hcSplitor-)；
_ self.newslist=newslist
大学。stoppulldownrefresh()；
页面；
}
})
}
}
}/脚本样式。新闻列表{
行高：2em
填充：20px
}/样式其中，添加全局变量页，面，张，版用于指定需要请求的数据的页数；
定义函数分别实现第一次获取数据和加载更多数据。
显示：
可以看到，加载了2页数据后，就不能再加载数据了。
此时还可以进行完善，如添加"加载更多"文本提示。
如下：
模板
视角
在新闻列表 class=新闻列表{ item } }/视图中查看v-for=(项目，索引)
视图类=正在加载" {loadingText}}/view
/view/templatescript
//添加页面、计时器全局变量
var _self，page，timer=null
导出默认值{
data() {
返回{
新闻列表：[],
正在加载文本： 下拉加载
}
},
onLoad() {
_self=这个
},
昂秀(){
console.log(索引昂秀’)
},
onHide() {
控制台。日志( ide上的索引)
},
onPullDownRefresh() {
this.getNews()
},
onReachBottom() {
如果（定时器！=null){
清除超时（定时器)
};
timer=setTimeout(function(){
_ self.getMoreNews()
}, 500);
},
方法：{
getNews: function() {
page=1；
大学。shownavigationbarloading()；
uni.request({
网址： https://demo.hcoder.net/index.php？user=hcoderpwd=hcoderm=list 1 page= page，
成功：函数(资源){
控制台。日志(分辨率)；
var新闻列表=研究数据。split(-hcSplitor-)；
_ self。新闻列表=_ self。新闻列表。concat(新闻列表)；
大学。stoppulldownrefresh()；
大学。hideenavigationbarloading()；
页面；
}
})
},
getmorews:function(){
if(_self.loadingText==已加载完毕){
返回错误的
};
_self.loadingText=加载中；
大学。shownavigationbarloading()；
uni.request({
网址： https://demo.hcoder.net/index.php？user=hcoderpwd=hcoderm=list 1 page= page，
成功：函数(资源){
控制台。日志(分辨率)；
大学。hideenavigationbarloading()；
if(res.data==null){
_self.loadingText=已加载完毕；
返回错误的
};
var新闻列表=研究数据。split(-hcSplitor-)；
_ self.newslist=newslist
大学。stoppulldownrefresh()；
_self.loadingText=加载更多；
页面；
}
})
}
}
}/脚本样式。新闻列表{
行高：2em
填充：20px
}。正在加载{
行高：2em
文本对齐：居中；
颜色：# DD524D
边距-顶部：30px
}/样式使用延时器让页面先渲染完，再加载数据；
同时在getMoreNews函数中，先判断是否加载完毕，如果已加载完毕则可以不再执行该函数。
显示：
显然，此时表现更好。
四、跨端兼容
很多时候，每个平台有自己的一些特性，小程序和应用上实现是有一定区别的，可能不一定能兼容所有平台。
此时需要使用条件编译,即用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台，即使用#ifdef 、#ifndef和#endif来判断平台类型，其中：
符号含义#ifdefif已定义仅在某平台存在#ifndefif未定义除了某平台均存在%平台%平台名称对于API，组件、样式等，有不同的注释方式，具体如下：
方式适用平台应用程序接口和pages.json//# ifdef平台和//#endif组件！- #ifdef平台-和！- #endif -样式/* #ifdef平台*/和/* #endif */测试如下：
模板
视角
！- #ifdef MP-WEIXIN -
视图class=wx 微信小程序/查看
！- #endif -
！- #ifdef APP-PLUS -
查看H5 H5病毒应用程序/视图
！- #endif -
/view/templatescript
导出默认值{
data() {
返回{
}
},
onLoad() {
//# ifdef MP-威信
console.log(wx . )
//#endif
//#ifdef APP-PLUS
console.log(app . )
//#endif
},
昂秀(){
console.log(索引昂秀’)
},
onHide() {
控制台。日志( ide上的索引)
},
方法：{
}
}/脚本样式/样式显示：
显然，判断出了当前为微信小程序平台。
五、交互反馈
交互反馈包括提示框、加载等的设置。
1.uni.showToast(OBJECT)和uni.hideToast()
分别用于显示和隐藏消息提示框。
目标参数和含义如下：
参数type是否为必选表示titleString是提示的内容，其长度与icon的值有关。iconString No icon，有效值请参考以下说明。ImageString No自定义图标的本地路径maskBoolean No显示透明涂层以防止触摸穿透。默认值：falsedurationNumber无提示延迟时间，单位毫秒。默认值：1500 position string No plain text light提示显示位置。只有标题属性在填入有效值后才会生效。有关有效值，请参见下面的描述。成功函数无接口调用成功回调函数失败函数无接口调用失败回调函数完成函数无接口调用完成回调函数(将执行成功和失败的调用)2.uni.showLoading(OBJECT)和uni.hideLoading()
前者用于显示加载提示框，后者需要主动调用关闭提示框。
对象的参数和含义如下：
参数类型是否为必选，titleString为提示maskBoolean No的内容，是否显示透明遮罩防止触摸穿透，默认：falsesuccessFunction No，接口调用成功的回调函数failFunction No，接口调用失败的回调函数completeFunction No，接口调用结束的回调函数(成功和失败的调用都会执行)测试如下：
模板
视角
button type= default @ click= Show toast 显示提示框/按钮
button type= default @ click= Show loading 显示并关闭加载提示/按钮
/view/templatescript
导出默认值{
data() {
返回{
}
},
onLoad() {
},
昂秀(){
console.log(索引onshow )
},
onHide() {
console . log( ide上的索引)
},
方法：{
showToast: function(){
uni.showToast({
标题：“你好…”,
图标：“成功”
})
},
showLoading: function(){
uni.showLoading({
标题：“正在加载…”,
面具：真的，
成功：函数(){
setTimeout(function(){
uni.hideLoading()
}, 3000)
}
})
}
}
}/scriptstyle/style显示：
可以看到提示框和加载可以正常显示和关闭。
3.uni.showModal(OBJECT)
用于显示模态弹窗，类似于标准html的消息框警告和确认。
对象的参数和含义如下：
参数类型是否为必选：title string No prompt title contentString No prompt content showcancelBoolean No是否显示取消按钮，默认为truecancelTextString No cancel按钮文本，默认为 Cancel ，最多4个字符：cancelColorHexColor No Cancel按钮文本颜色，默认为 # # 000000 Confirm text string No Confirm按钮文本，默认为 OK ，最多4个字符confirmColorHexColor No Confirm按钮文本颜色，H5平台默认为 #007aff ，微信小程序平台默认为 # 3c 百度小程序平台默认为 #3c76fffailFunction无接口调用失败回调函数completeFunction无接口调用结束回调函数(调用成功或失败都会被执行)4.uni.showActionSheet(OBJECT)
用于显示操作菜单。
对象的参数和含义如下：
参数类型是否需要的说明itemListArray是按钮itemColorHexColor的文本数组，字符串格式，默认为 #000000successFunction No接口调用成功回调函数。详见返回参数failFunction No接口调用失败的回调函数completeFunction No接口在接口调用结束后调用回调函数(成功和失败都会执行)。测试如下：
模板
视角
button type= default @ click= Show modal 显示模式弹出窗口/按钮
button type= default @ click= showActionSheet 显示操作菜单/按钮
/view/templatescript
var actions=[音乐，阅读]；
导出默认值{
data() {
返回{
}
},
onLoad() {
},
昂秀(){
console.log(索引onshow )
},
onHide() {
console . log( ide上的索引)
},
方法：{
showModal: function(){
uni.showModal({
标题：“你好…”,
内容：“模式窗口”，
成功：函数(res){
if(res.confirm){
console.log(确认)
}else if(res.cancel){
console.log(取消)
}
}
})
},
showActionSheet: function(){
uni.showActionSheet({
项目列表：操作，
成功：函数(res){
console.log(操作[res.tapIndex])
},
失败：函数(res){
控制台. log(res.errMsg)
}
})
}
}
}/scriptstyle/style显示：
如你所见，你可以操作模态弹出窗口和操作菜单。
总结
Uni-app的家族为开发者提供了丰富的功能，包括设备、接口等。我们只需要直接调用就可以实现所需的功能，减少了自己开发的麻烦，有利于快速开发。
以上更多精品文章敬请关注uni-app开发教程栏目！是uni-app入门教程界面扩展应用的详细内容。请多关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。