百变天气小程序插件上线了，帮助小程序快速接入天气预报模块。

授权插件

添加插件，搜索插件id：wxc5af96529fe97d4b或“百变天气”添加

引入插件

修改app.json

{
  "permission": {
    "scope.userLocation": {
      "desc": "根据用户当前位置获取实时天气信息"
    }
  },
  "usingComponents": {
    "weather": "plugin://weather/weather"
  },
  "plugins": {
      "weather": {
        "version": "1.0.1",
        "provider": "wxc5af96529fe97d4b"
      }
    }
  }
}

如果只有一个页面需要用到，那么在页面的page.json中引入

{
  "usingComponents": {
    "weather": "plugin://weather/weather"
  }
}

使用代码

Demo

# 只渲染一个小方块
<weather size="xs" theme="dark" bgcolor="#0081ff" />
# 占整行渲染
<weather size="sm" theme="light" bgcolor="#0081ff"/>

样式

# 只渲染一个小方块 需要在wxss中加入样式 
weather {
  display: inline-block;
}

占用空间大小 size

1. xs
2. sm

支持2种风格 theme

1. light 白色
2. dark 黑色

背景色 bgcolor

直接填写颜色值就可以，支持以下两种

1. #0081ff
2. rgb(0, 129, 255);

展示效果