记录--东拼西凑造轮子--vue天气组件

最新推荐文章于 2024-06-21 16:54:51 发布

困困自习室

最新推荐文章于 2024-06-21 16:54:51 发布

阅读量4k

点赞数 4

分类专栏： #vue天气组件 vue 文章标签： vue 天气预报组件

本文链接：https://blog.csdn.net/yynikki/article/details/103205473

版权

vue 同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

#vue天气组件

1 篇文章 0 订阅

订阅专栏

需求加效果图先贴上

在这里插入图片描述
做自己的产品，要求不算太高，起初需求是有一个天气预报小窗口就行了，我就在https://cj.weather.com.cn/plugin/pc/view(中国天气网)，配了个颜值不错的天气小窗口

在index.html里引入

  <script>
    WIDGET = {ID: '你的WIDGET'};
  </script>
  <script type="text/javascript" src="https://apip.weatherdt.com/view/static/js/r.js?v=1111"></script>

在xxx.vue贴起来

<div id="weather-view-he"></div>

ok,毫无*用，F12找出源码贴上去，简单粗暴
在这里插入图片描述
然鹅，这都是假数据，老板虽然没要求动态渲染，但挂了一个月看着太难受了，强迫症决定整改它，百度找出了一个免费可用的天气api接口：https://www.tianqiapi.com/?action=v1没有特别需求的话，这个接口满足日常使用还是绰绰有余的。
在这里插入图片描述
为了方便(其实是没有UI，说出来太寒碜了)，我直接下载的这个网站的天气图片素材；
接口必填字段appid 账户ID 和 appsecret 账户密钥登录注册即可获取，show me the code :

html

<!--天气-->
 <div class="weatherBox">
     <div class="son" data-v-d868839a="" id="weather-view-he"
          style="display:inline-block; background-image: url(https://apip.weatherdt.com/view/static/images/bg_00d.png); background-repeat: no-repeat; background-position: left top; background-size: 100% 100%;">
         <div data-v-061dd3ab="" data-v-d868839a="" class="wv-v-h-row">
             <div data-v-061dd3ab="" class="wv-v-h-location">
                 <div data-v-4528b1d2="" data-v-061dd3ab="" class="wv-lt-row">
                     <div data-v-4528b1d2="" class="wv-lt-col-7">
                         <div data-v-4528b1d2="" class="wv-lt-location">
                             <img data-v-4528b1d2=""
                                  src="https://apip.weatherdt.com/view/static/images/location_white.png">
                             <span data-v-4528b1d2="">{{weatherBody.city}}</span></div>
                     </div>
                     <div data-v-4528b1d2="" class="wv-lt-col-5">
                         <div data-v-4528b1d2="" class="wv-lt-refresh">
                             <span data-v-4528b1d2="">{{weatherBody.update_time}}更新</span>
                         </div>
                     </div>
                     <div data-v-4528b1d2="" class="wv-lt-col-12"></div>
                 </div>
             </div>
