微信小程序-基于高德地图API实现天气组件(动态效果)
在社区翻腾了许久，没有找到合适的天气插件。迫不得已，只好借鉴互联网上的web项目，手动迁移到小程序中使用。现在分享到互联网社区中，帮助后续有需要的开发者。
1.组件介绍
1.1 组件效果预览图
小程序组件继承了外部样式colorui的色彩，但实际动画会根据父节点的color属性自动填充颜色，即使不引入colorui这个样式库，也可以在该组件引用外定义一个有color属性的块包裹该组件，同样可以达到如图的效果。
1.2 构造形式
1.3 支持的动画效果
简单介绍下，动画由3个部分组成
一个是主体块，这几个动画中的大云朵就是；第二个是背景块，如第一个中的太阳和第三个中的多层云；第三个就是状态块，如第一个中的雨水和第二个中的雷。每个块有且仅能展示一个。可以根据自己的需要，自行组合这几个块，来满足对应的天气需求。
注：如想要实现雷雨交加的效果，需要定义两个动画，一个是雷一个是雨，然后通过定时器进行动画的来回切换，如果有完成的可以在评论里留下代码，我懒得实现了，哈哈。
2.组件的使用
组件的使用，需要授权获取位置信息，在app.json中配置授权。
"permission": { "scope.userLocation": { "desc": "你的位置信息将用于定位效果和天气信息展示" } }组件配置完成后，在全局app.json中进行引入。
"usingComponents": { "uweather":"animation/uweather/weather" }组件有两种模式：
用户自定义模式
默认模式（引入amap-wx.js，申请高德地图key，具体步骤参见参考文档第一个）
用户自定义模式下，所有的信息包括动画和信息展示，都由用户传入的信息来控制。
默认模式下，即用户未传入任何信息，这时候组件就会基于位置信息，请求高德地图对应接口来获取地理位置及其天气信息。
组件在被创建的时候会检测是否有对应值的传入，如果有值传入，那么就是用户自定义模式，如果没有值传入，那么就是默认模式。
lifetimes:{ attached(){ if(this.properties.winfo == null){ this.setData({ amapPlugin: new amap.AMapWX({ key: this.data.key }) },()=>{ //获取天气信息 this.getWeather() }) } } },2.1 自定义模式
自定义模式下，传入的数据要按照规定的的格式（也可以自己修改组件的属性值）
例如在page中配置的属性如下
weather:'雷', winfo:{ province:'自定义省份', city:'自定义城市', temperature:'自定义温度', weather:'自定义天气', winddirection:'自定义风向', windpower:'自定义风力' }wxml页面中的组件使用如下
<uweather weather="{{weather}}" winfo="{{winfo}}" > </uweather>那么对应的组件展示效果就是这样子的
2.2 默认模式
默认模式需要获得用户的地理位置信息授权，确认在app.json中进行了授权配置和使用组件前完成了授权信息的校验。
组件生命周期会在每一次组件被装如页面树时，监听是否有对应数据的传入，如果没有，就会请求对应的接口，获取地图信息。使用默认方法，还需要配置 https://restapi.amap.com 为合法的request域名和申请对应的key用于开发，申请步骤参见参考文档。
默认模式下不需要传入任何参数，直接引入组件即可。
<uweather> </uweather>3.组件使用注意事项
默认方法的天气返回值具有很多种，具体使用还需要自己修改组件，完成不同天气到对应动画的映射，例如小雨、中雨、大雨都可以映射到雨这个动画状态。下图是高德地图天气API的部分信息，全部请参见参考文档。