【小程序】微信开发者工具+心知天气API实现天气预报

前言

问：为什么使用心知天气的天气数据API而不是其他产品？

答：

• 心知天气为我们提供了一款通过标准的Restful API接口进行数据访问的天气数据API产品；

• 心智天气官网为我们提供了足够详细的开发文档和用户手册，方便我们快速上手进行开发；

• 心知天气旗下的天气数据API针对不同用户提供了四种产品套餐：免费版、试用版、开发者套餐和企业版；对于处在学习阶段的我们可以选择免费申请试用版进行测试学习；

  ---

  1.效果图

  ---

  2.获取心知天气API接口

  2.1.获取个人API私钥

  心知天气官网链接：心知天气https://www.seniverse.com/

  • 进入心知天气官网注册账号

    • 登录成功后进入控制台页面添加产品（注：这里的试用版和免费版是我已添加过的）

      • 免费申请试用版(亦可充值申请开发者套餐进行长期开发，价格也比较划算)

        • 申请成功后点击产品管理=>进入您选择的产品项，在基本信息项获取API私钥

          2.2.查询开发文档获取API接口

          • 官网点击文档进入

            • 心知天气API文档链接

              ---

              3.开发测试

              3.1.获取页面素材包

              • 心知天气官方文档提供：(注：本演示代码背景采取浅色系，推荐使用官方文档提供的暗色主题图标)
              • 心知天气官方文档提供的亮色系主题图标链接
              • 心知天气官方文档提供的暗色系主题图标链接

                ---

                使用原因：

                                   

                亮色主题图标

                                                                                                                           

                暗色主题图标

                                                                                                    

                • 本文演示代码背景使用浅色系，使用亮色主题图标如图所示，会和浅色背景混合导致图标显示不清，所以推荐使用暗色主题图标；

                • 心知天气提供的素材包命名格式采取code@1x.png格式，code是后文中使用wx.request请求API接口获得的属性，可以避免我们自定义方法切换素材从而增大系统开销；

                  3.2.main.json

                  {  "usingComponents": {},  "navigationBarBackgroundColor": "#000000",  "navigationBarTextStyle": "white",  "navigationBarTitleText": "天气预报",  "backgroundColor": "#eeeeee",  "backgroundTextStyle": "light"}

                  • usingComponents：用于引入自定义组件。这里没有引入任何自定义组件，后期可进行二次开发添加组件；

                  • navigationBarBackgroundColor：设置小程序导航栏的背景颜色；

                  • navigationBarTextStyle：设置小程序导航栏的文字颜色；

                  • navigationBarTitleText：设置小程序导航栏中间的标题；

                  • backgroundColor：设置小程序页面的背景颜色

                  • backgroundTextStyle：设置小程序页面的背景文字颜色，以适应浅色背景

                    ---

                    3.3.main.wxml

                                    {{now.temperature}}°