<!--当前天气-->
             <div data-v-061dd3ab="" class="wv-v-h-col-left" style="width: 57.561%;">
                 <div data-v-061dd3ab="" class="wv-v-h-now">
                     <div data-v-91ef9470="" data-v-061dd3ab="" class="wv-n-h-now" aqiopen="true" width="410"
                          height="200">
                         <div data-v-91ef9470="" class="wv-n-h-col-10 wv-n-h-text-left">
                             <div data-v-91ef9470="" class="wv-n-h-now-img">
                                 <img v-if="weatherBody.data[0].wea_img=='yun'" data-v-91ef9470="" style="display:inline-block;width: 42px;height: 42px;" src="../../assets/weather/yun.png" alt="">
                                 <img v-else-if="weatherBody.data[0].wea_img=='yu'" data-v-91ef9470="" style="display:inline-block;width: 42px;height: 42px;" src="../../assets/weather/yu.png" alt="">
                                 <img v-else-if="weatherBody.data[0].wea_img=='bingbao'" data-v-91ef9470="" style="display:inline-block;width: 42px;height: 42px;" src="../../assets/weather/bingbao.png" alt="">
                                 <img v-else-if="weatherBody.data[0].wea_img=='lei'" data-v-91ef9470="" style="display:inline-block;width: 42px;height: 42px;" src="../../assets/weather/lei.png" alt="">
                                 <img v-else-if="weatherBody.data[0].wea_img=='longjuanfeng'" data-v-91ef9470="" style="display:inline-block;width: 42px;height: 42px;" src="../../assets/weather/longjuanfeng.png" alt="">
                                 <img v-else-if="weatherBody.data[0].wea_img=='qing'" data-v-91ef9470="" style="display:inline-block;width: 42px;height: 42px;" src="../../assets/weather/qing.png" alt="">
                                 <img v-else-if="weatherBody.data[0].wea_img=='shachen'" data-v-91ef9470="" style="display:inline-block;width: 42px;height: 42px;" src="../../assets/weather/shachen.png" alt="">
                                 <img v-else-if="weatherBody.data[0].wea_img=='wu'" data-v-91ef9470="" style="display:inline-block;width: 42px;height: 42px;" src="../../assets/weather/wu.png" alt="">
                                 <img v-else-if="weatherBody.data[0].wea_img=='xue'" data-v-91ef9470="" style="display:inline-block;width: 42px;height: 42px;" src="../../assets/weather/xue.png" alt="">
                                 <img v-else-if="weatherBody.data[0].wea_img=='yin'" data-v-91ef9470="" style="display:inline-block;width: 42px;height: 42px;" src="../../assets/weather/yin.png" alt="">
                                 <img v-else-if="weatherBody.data[0].wea_img=='yujiaxue'" data-v-91ef9470="" style="display:inline-block;width: 42px;height: 42px;" src="../../assets/weather/yujiaxue.png" alt="">
                                 <img v-else data-v-91ef9470=""
                                      src="https://apip.weatherdt.com/view/static/images/cond/cond-a-01d.png">
                             </div>
                             <div data-v-91ef9470="" class="wv-n-h-now-content">
                                 <div data-v-91ef9470="" class="wv-n-h-now-txt">
                                     <span data-v-91ef9470="">{{weatherBody.data[0].wea}}</span>
                                 </div>
                                 <div data-v-91ef9470="" class="wv-n-h-now-tmp">
                                     <span data-v-91ef9470="">{{weatherBody.data[0].tem}}</span>
                                 </div>
                             </div>
                         </div>
                         <div data-v-91ef9470="" class="wv-n-h-col-2">
                             <div data-v-91ef9470="" class="wv-n-h-now-rain">
                                 <a data-v-91ef9470=""
                                    target="_blank"
                                    href="http://wx.weather.com.cn/jsyb/#cj">
                                     <img data-v-91ef9470=""
                                          src="https://apip.weatherdt.com/view/static/images/water-white.png"></a>
                             </div>
                         </div>
<!--空气质量-->
                         <div data-v-91ef9470="" class="wv-n-h-col-12">
                             <div data-v-91ef9470="" class="wv-n-h-col-6 wv-n-h-now-aqi">
                                 <div data-v-91ef9470=""
                                      class="wv-n-h-now-aqi-item wv-n-h-now-aqi-item-color-2">
                                     <div data-v-91ef9470="" class="wv-n-h-label"></div>
                                     <span data-v-91ef9470="">{{weatherBody.data[0].air_level}}</span>
                                 </div>
                             </div>
                             <div data-v-91ef9470="" class="wv-n-h-col-6">
                                 <div data-v-91ef9470="" class="wv-n-h-now-alarm"><!----></div>
                             </div>
                         </div>
