欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 文化 > uni-app快速入门(十一)--常用JS API(上)

uni-app快速入门(十一)--常用JS API(上)

2025/3/19 20:57:17 来源:https://blog.csdn.net/baozhengw/article/details/143857941  浏览:    关键词:uni-app快速入门(十一)--常用JS API(上)

      在前面学习了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 icon-default.png?t=O83Ahttps://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 城市选择组件,【福利】高德拉新活动icon-default.png?t=O83Ahttps://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 的属性值,某些小程序特殊的返回参数,不推荐使用的返回参数,仅为icon-default.png?t=O83Ahttps://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'

      })

 

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词