网站更新方案,信息流优化师简历怎么写,通讯设备东莞网站建设,如何制作营销网站在前面学习了uni-app的布局、组件、路由等知识点以后#xff0c;还要掌握uni-app的JS API ,也可以理解为基于uni-app的java script。本节介绍uni-app的request请求、文件上传、数据缓存、获取位置、获取系统信息、获取手机的网络状态、拨打电话API。
一、request请求 使用uni… 在前面学习了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?stId123,//get参数可以写到地址栏里 method:GET, success: (res) { console.log(res); this.logores.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.classifysres.data.data; } })
【promise方式请求数据】 uni-app内部对request进行了promise封装返回的第一个参数是错误对象第二个参数是返回数据示例如下:
uri.request({...}).then((data){ //data为一个数组第一项为错误信息第二项为返回数据 let [err,res]data;//使用解构的方式获取数组的值 if(res.data.code200){ 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.length0){ for(let i0;itempFilePaths.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 classmap :latitudelatitude :longitudelongitude :markersmarkers/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.latituderes.latitude; this.longituderes.longitude; this.markers[0].latitudethis.latitude; this.markers[0].longitudethis.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 })