<!--风向湿度压强-->
                         <div data-v-91ef9470="" class="wv-n-h-col-12">
                             <div data-v-91ef9470="" class="wv-n-h-now-base">
                                 <div data-v-fa858d46="" data-v-91ef9470="" class="wv-nb-now-base">
                                     <div data-v-fa858d46="" class="wv-nb-row">
                                         <div data-v-fa858d46="" class="wv-nb-col-3 wv-nb-now-base-item">
                                             <div data-v-fa858d46="">{{weatherBody.data[0].win[0]}}</div>
                                         </div>
                                         <div data-v-fa858d46="" class="wv-nb-now-base-item wv-nb-col-3">
                                             <div data-v-fa858d46="">{{weatherBody.data[0].win_speed}}</div>
                                         </div>
                                         <div data-v-fa858d46="" class="wv-nb-now-base-item wv-nb-col-3">
                                             <div data-v-fa858d46="">空气指数</div>
                                         </div>
                                         <div data-v-fa858d46="" class="wv-nb-col-3 wv-nb-now-base-item">
                                             <div data-v-fa858d46="">{{weatherBody.data[0].air}}</div>
                                         </div>
                                     </div>
                                     <div data-v-fa858d46="" class="wv-nb-row">
                                         <div data-v-fa858d46="" class="wv-nb-col-3 wv-nb-now-base-item">
                                             <div data-v-fa858d46="">相对湿度</div>
                                         </div>
                                         <div data-v-fa858d46="" class="wv-nb-now-base-item wv-nb-col-3">
                                             <div data-v-fa858d46="">{{weatherBody.data[0].humidity}}%</div>
                                         </div>
                                         <div data-v-fa858d46="" class="wv-nb-now-base-item wv-nb-col-3">
                                             <div data-v-fa858d46="">大气压强</div>
                                         </div>
                                         <div data-v-fa858d46="" class="wv-nb-col-3 wv-nb-now-base-item">
                                             <div data-v-fa858d46="">996hpa</div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
             <div data-v-061dd3ab="" class="wv-v-h-col-middle"></div>
<!--今明后天气预报-->
             <div data-v-061dd3ab="" class="wv-v-h-col-right">
                 <div data-v-061dd3ab="" class="wv-v-h-forecast">
                     <div data-v-65b892f5="" data-v-061dd3ab="" class="wv-f-h-forecast">
                         <div data-v-65b892f5="" class="wv-f-h-row" v-for="(item,index) in forecastList" :key="index">
                             <div data-v-65b892f5="" class="wv-f-h-col-12 wv-f-h-forecast-item">
                                 <div data-v-65b892f5="" class="wv-f-h-col-4 wv-f-h-forecast-date"
                                      style="width: 42%;">
                                     <a data-v-65b892f5="" target="_blank"
                                        href="http://m.weather.com.cn/mweather15d/index.shtml?101190101#cj"
                                        class="wv-f-h-a">{{item.day}}
                                     </a>
                                     <span data-v-65b892f5="" class="wv-f-h-forecast-aqi-1">{{item.wea}}</span>
                                 </div>
                                 <div data-v-65b892f5="" class="wv-f-h-col-4 wv-f-h-forecast-img"
                                      style="width: 20%;">
                                     <a data-v-65b892f5="" target="_blank"
                                        href="http://m.weather.com.cn/mweather15d/index.shtml?101190101#cj"
                                        class="wv-f-h-a">
                                         <img v-if="item.wea_img=='yun'" data-v-65b892f5="" style="display:inline-block;width: 21px;height: 2 1px;" src="../../assets/weather/yun.png" alt="">
                                         <img v-else-if="item.wea_img=='yu'" data-v-65b892f5="" style="display:inline-block;width: 21px;height: 21px;" src="../../assets/weather/yu.png" alt="">
                                         <img v-else-if="item.wea_img=='bingbao'" data-v-65b892f5="" style="display:inline-block;width: 21px;height: 21px;" src="../../assets/weather/bingbao.png" alt="">
                                         <img v-else-if="item.wea_img=='lei'" data-v-65b892f5="" style="display:inline-block;width: 21px;height: 21px;" src="../../assets/weather/lei.png" alt="">
                                         <img v-else-if="item.wea_img=='longjuanfeng'" data-v-65b892f5="" style="display:inline-block;width: 21px;height: 21px;" src="../../assets/weather/longjuanfeng.png" alt="">
                                         <img v-else-if="item.wea_img=='qing'" data-v-65b892f5="" style="display:inline-block;width: 21px;height: 21px;" src="../../assets/weather/qing.png" alt="">
                                         <img v-else-if="item.wea_img=='shachen'" data-v-65b892f5="" style="display:inline-block;width: 21px;height: 21px;" src="../../assets/weather/shachen.png" alt="">
                                         <img v-else-if="item.wea_img=='wu'" data-v-65b892f5="" style="display:inline-block;width: 21px;height: 21px;" src="../../assets/weather/wu.png" alt="">
                                         <img v-else-if="item.wea_img=='xue'" data-v-65b892f5="" style="display:inline-block;width: 21px;height: 21px;" src="../../assets/weather/xue.png" alt="">
                                         <img v-else-if="item.wea_img=='yin'" data-v-65b892f5="" style="display:inline-block;width: 21px;height: 21px;" src="../../assets/weather/yin.png" alt="">
                                         <img v-else-if="item.wea_img=='yujiaxue'" data-v-65b892f5="" style="display:inline-block;width: 21px;height: 21px;" src="../../assets/weather/yujiaxue.png" alt="">
                                         <img v-else data-v-65b892f5=""
                                              src="https://apip.weatherdt.com/view/static/images/cond/cond-a-02d.png">
                                     </a>
                                 </div>
                                 <div data-v-65b892f5="" class="wv-f-h-col-4 wv-f-h-forecast-tmp">
                                     <a data-v-65b892f5=""
                                        target="_blank"
                                        href="http://m.weather.com.cn/mweather15d/index.shtml?101190101#cj"
                                        class="wv-f-h-a">
                                         {{item.tem2}}/{{item.tem1}}
                                     </a></div>
                             </div>
                         </div>
                     </div>
                     <div data-v-061dd3ab="" class="wv-v-h-forecast-line"></div>
                 </div>
