VueJs+chrome-extension+element-ui天气预报的小插件

这里通过chrome-extension + VueJs + element-ui来实现个天气预报的小插件,如下图：

一、项目初始化、基础配置及相关插件安装

1.1 创建项目

        通过vue-cli脚手架3.0版本来创建项目，命令如下：

vue create demo-chrome-vue

默认选择是vue2.0语法

Successfully代表安装成功。

这里不是做web项目，所以删除vue-cli3脚手架的部分文件，删除文件如下：
src/main.js
src/components
src/App.vue

1.2 安装chrome-ext插件依赖

        项目创建成功后，通过指令：cd demo-chrome-vue进入项目，执行以下命令操作。

vue add chrome-ext

安装后，package.json的配置如下：

"devDependencies": {
	"@vue/cli-plugin-babel": "~5.0.0",
	"@vue/cli-plugin-eslint": "~5.0.0",
	"@vue/cli-service": "~5.0.0",
	"copy-webpack-plugin": "^4.6.0",
	"eslint": "^7.32.0",
	"eslint-plugin-vue": "^8.0.3",
	"vue-cli-plugin-chrome-ext": "0.0.5",
	"vue-template-compiler": "^2.6.14"
},

1.3 关闭eslint语法检测，方便开发

        找到vue.config.js文件，关闭lintOnSave即可。

module.exports = {
  pages: pagesObj,
  lintOnSave: false,	//关闭语法检测
  configureWebpack: {
    plugins: [CopyWebpackPlugin(plugins)]
  }
};

1.4 增加@type/chrome

        相关chrome api需要引入 “@type/chrome”增加chrome声明

        命令行如下：

npm install --save-d @types/chrome

1.5 图标修改

这里直接入在public目录了，public/icon.png。这样会直接生成到dist目录中。然后后manifest.production.json中配置即可，如下代码：

{
    "manifest_version": 2,
    "name": "Demo",
    "description": "通过chrome-extension + VueJs来实现天气预报的小插件",
    "version": "0.0.1",
    "browser_action": {
		"default_icon": "icon.png",	
        "default_popup": "popup.html"
    },
	"icons": {
		"16": "icon.png",
		"32": "icon.png",
		"48": "icon.png",
		"128": "icon.png"
	},
}

default_icon图标是显示在popup位置的图标，icons图表是显示在插件位置的.

1.6 element-ui安装

npm install --save element-ui

在popup目录中index.js中引入 ：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

二、axios请求

2.1 封装request.js

        在utils目录中，创建request.js请求，对axios进行封装，完善请求功能配置。代码如下：

import axios from 'axios'
import { Message, Loading } from 'element-ui'

axios.defaults.headers['Content-Type'] = "application/json;charset=utf-8";

const Service = axios.create({
  baseURL: "https://devapi.qweather.com",
  timeout: 30 * 1000
});

let loadingOption = {
  text: "加载中...",
  background: "rgba(0, 0, 0, 0)"
}, loading;

Service.interceptors.request.use(config => {
  loading = Loading.service(loadingOption);
  config.data = 'object'===typeof config.data?JSON.stringify(config.data):config.data;
  return config;
}, error => {
  loading.close();
  return Promise.reject(error);
})

Service.interceptors.response.use(response => {
  loading.close();
  if(response.status==200){
    return response['data'];
  }
  return Promise.reject(response);
}, error => {
  loading.close();
  return Promise.reject(error);
})

export default Service;

2.2 封装工具类

        在utils目录中，创建util.js文件，事前定义好日期格式化函数，代码如下：

const fillZero = _value => {
	return _value<10?'0'+_value:_value;
}

export const formatDate = (_date, _format) => {
	_format = 'undefined'===typeof _format||!_format?'YYYY-MM-DD':_format;
	let _newDate = new Date(_date),
			_values = {
				YYYY: _newDate.getFullYear(),
				MM: fillZero(_newDate.getMonth()+1),
				DD: fillZero(_newDate.getDate()),
				hh: fillZero(_newDate.getHours()),
				ii: fillZero(_newDate.getMinutes()),
				ss: fillZero(_newDate.getSeconds()),
				week: '星期'+'日一二三四五六'.charAt(_newDate.getDay())
			};
	for(var key in _values) _format = _format.replace(key, _values[key]);
	return _format;
}

三、免费天气接口平台

3.1 注册

地址：和风天气开发平台 ~ 高效强大的天气API，天气SDK和天气插件

        注册好地址后，并登录。另外调用接口时，请注意接口返回的状态码，如遇调用错误或返回对应错误码，也许是该接口需付费或已达上限。

3.2 创建应用

        登录后，选应用管理，点击“创建应用”，获取Key后，就可以通过key进行接口数据调用了。

