Day7-微信小程序实战-天气预报小程序

https://www.bilibili.com/video/BV1cJ411879s

但是因为这个调用的接口要money,太贵了就没买,就只是做了一些不用接口的东西

最终的效果图:

Day7-微信小程序实战-天气预报小程序

 

 

一、

①调用的接口视频中主要是用到了咕咕数据中的【地理坐标逆编码】接口,https://www.gugudata.com/api/details/geodecode

Day7-微信小程序实战-天气预报小程序

 

Day7-微信小程序实战-天气预报小程序

 

 

 这个接口是可以获取到,用户的位置,

 ②得到了地理信息位置之后,需要知道这个地理位置的天气预报信息,通过调用下面的接口

https://www.gugudata.com/api/details/weatherinfo

Day7-微信小程序实战-天气预报小程序

 

 

 这个获取到的东西,很全面,包括了在紫外线强度,和提醒你今天要穿什么衣服,带伞啊这种贴心的话,很强大的接口

 

③视频中用的都是付费的接口,我也找到了一些免费的接口,参考博文https://www.cnblogs.com/demodashi/p/8481610.html

通过注册“和风天气预报的免费版接口,还有百度地图开放平台的天气预报接口,两个都是免费的,当然功能也配额肯定也是和付费的有一定区别

 

二、具体实现流程:

 ①拿到设计图(UI设计图)---可以在https://dribbble.com/search/weather%20forecast 中查看相关设计师大佬的作品,找找灵感

 ②在微信开发者工具里面创立项目,然后把默认的文件进行清理,只留在我们需要的东西

Day7-微信小程序实战-天气预报小程序

把目标变成大概这个样子,只留下首页和page的相关样式,其他都可以删掉的

 

 

③修改小程序的题目:在app.json文件中找到"navigationBarTitleText"这个属性进行修改。

④获取用户的经纬度(之后把这个经纬度数据用于发送给接口,得到相应的东西)

这种微信本身提供给我们的接口的话,可以直接在微信开发者文档里面查看的

 

Day7-微信小程序实战-天气预报小程序

 

 

Day7-微信小程序实战-天气预报小程序

 

找到wx.getLocation(Object object) ===获取当前的地理位置、速度。当用户离开小程序后,此接口无法调用

可以直接复制微信提供的示例代码:

wx.getLocation({ type: 'wgs84', success (res) { const latitude = res.latitude const longitude = res.longitude const speed = res.speed const accuracy = res.accuracy } })

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyyxfz.html