<!--穿衣指数-->
                 <div data-v-061dd3ab="" class="wv-v-h-lifestyle" style="margin: 0.4em 0.2em">
                     <div data-v-30718bbb="" data-v-061dd3ab="" class="wv-l-lifestyle">
                         <div data-v-30718bbb="" class="wv-l-row">
                             <p style="margin: 0 0 0.2em 0 ;width: 100%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
                                 {{weatherBody.data[0].index[0].title}}：{{weatherBody.data[0].index[0].level}}</p>
                             <p style="margin: 0 0 0.2em 0 ;width: 100%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
                                 {{weatherBody.data[0].index[3].title}}：{{weatherBody.data[0].index[3].level}}</p>
                             <p style="margin: 0 0 0.2em 0 ;width: 100%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
                                 {{weatherBody.data[0].index[5].title}}：{{weatherBody.data[0].index[5].level}}</p>
                             
                         </div>
                     </div>
                 </div>
             </div>
             <div data-v-061dd3ab="" class="wv-v-h-copyright">
                 <div data-v-7207213c="" data-v-061dd3ab="" class="wv-cr-h-copyright">
                     <a data-v-7207213c=""
                        target="_blank"
                        href="http://www.weather.com.cn">
                         数据来源于天气网
                     </a>
                 </div>
             </div>
         </div>
     </div>
 </div>

js

我自己这里用axios会出现跨域问题，最终我使用了http请求，虽然axios和http本质上是一样的；不知道能不能解决别的小朋友的跨域。

	export default {
		data() {
			return {
			 	weatherBody:{},
				forecastList:[],
			}
		},
		methods: {
			//weather
            getWeather(){
				let arr = []
				let api = "https://www.tianqiapi.com/api/?version=v1&appid=[45526272]&appsecret=[51ieVhT4";
				this.$http.get(api).then(function (response) {
                    for(let i=0;i<3;i++){
						let index = response.body.data[i].day.indexOf('（')
						response.body.data[i].day = response.body.data[i].day.substr(index+1,2)
                        console.log(index,response.body.data[i].day)
                        arr.push(response.body.data[i])
                    }
					console.log( response);
                    this.weatherBody = response.body;
                    this.forecastList = arr
					console.log( 456,arr );
				},function (err) {
					console.log(err);
				});
            }
        },
       	mounted() {
			this.getWeather()
		}
	}

完成啦！其实关键还是api接口,拿到接口数据，样式就随便玩耍咯。

困困自习室

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
11
评论
记录--东拼西凑造轮子--vue天气组件

百度找出了一个免费可用的天气api接口：[https://www.tianqiapi.com/?action=v1](https://www.tianqiapi.com/?action=v1)没有特别需求的话，这个接口满足日常使用还是绰绰有余的；接口必填字段appid 账户ID 和 appsecret 账户密钥登录注册即可获取。
复制链接

扫一扫

专栏目录