在前面学习了uni-app的布局、组件、路由等知识点以后，还要掌握uni-app的JS API ,也可以理解为基于uni-app的java script。本节介绍uni-app的request请求、文件上传、数据缓存、获取位置、获取系统信息、获取手机的网络状态、拨打电话API。
一、request请求
使用uni.request 向服务器端发送请求。下面是调用示例：
uni.request({
url: 'https://xxx.com/api/v1/business/info?stId=123',//get参数可以写到地址栏里
method:"GET",
success: (res) => {
console.log(res);
this.logo=res.data.data.logo;
}})
对于method为POST模式的，传参可在method下面加data:{},另外使用POST提交需要在header中指定content-type:
uni.request({
url:"https://www.abc.com/api/v1/goods/info",
method:"POST",
data:{
"store_id":"1234"
},
header:{
"Content-Type":"application/x-www-form-urlencoded"
},
success:(res)=>{
console.log(res);
this.classifys=res.data.data;
}
})
【promise方式请求数据】
uni-app内部对request进行了promise封装，返回的第一个参数是错误对象，第二个参数是返回数据，示例如下:
uri.request({...}).then((data)=>{ //data为一个数组，第一项为错误信息，第二项为返回数据
let [err,res]=data;//使用解构的方式获取数组的值
if(res.data.code==200){
this.notice = res.data.data.notice;//获取返回值示例
}
}
二、uploadFile文件上传
uploadFile可以将本地资源上传到服务器，客户端发起一个POST请求，其中content-type为multipart/form-data，详细用法参考uni-app官网：
https://uniapp.dcloud.net.cn/api/request/network-file.html
多文件上传：在实际开发中有很多场景需要批量上传文件，微信小程序只支持单文件上传，多文件上传需要循环调用uni.uploadFile()，就是在tempFilePaths获取到文件之后，判断：
if(tempFilePaths.length>0){
for(let i=0;i<tempFilePaths.length;i++){
uni.uploadFile({
url:'http://...',
filePath:tempFilePaths[i],
......
})
}
}
三、数据缓存
数据缓存可以将数据存储在本地缓存中，实现长期保存数据的功能，包括异步缓存和同步缓存，异步设置缓存为uni.setStorage,获取为uni.getStorage，删除为removeStorage,清除所有为clearStorage，同步设置缓存为setStorageSync,获取为getStorageSync，删除为removeStorageSync，清除所有为clerStorgeSync。
setStorage设置缓存：
uni.setStorage({
key:'name',data:'张三',success:()=>{ console.log('success');}
})
//获取缓存的值
uni.getStorage({
key:"name",success:(res)=>{console.log(res.data); }//结果为张三
})
//删除缓存值
uni.removeStorage({
key:'name',success:function(res){console.log('success');}
})
//清除所有:
uni.clearStorage();
//同步的方式比较简单：
uni.setSorageSync('name','张三');
let name = uni.getStorageSync('name');
uni.removeStorageSync('name');
四、获取位置
获取当前位置可实现查找附近的人、店铺、地图定位、详细地址、所在城市等信息。官方介绍见：
uni.getLocation({
type: 'wgs84',
success: function (res) {
console.log('当前位置的经度：' + res.longitude);
console.log('当前位置的纬度：' + res.latitude);
}
});
【配合map组件将我的位置显示在地图上】：
获取到我的位置后，然后可以把这个坐标设置到地图插件上，不过获取位置需要小程序开放隐私权限。下面是示例代码：
<template>
<view>
<map class="map" :latitude="latitude" :longitude="longitude" :markers="markers"></map>
</view>
</template>
<script>
export default {
name: "location",
data(){
return {
latitude:"", //纬度
longitude:"", //经度
markers:[
{
latitude:"",
longitude:"",
iconPath:"../../static/images/map/my.png",
width:30,
height:30
}
]
}
},
onLoad(){
uni.getLocation({
type: 'gcj02',
success: (res)=> {
console.log('当前位置的经度：' + res.longitude);
console.log('当前位置的纬度：' + res.latitude);
this.latitude=res.latitude;
this.longitude=res.longitude;
this.markers[0].latitude=this.latitude;
this.markers[0].longitude=this.longitude;
}
});
}
}
</script>
<style scoped>
.map{width:100%;height:500rpx;}
</style>
五、获取系统信息
使用uni.getSystemInfo()和uni.getSystemInfoSync()可获取手机品牌、型号、屏幕宽度、高度、操作系统版本等信息，具体可参考uni-app官方文档：
六、获取网络状态
使用uni.getNetworkType可以获取网络状态。如果用户使用的非Wi-Fi网络，可提示 用户注意手机流量。网络状态划分为：wifi、2g 、3g、4g 、ethernet、unknown、none，调用方式：
uni.getNetworkType({
success: (res)=>{
this.networkType = res.networkType;
}
})
另外还可以在onReady()事件中，使用uni.onNetworkStatusChange监听网络状态变化，代码如下：
onReady(){
uni.onNetworkStatusChange(function(res){
console.log(res.insConnected);//是否有网络
console.log(res.networkType);//当前的网络类型
});
}
七、拨打电话
拨打电话兼容所有平台，使用uni.makePhoneCall，示例：
uni.makePhoneCall({
phoneNumber:'12345'
})