在Vue中使用中国天气插件

最新推荐文章于 2025-02-05 14:36:04 发布
最新推荐文章于 2025-02-05 14:36:04 发布
阅读量399 收藏
点赞数 2
分类专栏： vue 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44483624/article/details/112986585
版权
VueJs+chrome-extension+element-ui天气预报的小插件
觉醒法师的专栏
07-17 7441
这里通过chrome-extension + VueJs + element-ui来实现个天气预报的小插件。风天气预报API，提供全球城市未来15天天气预报，包括日出日落、月升月落、最高最低温度、天气白天和夜间状况、风力、风速、风向、相对湿度、大气压强、降水量、降水概率、露点温度、紫外线强度、能见度等。全球城市未来15天天气预报，包括日出日落、月升月落、最高最低温度、天气白天和夜间状况、风力、风速、风向、相对湿度、大气压强、降水量、降水概率、露点温度、紫外线强度、能见度等。...
在Vue中应用中国天气网插件
xjh01的博客
02-29 1859
无意间访问到中国天气网，网站提供自定义的插件内容，获得代码如下： <!-- weather_plugin --> <script type="text/javascript"> WIDGET = {FID: 'xxxxxxxxxx'} </script> <script type="text/javascript" src="https://apip.w...
在VUE中使用中国天气网插件
yun的博客
09-15 2127
第一步 在中国天气网根据自己的需要修改配置并生成代码 中国天气网：创建网页标准天气插件 第二步 html <div id="weather-v2-plugin-standard"></div> js mounted() { //天气插件配置 window.WIDGET = { CONFIG: { layout: 2, width: "386", height: "356", backgrou
【web网页添加天气等插件】-vue3
ZHULYIXIA的博客
02-05 2613
前端页面展示天气、定位、风速等内容在views文件夹下添加weather文件夹，在weather文件夹下再新增weather.vue 代码： 二、步骤2 1.在home.vue中引入weather.vue 2.在home.vue的template里添加weather 此方法通过仅添加前端组件完成页面天气内容的展示
vue 中使用中国天气插件
u011195609的博客
04-10 4779
<template> <div > <div id="weather-view-he"></div> </div> </template> <script> export default { name: 'BIWeather.vue', created () { window....
vue中使用天气插件（和风天气）
热门推荐
qq_42453890的博客
03-03 3万+
1.进入中国天气网插件首页 中国天气网 选择适合项目的插件 2.自定义插件样式，登录后生成代码 <div id="weather-v2-plugin-simple"></div> <script> WIDGET = { CONFIG: { "modules": "02", "background": 5, "tmpColor": "4A4A4A", "tmpSize": 16, "cityColor": "4A4A4A",
vue中使用天气插件
qq_40390762的博客
06-16 5109
（不知为什莫中国天气网cha'jian） 壹： 插件网址：
vue-mini-weather:基于Vue开发的迷你实时天气预报组件
05-14
基于Vue框架开发的一款迷你天气预报展示的小组件，目前只支持中国大陆的天气预报，原因在更新公告中有，有问题请提 :package: 安装 2021.04.24 因为刚上传到npm仓库没多久，可能其他镜像库还没有镜像过去，所以要...
Vue实战，天气预报DEMO实例
01-12
Vue学习DEMO，参考其他人写的Vue的DEMO，但因为他的代码是vue-cli构建，不太懂用webpack所以直接照搬了全部的样式代码一级部分逻辑代码实现的纯静态页面，无需npm，都是很基础的vue应用
vue3日历组件库Vue-Cel使用
weixin_68658847的博客
10-15 602
vue3日历组件库Vue-Cel使用
网页中天气显示
weixin_44735933的博客
02-25 1975
我们常常会看到在网页中的导航栏处有一个天气的显示 这样的一个效果是通过一些第三方天气插件实现的 ,这里为大家讲解的是html实现和vue实现 这里的插件是从天气网插件找到的 天气插件网 HTML实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&
vue项目中可使用天气预报小组件推荐vue-mini-weather
deciduous_leaves的博客
05-16 1万+
该部分内容引自基于Vue开发的迷你实时天气预报组件 由于该组件在2021.4.24日刚上传到npm仓库，请用npm安装！ 1、安装 npm i vue-mini-weather --save 2、引入 // 1. 全局引入 //main.js 项目入口文件 import Vue from 'vue' import weather from 'vue-mini-weather' Vue.use(weather) //app.vue 项目文件 <template> ......
天气插件平台-天气预报插件-免费天气预报代码—中国天气网
Jadeon
11-22 2895
中国天气网天气插件平台提供各种免费的在线天气预报插件,天气h5页面,天气SDK等,方便开发者使用调用,可以根据ip地址自动获取本地天气实况,天气预报等信息,适配PC,安卓,iOS系统多种软件. 天气插件,HTML天气插件,JS天气插件,桌面天气插件,前台天气插件,天气SDK,天气H5,天气网插件,天气模块,免费天气预报. 卡片形式： <html lang="zh-CN"> ...
好用的天气组件：vue3-mini-weather
G55331337547的博客
12-15 5678
在逛gitghub时发现一个非常好用的天气组件，可以实时呈现天气状况，可以应用到vue3项目中(gitHub中也有vue2版本的)，只需几行代码就可实现。
vue引入中国天气网 使用天气组件
狗狗狗亮的博客
09-02 2155
点此进入 官方网站传送门 可以根据自己的选择配置，然而并没很多选择。 点击下方的生成代码之后， 将script的url在网页中打开，就能看到一个自调用的函数。cv到你的组件里 引入进来
【vue】天气插件
qq_40881695的博客
02-28 3034
vue 天气插件
Chrome插件：中国天气预报与万年历
章郎虫的专栏
08-27 449
查看原文：http://www.hellonet8.com/820.html 据国外媒体报道，谷歌Chrome浏览器的速度和稳定性使其成为很多用户的第一选择，全球市场份额已经超过Firefox，成为全球仅次于ie的第二大浏览器。目前，Chrome浏览器支持插件已经有一段时间了，数以百计的插件能够使得Chrome更快、更安全、更加高效。不过，并不是每一款Chrome插件都是...
weatherwidget在vue中的使用
最新发布
03-08
### 如何在 Vue.js 中集成和使用 Weather Widget #### 安装依赖包 为了能够顺利地在项目中引入并配置天气插件，通常需要确保开发环境已经安装了必要的依赖。如果采用的是类似于 uni-app 这样的跨平台框架，则应按照官方文档指引完成相应初始化工作[^3]。 #### 引入Weather Widget脚本 对于特定的中国天气插件，在HTML文件内指定位置加入如下代码片段来加载所需的JavaScript资源： ```html <div id="weather-float-he"></div> <script type="text/javascript"> WIDGET = { FID: 'KbzQ7JDMhF' }; </script> <script type="text/javascript" src="https://apip.weatherdt.com/float/static/js/r.js?v=1111"></script> ``` 此部分操作实现了对中国天气浮窗插件的基础引用与展示容器准备[^1]。 #### 组件化封装 考虑到复用性和维护便利性，可以创建一个新的Vue组件专门负责呈现天气信息。下面是一个简单的例子说明如何构建这样一个名为`WeatherWidget.vue` 的单文件组件: ```vue <template> <div ref="weatherContainer" style="width: 300px;height: auto;"></div> </template> <script setup lang="ts"> import { onMounted, ref } from 'vue'; const weatherContainer = ref(null); onMounted(() => { const scriptElement = document.createElement('script'); (window as any).WIDGET = { FID: 'KbzQ7JDMhF' }; // 设置插件唯一标识符 scriptElement.type = 'text/javascript'; scriptElement.src = 'https://apip.weatherdt.com/float/static/js/r.js?v=1111'; if(weatherContainer.value){ weatherContainer.value.appendChild(scriptElement); } }); </script> <style scoped> /* 自定义样式 */ .wat{ position: absolute; right: 240px; } .wat .sw-card-slim-container{ position: absolute; right: -190px; } </style> ``` 上述实现方式不仅遵循了现代前端工程实践中的模块划分原则，同时也通过组合模板、逻辑处理以及样式的手段完成了对原始JS API调用过程的有效抽象[^2]。 #### 注册全局或局部组件 最后一步就是决定是以何种形式注册这个新建立起来的小部件——既可以作为根实例下的全局可用选项之一；也可以仅限于某些页面内部按需导入。具体做法取决于实际应用场景和个人偏好。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值