vue中引入中国天气插件

已于 2024-03-18 14:31:19 修改
阅读量3.3k 收藏 7
点赞数 2
分类专栏： vue 文章标签： vue
于 2020-04-24 16:35:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ninewu/article/details/105734224
版权

中国天气插件地址

https://cj.weather.com.cn/plugin/pc
在这里插入图片描述
制定你想要的样式和位置
在这里插入图片描述
制定你想要显示的内容
在这里插入图片描述
然后输入设置名称点击生成代码,就会出现下面的内容

在vue中使用
复制第二个script标签中的地址并打开把内容写到你的项目中
在这里插入图片描述
在这里插入图片描述

然后在右上角就显示出来了啦啦啦啦,因为上面设置显示是右上角当然你也可以自定义位置.

奥利奥的路飞
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
10-31 3125
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。 > 本专栏源码是由OpenLayers结合Vue框架编写。 > 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。
适合GIS专业学生和前端webgis小白快速上手的Vue+OpenLayers6入门到实战教程，OpenLayers6中文文档手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-23 1277
Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍OpenLayers介绍，相比较其他地图引擎有什么优点OpenLayers7.x版本和6.x版本有什么区别，是否需要升级到OpenLayers7版本？OpenLayers6实战：OpenLayers创建自定义控件，以创建一个地图复位控件为例OpenLayers6实战，OpenLayers创建自定义鹰眼控件，自定义鹰眼控件样式，调整鹰眼控件位置、大小、文字和按钮等样式。
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> ......
China Weather | 中国天气预报-crx插件
04-05
语言:中文 (简体) China weather forecast. 中国天气预报 PM2.5和AQI空气质量指数。 数据来源 中国天气网中国天气预报 数据来源 中国天气网24小时分时预报 7天15天40天趋势预报天气数据包含 温度 湿度 风向 气压 降水量 空气质量(PM2.5 | AQI) 生活指数 日出日落时间等数据详尽 包含全国所有地区（含台湾香港澳门） 可详查至县和区 例如 四川仪陇县、深圳南山没有后台进程 点击才运行 窗口关闭自动释放资源===20200506更新===现在回复不了评论。在这里回一下。定位城市变北京是因为API受限，所有请求均返回北京天气数据。因为用的免费接口，暂时无解，不过最近我自己没有遇到了。后边想办法加入自定义API应该就好了。
使用weather api以及vue3实现一个天气组件
最新发布
weixin_45729375的博客
07-25 671
之前使用国内的和风天气实现了一个天气组件，但是后来发现，对于海外地址，和风天气常常没有对应的天气信息，对国外用户来说并不友好，于是我开始寻找国外好用的天气api，终于发现了一个名字就叫weather api的产品[破涕为笑]。
在VUE中使用中国天气网插件
yun的博客
09-15 2036
第一步 在中国天气网根据自己的需要修改配置并生成代码 中国天气网：创建网页标准天气插件 第二步 html <div id="weather-v2-plugin-standard"></div> js mounted() { //天气插件配置 window.WIDGET = { CONFIG: { layout: 2, width: "386", height: "356", backgrou
VueJs+chrome-extension+element-ui天气预报的小插件
觉醒法师的专栏
07-17 6927
这里通过chrome-extension + VueJs + element-ui来实现个天气预报的小插件。风天气预报API，提供全球城市未来15天天气预报，包括日出日落、月升月落、最高最低温度、天气白天和夜间状况、风力、风速、风向、相对湿度、大气压强、降水量、降水概率、露点温度、紫外线强度、能见度等。全球城市未来15天天气预报，包括日出日落、月升月落、最高最低温度、天气白天和夜间状况、风力、风速、风向、相对湿度、大气压强、降水量、降水概率、露点温度、紫外线强度、能见度等。...
天气插件平台-天气预报插件-免费天气预报代码—中国天气网
Jadeon
11-22 2771
中国天气网天气插件平台提供各种免费的在线天气预报插件,天气h5页面,天气SDK等,方便开发者使用调用,可以根据ip地址自动获取本地天气实况,天气预报等信息,适配PC,安卓,iOS系统多种软件. 天气插件,HTML天气插件,JS天气插件,桌面天气插件,前台天气插件,天气SDK,天气H5,天气网插件,天气模块,免费天气预报. 卡片形式： <html lang="zh-CN"> ...
基于vue.js 2.0的百度天气应用webapp.zip
09-05
基于vue.js 2.0的百度天气应用webapp,是学习vue不可多得的好资料，代码例子很好哦
vue-mini-weather:基于Vue开发的迷你实时天气预报组件
05-14
基于Vue框架开发的一款迷你天气预报展示的小组件，目前只支持中国大陆的天气预报，原因在更新公告中有，有问题请提 :package: 安装 2021.04.24 因为刚上传到npm仓库没多久，可能其他镜像库还没有镜像过去，所以要...
vue学习第一天
weixin_49239088的博客
06-22 542
<!--导入Vue.js --> <script src="js/vue.js"></script>
基于Vue的天气客户端Weather_Vue.zip
07-19
标签：Weather
vue 中使用中国天气插件
01-08
export default { name: 'BIWeather.vue', created () { window.WIDGET = { ID: '自己的ID' }; (function (d) { var cs = d.createElement('link') cs.rel = 'stylesheet' cs.href = 'https://apip.weatherdt.com/view/static/css/tqw_widget_view.css?v=0101' var s = d.createElement('
在Vue中调用和风天气api展示天气详情和生活指数
01-20
api的具体使用可以看官网。 我主要使用两个api。 我新建了一个叫Weather.vue的Vue组件。 HTML代码： 我使用Element-UI框架的el-tabs，弄了一个标签页，可以切换查看天气详情和生活指数。 {{tmp}}℃ {{cond_txt}} 体感温度：{{fl}} 风向：{{wind_dir}} 风速：{{wind_spd}} 风力：{{wind_sc}} 降水量：{{pcpn}} 相对湿度：{{hum}} 大气压强：{{pres}} 能见度：{{vis}} handleClick方法： 点击标签可以切换界面 handleClick(tab,
Vue实战，天气预报DEMO实例
01-12
Vue学习DEMO，参考其他人写的Vue的DEMO，但因为他的代码是vue-cli构建，不太懂用webpack所以直接照搬了全部的样式代码一级部分逻辑代码实现的纯静态页面，无需npm，都是很基础的vue应用
Vue-axios天气预报
08-17
VUE天气预报，html，js代码&css样式，可直接打开查看。
小程序插件的开发到引入，这一篇文章就够了
Fin_Yeye的博客
03-11 1373
一、小程序插件功能介绍 1、如何理解插件 插件，英文名可称作“Plug-in、Plugin、add-in、addin、add-on、addon或extension”，是一个依附于主程序的辅助程序，透过和主程序的互动，用来代替主程序需要增加一些所需的特定功能。 更通俗的来讲，就类似机器的零件，可以“插入”的形式添加到程序内使用，从而获得一种特殊的能力，多个插件可以共用，最终开发程序像搭积木般方便。 插件本身的技术原理并不复杂。插件代码由一些自定义组件和 JS 代码文件构成，插件开发者在发布插件时，这些
android 系统天气插件,天气插件平台-天气预报插件-免费天气预报代码—中国天气网...
weixin_29247219的博客
05-26 698
适配版本Android 4.0及以上1.工程配置将Plugin_SDK_Android_v2.0.jar导入到工程中，并且引用配置Android Manifest权限权限列表权限说明代码是否必选允许网络连接android.permission.INTERNET必选访问设备状态android.permission.REAN_PHONE_STATE可选访问WiFi状态android.permissio...
好用的天气组件：vue3-mini-weather
G55331337547的博客
12-15 3991
在逛gitghub时发现一个非常好用的天气组件，可以实时呈现天气状况，可以应用到vue3项目中(gitHub中也有vue2版本的)，只需几行代码就可实现。
怎么在vue中使用和风天气插件
04-29
可以按照以下步骤在 Vue 中使用和风天气插件： 1. 在终端中使用 npm 安装和风天气插件： ``` npm install vue-weather-widget --save ``` 2. 在 Vue 组件中引入和风天气插件： ```js import VueWeatherWidget from 'vue-weather-widget'; ``` 3. 在 Vue 组件的 template 中使用和风天气插件： ```html <template> <div id="app"> <VueWeatherWidget :options="options" /> </div> </template> ``` 其中，`:options` 是一个包含和风天气插件配置选项的对象，例如： ```js options: { location: { city: '北京', district: '朝阳区' }, key: 'your_key_here', lang: 'zh', unit: 'c', theme: 'default' } ``` 4. 在 Vue 组件中设置和风天气插件的样式： ```css @import 'vue-weather-widget/dist/css/vue-weather-widget.css'; ``` 5. 最后，在 Vue 组件中使用和风天气插件的数据和方法： ```js export default { name: 'App', data() { return { options: { location: { city: '北京', district: '朝阳区' }, key: 'your_key_here', lang: 'zh', unit: 'c', theme: 'default' } }; }, methods: { onWeatherLoaded(weather) { console.log(weather); } } }; ``` 其中，`onWeatherLoaded` 是一个回调函数，当和风天气插件加载完毕后会调用该函数，并将天气数据作为参数传入。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值