vue期末作业天气预报(可发布小程序)

(25条消息) 【免费】vue期末作业天气预报(可发布小程序)资源-CSDN文库代码

(25条消息) 【免费】vue期末作业天气预报(可发布小程序)资源-CSDN文库

一.效果演示

二.代码讲解

(1)样式代码

是从uniapp插件市场复制过来的

(2)js代码

1.网络请求api

函数绑定到搜索的span标签上，

每次点击搜索，就会通过wx.request网络请求对应的api

通过v-model，将输入框对应的城市绑定到city变量上

根据这个开发文档的请求示例，只需要在后面加上对应的城市名字就能，收到返回的数值

2.处理返回数据

通过wx.request将刷出来之后

七天的天气数据存入weaherList数组中

城市数据存入weaherCity数组中

最后在样式中，通过v-for将数据遍历出来

3.根据天气切换图片

[1]旧方法

通过if一个个条件判断

天气情况汇总表 (yikeapi.com)

查汇总表，累死

[2]新方法

通过动态样式绑定

通过function compareStrings在返回的天气字符串中遍历，只要出现'雨'的字符，就刷出带雨的背景图，反之就是天晴

三.出现的问题

1.网络请求经历了3个版本

(1)axios库在vue版本中正常运行,能够刷出程序

(2)转uniapp出现问题用不了，按照csdn和uniapp插件市场中的方法封装axios，成功使用

(3)uniapp转微信小程序出现问题，没有找到相关的经验分享，然后经过高手的指导指导微信有自己的网络请求库wx.request

2.免费的天气api

（1）高德天气

（2）和风天气

（3）现在用的天气api

免费七日天气接口API 未来一周天气预报api (tianqiapi.com)

支持直接城市名称搜索

3.背景图片

本地的背景图片在微信小程序中刷不出来

(1)可以直接使用网络图片

(2)把想要用的图片通过在线工具转为base64