个性定制网站贴心的广州网站建设

      在前面学习了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官网：

uni.uploadFile(OBJECT) | uni-app官网uni-app,uniCloud,serverless,uni.uploadFile(OBJECT),参数 HarmonyOS Next 兼容性,UploadFileSuccess 的属性值,UploadFileFail 的属性值,返回值 HarmonyOS Next 兼容性,UploadTask 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(OBJECT) | uni-app官网uni-app,uniCloud,serverless,uni.getLocation(OBJECT),uni.chooseLocation(OBJECT),三方定位和地图服务收费说明,unicloud-city-select 城市选择组件,【福利】高德拉新活动https://uniapp.dcloud.net.cn/api/location/location.html示例：

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官方文档：

nulluni-app,uniCloud,serverless,系统信息的概念,uni.getSystemInfo(OBJECT),success 返回参数说明,参数 HarmonyOS Next 兼容性,GetSystemInfoResult 的属性值,某些小程序特殊的返回参数,不推荐使用的返回参数，仅为https://uniapp.dcloud.net.cn/api/system/info.html

六、获取网络状态

        使用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'

      })