Ⅰ. 一些屁话

⚠在任何情况下你都不应该将DouWeather-temp仓库中所提供脚本用于生产环境！该仓库中的代码结构混乱、难以长期维护，之后会抽空将代码重构并在DouWeather仓库持续更新（画饼）

DouWeather目前的特性：

• 有着优雅粗糙的过渡动画
• 适配暗黑模式
• 天气卡片组件化
• 天气卡片布局支持自适应
• 比较生动的数据展示
• 全浏览器原生js实现

DouWeather目前的缺陷：

• 比较有限的样式修改
• 代码结构混乱，难以维护

一些饼（还未实现）：

• 自定义数据源
• 模块化的数据展示
• 自定义图标包
• 自定义样式
• 更多交互操作

Ⅱ. 如何开始

使用DouWeather，你只需要引入两个js文件，但是注意需要加上defer属性。

其中douWeather_core.js包含卡片核心逻辑和基本样式，douWeather_icons.js包含常用天气图标。

<script src="/yourpath/douWeather_core.js" defer></script>
<script src="/yourpath/douWeather_icons.js" defer></script>

Ⅲ. 开箱即用

DouWeather默认预定义了一组天气组件的样式，你无需配置任何内容，即可在你的网页中快速插入一个天气卡片组件。

<douweather-card location="101210101"></douweather-card>

运行

你可以修改 type 属性来使用不同样式的天气卡片（默认值normal）

<douweather-card location="101210101" type="normal"></douweather-card>

运行

<douweather-card location="101210101" type="small"></douweather-card>

运行

<douweather-card location="101210101" type="medium"></douweather-card>

运行

<douweather-card location="101210101" type="detail"></douweather-card>

运行

卡片支持暗黑模式，你也可以通过 theme 属性来锁定卡片样式（允许值 “light” “dark”）

<douweather-card location="101210101" type="detail" theme="dark"></douweather-card>

运行

你可以动态修改卡片的属性，卡片会自动刷新，下面的例子会将杭州天气切换到北京天气。同时你可以修改location属性的值为auto，此时卡片会通过你的ip自动显示对应位置的天气。目前DouWeather的后端接口已经支持ipv6的地理位置检索，同时支持对6to4、teredo、isatap进行位置检索。（不支持移动数据网络ipv6，因为移动数据网络具有漫游性，一般为初次接入地ip，无法定位到具体位置）

document.querySelector("#demo7").setAttribute("location","101210101"); //杭州

document.querySelector("#demo7").setAttribute("location","101010100"); //北京

document.querySelector("#demo7").setAttribute("location","auto"); //自动

杭州 北京 自动识别