I used Vue to make a weather wallpaper

I. Introduction

Hello everyone, I am Li Xiaobai, the author of the same name at station b and wallpaper engine . For more exciting content, please pay attention to bilibili. Li Bai, who knows kung fu , brings you a weather wallpaper on wallpaper engine in this issue . It was developed using Vue. Then package it and send it to wallpaper engine. The project has been sent to github jl15988 . Please refer to github perfect-weather . Welcome to Star.

Currently the project has been synchronized to Gitee: gitee perfect-weather

2. Effect drawing

3. Function

• Support custom background
• Supports weather animations (currently only sunshine, cloudy and starry sky), and changes with weather changes
• You can check the weather conditions the day before yesterday, today and the next 14 days
• Weather includes weather conditions, temperature, wind direction, wind level, and a temperature change line chart
• You can view the time, date, day of the week, time period, earthly branch timing method

Stay tuned for more features…

4. Project start

First, you should install the dependencies through the following command

npm install

Then run it with the following command

npm run serve

Similarly, you can also use the following command to package it so that it can be sent to the server

npm run build

5. Use

This project is for personal learning only. Please do not use the API for commercial purposes or other profit-making channels.

1. Local environment

The test data is used locally. If you want to switch the api data, please go src/api/api.jsto and useTestDatachange it to false (it will not affect the production environment).

2. Production environment

The production environment automatically changes to api data, no need to switch.

6. Components

1. WeatherType

This component is a dynamic weather background that identifies the attributes of API data weather_icon_id. Now only three environments have been added, cloudy, sunny and starry. Other effects will be added later.

2. MTime

time component.

3. MWeather

Displayed weather information component.

4. MWeatherLines

Weather line chart component.

7. wallpaper engine

Now the latest wallpapers have been published to wallpaper engine. Search for Perfect Weather to subscribe, or search for Kung Fu Li Bai to view all wallpapers of this author. Welcome to follow and subscribe. Wallpaper updates and press conferences are on bilibili. Li Bai, who knows kung fu, releases videos. Welcome to follow and discover more. Nice and fun wallpaper!