3.3 天气图标

        在调用接口时，返回数据中的icon是以下图表对应的编码，通过拼接后则可以显示对应天气图标了。

        地址：天气图标 – RESOURCE | 和风天气开发平台

        可以通过git进行克隆本地，命令行：

git clone https://github.com/qwd/Icons.git

3.4 接口地址

实时天气
全国4000+个市县区和海外15万个城市实时天气数据，包括实时温度、体感温度、风力风向、相对湿度、大气压强、降水量、能见度、露点温度、云量等数据。
地址：实时天气 – API | 和风天气开发平台和风全球实时天气API，支持全国4000+个市县区和海外15万个城市实时天气数据，包括实时温度、体感温度、风力风向、相对湿度、大气压强、降水量、能见度、露点温度、云量等数据。https://dev.qweather.com/docs/api/weather/weather-now/

逐天天气预报
全球城市未来15天天气预报，包括：日出日落、月升月落、最高最低温度、天气白天和夜间状况、风力、风速、风向、相对湿度、大气压强、降水量、降水概率、露点温度、紫外线强度、能见度等。

这里免费可以使用3天数据请求接口，7天及以上需要付费调用。

地址：逐天天气预报 – API | 和风天气开发平台和风天气预报API，提供全球城市未来15天天气预报，包括：日出日落、月升月落、最高最低温度、天气白天和夜间状况、风力、风速、风向、相对湿度、大气压强、降水量、降水概率、露点温度、紫外线强度、能见度等。https://dev.qweather.com/docs/api/weather/weather-daily-forecast/

3.5 创建api接口

在api目录中，创建api.js文件，在前面已讲了创建应用，把应用的KEY放到以下接口请求中即可。代码如下：

import Service from './request'

let getKey = () => {
	return {
		key: '创建应用的KEY'
	}
}

/**
 * 获取当前天气信息
 */
export const getCurrentWeather = params => {
	Object.assign(params, getKey())
	return Service.get('/v7/weather/now', {
		params: params
	})
}

/**
 * 获取3天天气信息
 */
export const get3DayWeather = params => {
	Object.assign(params, getKey())
	return Service.get('/v7/weather/3d', {
		params: params
	})
}

四、popup.html开发

1.html代码

        这里简单实现了常规天气显示状态，如需更多更详细的，可在基础上完善；接口不支持，或需要付费，请付费后再实现功能。

<template>
  <div class="main_app">
		<template v-if="isNetwork">
			<div class="top-box">
				<div class="table">
					<div class="cell left">
						<span v-if="currentWeatherInfo.windDir">
{
  
  {currentWeatherInfo.windDir}} {
  
  {currentWeatherInfo.windScale}} 级
                        </span>
					</div>
					<div class="cell right">
						<el-select 
                            size="mini" 
                            v-model="cityValue" 
                            placeholder="请选择" 
                            @change="cityChange"
                            >
							<el-option
								v-for="item in citys"
								:key="item.value"
								:label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
				</div>
			</div>
			<div class="weather-box">
				<div class="table">
					<div class="cell icon">
						<i class="qi-100"></i>
					</div>
					<div class="cell wd">
						<h3>{
  
  {currentWeatherInfo.temp}}°</h3>
						<p>{
  
  {currentWeatherInfo.text}}</p>
					</div>
					<div class="cell right">
						<div class="you">相对湿度：{
  
  {currentWeatherInfo.humidity}}%</div>
					</div>
				</div>
			</div>
			<div class="bottom-box">
				<div class="table">
						<div class="cell" v-for="(item, index) in weather3DayList" :key="index">
							<p>{
  
  {item.fxDate}}</p>
							<p>{
  
  {item.tempMin}}° ~ {
  
  {item.tempMax}}°</p>
							<p>
								<i :class="'qi-'+item.iconDay"></i>
							</p>
							<p class="clr-01">
								<span>{
  
  {item.textDay}}</span>
							</p>
						</div>
				</div>
			</div>
		</template>
		<template v-else>
			<div class="flex-date-box">
				<h4>{
  
  {currentDate}}</h4>
				<p v-if="week">({
  
  {week}})</p>
				<br />
				<p>当前未联网状态</p>
			</div>
		</template>
  </div>
</template>

2.css样式

刚把git克隆下来的项目代码中，打开font目录，复制fonts目录放到popup目录在，然后把qweather-icons.css放App目录中，并且打开qweather-icons.css文件，将fonts资源引入路径修改为当前目录结构，代码如下：

@font-face {
  font-family: "qweather-icons";
  src: url("./../fonts/qweather-icons.woff2") format("woff2"),
	url("./../fonts/qweather-icons.woff") format("woff"),
	url("./../fonts/qweather-icons.ttf") format("truetype");
}

