get request uni 参数_UniApp实战：动态数据（uni.request封装、uni.getLocation获取定位等）...

通过本章节你能学到那些？

1、Uni-App API调用(网络请求、获取位置等)

2、获取高德开放平台API - 天气查询

3、Uni-App 引用npm第三方库

4、Uni-App + Vuex 数据持久化

下面我们来具体看看

Uni-App API调用(网络请求、获取位置等)

一、uni.request封装成Promise

uni.request(OBJECT)

OBJECT对象描述：

1、根目录下新建 commons/http.js 文件

2、封装uni.request()

有人肯定会问，人家uni.request()已经挺好的了，为什么非的在封装一次了？

其实上图代码已经给你答案了：可以全局处理所有的请求。

比如：

1、所有请求都添加了 uni.showLoading(), 请求都会有loading，请求完成关闭。当然你可以通过options参数来控制某个请求不需要loadin；

2、可以给所有请求添加请求头，比如需要验证权限的接口；

3、错误集中处理，判断错误码，处理所有请求错误，如token过期，都会去登录页面等。

二、获取当前位置

获取当前的地理位置、速度。 在微信小程序中，当用户离开应用后，此接口无法调用；当用户点击“显示在聊天顶部”时，此接口可继续调用。

uni.getLocation(OBJECT)

OBJECT对象描述：

页面使用location渲染：

如果你用HBuilderX自动浏览器是可以获取到经纬度的，但是也是没有城市等数据的，只有APP才有。

小程序如果获取经纬度还需要添加配置，修改根目录下的manifest.json文件

注意

1、H5：在较新的手机浏览器上，H5 端获取定位信息，要求部署在 https 服务上，本地预览(localhost)仍然可以使用 http 协议。

2、H5：无 GPS 模块的 PC 设备使用 Chrome 浏览器的时候，位置信息是连接谷歌服务器获取的，国内用户可能获取位置信息失败。

3、H5：微信公众号可使用微信js sdk，详见

4、App：Android由于谷歌服务被墙，想在国产手机上正常定位，需要向高德等三方服务商申请SDK资质，获取AppKey。云打包时需要在manifest的SDK配置中填写Appkey。在manifest可视化界面有详细申请指南。离线打包自行在原生工程中配置。

5、App： 组件默认为国测局坐标gcj02，调用 uni.getLocation 返回结果传递给 组件时，需指定 type 为 gcj02。

6、App：持续定位方案：iOS端可以申请持续定位权限，参考。Android如果进程被杀，代码无法执行。可以使用unipush，通过服务器激活App，执行透传消息，让App启动然后采集位置。Android上，即使自己写原生插件做后台进程，也很容易被杀，unipush是更合适的方案

7、小程序：api默认不返回详细地址中文描述。需要中文地址有2种方式：1、使用高德地图小程序sdk，在app和微信上都可以获得中文地址，参考。2、只考虑app，使用plus.geolocation也可以获取中文地址

获取高德开放平台API - 天气查询

有小伙伴肯定会问，为什么选择高德天气查询API？我想说每个人都有自己的选择，根据自己的喜好，第一印象就可以了。没有那么多为什么！

如何才能使用高德天气查询API呢？

第一步，申请”web服务 API”密钥(Key)；

第二步，拼接HTTP请求URL，第一步申请的Key需作为必填参数一同发送；

第三步，接收HTTP请求返回的数据(JSON或XML格式)，解析数据。

假设我们已经获取到了Key，我们就可以使用我们封装好的http.js，来调用天气查询接口。

实况天气响应结果：

预报天气(最近7天天气预报)响应结果：

注意

小程序需要添加request合法域名，将高德api域名加入其中，小程序请求才能成功获取天气数据。

Uni-App 引用npm第三方库

Uni-App 的目录结构，不是src、dist并列方式。HBuilderX里的uni-app，根目录是相当于src，dist并放到了unpackage目录下。

src目录下是不能直接 npm install 引入第三方库的。但是你可以在别处install，然后把相关文件copy到src下。

本文以 moment 为例讲解 Uni-App 如何引用 npm 第三方库。步骤如下：

1、在一个空的文件夹下(当然分空也没有关系);

2、打开命令行工具，执行 npm install moment;

3、进入 node_modules 目录，里面的 moment 就是我们需要的第三方库；

4、copy moment 到我们 Uni-App 项目根目录；

5、引入模块(在需要使用moment的地方引入)

6、测试

Uni-App + Vuex 数据持久化

整合前3个知识点，我们将天气数据做持久化处理。

为什么要持久化了？

大家应该都知道，每个天气API提供商，提供的api调用接口都是有次数限制的，有的是每天1000，有的是每天5000等，超过都是会被停用。只有付费才没有限制，所以这里就做持久化处理。

逻辑如下：

1、判断本地有没有存储天气数据，没有直接调用接口，并将数据结构储存，而且添加过期时间；

2、有数据，判断数据是否过期，没有过期，直接使用，过期则重新调用接口，重置缓存数据。

Uni-App 是内置 Vuex 的，可以直接使用。

OK，按上面的逻辑思路，按步骤实现：

1、根目录新建store/index.js，main.js引入

2、编辑store/index.js

weatherData 方法的作用很重要，实现了主要逻辑。setWeather将天气输出储存并天气过期时间

3、vue页面使用天气数据和调用接口

最终页面渲染，使用timeWeather：

H5效果图：

微信小程序效果图：

IOS效果图：

总结

今天你学到了什么？用一句话回顾一下知识点：在Uni-App中，用Promise封装uni.request()请求高德天气api，用uni.getLocation()获取位置信息。

下一章节，继续融合获取位置，和天气查询，根据位置查询天气。并使H5端/小程序也可以获取到位置。

最后，提示大家一定要重视“注意”小提示，否则会遇到一些奇怪不能成功等问题。

最后的最后，谢谢大家支持。