以上操作完成后，则可以在style中引入样式文件了，样式代码如下：

<style>
@import './qweather-icons.css';			//引入天气样式

*{ margin: 0; padding: 0; }

.main_app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
	width: 250px;
	height: 250px;
	padding: 10px;
	line-height: 1.5;
	background-size: cover;
	box-sizing: border-box;
	padding: 10px;
}

.flex-date-box{ 
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #333;
    flex-direction: column; 
}
.flex-date-box h4{ font-size: 18px; }

.table{ width: 100%;display: table; }
.table .row{ display: table-row; }
.table .cell{ display: table-cell; vertical-align: middle; font-size: 12px; color: #333; }
.table .cell.left{ text-align: left; }
.table .cell.right{ text-align: right; }

.weather-box .table .cell{ vertical-align: bottom;padding: 10px 0; }
.weather-box .table .cell.wd, .weather-box .table .cell.icon{ 
    width: 20px; white-space: nowrap; vertical-align: middle; 
}
.weather-box .table .cell.wd h3{ font-size: 30px;line-height: 1.3; }
.weather-box .table .cell.icon{ padding-left: 10px; padding-right: 10px; }
.weather-box .table .cell.icon i{ font-size: 42px; line-height: 1; }
.weather-box .table .cell.icon .wd h3{ font-size: 24px; }
.weather-box .table .cell.icon .wd p{ font-size: 16px; }
.weather-box .table .cell.right{ text-align: right; }
.weather-box .table .cell.right .you{ 
    display: inline-block; 
    line-height: 1; 
    color: #94ce6f; 
    border-left: 3px solid #94ce6f;
    padding-left: 8px; 
}

.weather-box .table.desc .cell{ padding: 5px 0; vertical-align: top; }

.bottom-box{ padding-top: 15px; margin-top: 10px; border-top: 1px solid rgba(204, 204, 204, 0.5); }
.bottom-box .table .cell{ vertical-align: middle; text-align: center;width: 33.33%; }
.bottom-box .table .cell i{ font-size: 20px; }
.bottom-box .table .cell .clr-01{ color: #94ce6f; }

.el-select{ width: 80px; }
.el-input__inner{ 
	background-color: transparent !important;
	border: 1px solid transparent !important;
	color: #333 !important;
}
.el-select .el-input .el-select__caret{ color: #333 !important; }
</style>

3.js部分

这里我们开始实现逻辑层功能，先引入天气接口调用函数及工具类，调用接口时判断当前接口是否畅通，如访问不了则当前网络不通，显示对应提示页面。
 

<script>
//引入接口函数
import { getCurrentWeather, get3DayWeather } from '../utils/api.js';
//引入工具类
import { formatDate } from '../utils/utils.js'
	
export default {
  name: 'app',
	data(){
		return {
			cityValue: "101010100",
			citys: [
				{ label: "北京", value: "101010100" },
				{ label: "上海", value: "101020100" },
			],
			isNetwork: false,
			currentDate: "",
			week: "",
			
			currentWeatherInfo: {},
			weather3DayList: [],
		}
	},
	created() {
		this.currentDate = formatDate(new Date(), "YYYY-MM-DD");
		this.week = formatDate(new Date(), "week");
		Promise.all([this.updateWeatcherInfo(), this.update3DayInfo()]).then(res => {
			this.isNetwork = true;
		}).catch(() => {
			this.isNetwork = false;
		})
	},
	beforeDestroy() {
		clearInterval(_handle)
	},
	methods: {
		/**
		 * 加载当前天气情况
		 */
		updateWeatcherInfo(){
			return getCurrentWeather({location: this.cityValue}).then(res => {
				if(res.code==200&&res['now']){
					this.currentWeatherInfo = res.now;
				}
			});
		},
		/**
		 * 加载3天内天气情况
		 */
		update3DayInfo(){
			return get3DayWeather({location: this.cityValue}).then(res=> {
				if(res.code==200&&Array.isArray(res['daily'])){
					this.weather3DayList = res.daily.map(item => {
						return {
							fxDate: item['fxDate'],
							tempMin: item['tempMin'],
							tempMax: item['tempMax'],
							iconDay: item['iconDay'],
							textDay: item['textDay'],
							iconNight: item['iconNight'],
							textNight: item['textNight']
						}
					});
				}
			});
		},
		/**
		 * 城市发生变化
		 */
		cityChange(e){
			this.updateWeatcherInfo();
			this.update3DayInfo();
		}
	}
}
</script>

写到这里，一个天气预报的chrome小插件就完成了。

今天的文章VueJs+chrome-extension+element-ui天气预报的小插件分享到此就结束了，感谢您的阅读。