资讯专栏INFORMATION COLUMN

极简天气之小夭天气

罗志环 / 1595人阅读

摘要:利用周末两天的时间,参考小天气的风格,撸了一个天气小程序,小夭天气。功能十分简单,查看当前地区的天气和搜索其他地区的天气,增加了可以生成图片分享出去。

1、利用周末两天的时间,参考小天气的风格,撸了一个天气小程序,【小夭天气】。
2、功能十分简单,查看当前地区的天气和搜索其他地区的天气,增加了可以生成图片分享出去。
3、上线后发现一个问题,就是极速提供的天气接口对区级市没有区分,例如 上海有宝山区,东北那也有一个。就没有区分。这是一个bug
4、其他有什么问题欢迎大家提意见和建议。
欢迎大家扫码体验

详情如下

部分代码如下:
    
    
      
      
      
          
           
          返回
      
    
        
        
            
            
                
                    
                        
                    
                
                
                    
                    
                    
                    
                
                历史记录
                
                    {{list}}
                
                热门城市
                
                     定位
                    {{list}}
                
            
         
 getWeatherData:function(city){
    var _this = this,
          thisdata = this.data,
          historyArea = thisdata.historyArea;
    wx.request({
      url: _this.data.api,
      data: {
        "city": city
      },
      method: "get",
      header: {
        "Content-Type": "application/json"
      },
      dataType: "jsonp",
      jsonp: "callback",
      success: function (res) {
        var res = res.data
        res = JSON.parse(res)
        if (res.status === "0") {
          var data = res["result"]
          data.img = "../images/condicon/"+data.img+"b.png"
          _this.setData({
            getSuccess: "true",
            getLotion: city,
            realdata: data,
            clock: data.updatetime,
            aqi: data["aqi"],
            aqiMsg: data.aqi.aqiinfo["affect"] + "," + data.aqi.aqiinfo["measure"],
            life: data["index"],
            daily: data["daily"],
            hourly: data["hourly"],
            airPredict: "两小时之后天气" + data.hourly[2].weather + " ,温度 " + data.hourly[2].temp + "°",
            quality: data["aqi"].quality
          })
          // 搜索返回成功后 清除 输入框,将搜索结果放入历史记录
          // _this.$refs.clearText.value = ""
          if (thisdata.inpuText !== "") {
            if (thisdata.historyArea.indexOf(thisdata.inpuText) === -1) {
              historyArea.push(thisdata.inpuText)
              _this.setData({
                historyArea: historyArea
              })
            }
          }
          _this.back()
        } else {
          wx.showModal({
            title: "提示",
            content: res.msg,
            success: function (res) {
              if (res.confirm) {
                _this.setData({
                  msgText: "位置获取失败!!!请手动选择",
                  loadingBtn: true
                })
              } else if (res.cancel) {
                console.log("用户点击取消")
              }
            }
          })
        }
      },
// 定位获取
  selectLocation: function () {
    let _this = this
    _this.getlocation();
  },
  getlocation: function () {
    var _this = this
    wx.getLocation({
      type: "wgs84",
      success: function (res) {
        console.log(res)
        var latitude = res.latitude
        var longitude = res.longitude
        var speed = res.speed
        var accuracy = res.accuracy
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: latitude,
            longitude: longitude
          },
          success: function (res) { 
            console.log(res)
            _this.setData({
              getLotion: res.result.address_component.district ? res.result.address_component.district : res.result.address_component.city
            })
            wx.setNavigationBarTitle({
              title: res.result.address_component.district
            })
            _this.getWeatherData(res.result.address_component.district)
          }
        })
      },
      fail:function(res){
        _this.setData({
          msgText: "位置获取失败!!!请手动选择",
          loadingBtn:true
        })
      }
    })
  },

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/101308.html

相关文章

  • 动手写一款简单的chrome天气插件

    摘要:极简天气一款简单的天气插件。属性说明指定文件格式的版本,在之后,应该都是扩展名称扩展版本号扩展的版本扩展列表图标指定扩展在工具栏中的显示信息。 极简天气 一款简单的chrome天气插件。 github https://github.com/yohnz/weather如图: showImg(https://segmentfault.com/img/bVvH67); 创建文件 新建weat...

    shixinzhang 评论0 收藏0
  • 推荐几个天气Api接口 (可在小程序中使用)

    摘要:国内的地图软件基本是支持查询天气的唯独腾讯地图不支持天气查询,当然其他天气平台提供的接口也是够个人使用的高德地图高德地图开发者平台支持获取实时天气数据百度地图百度地图开放平台支持获取实时天气天气预报还有指数,未来几天的天气等心知天气免费版支 国内的地图软件基本是支持查询天气的唯独腾讯地图不支持天气查询,当然其他天气平台提供的接口也是够个人使用的 1、高德地图(高德地图开发者平台)sho...

    MartinDai 评论0 收藏0
  • 推荐几个天气Api接口 (可在小程序中使用)

    摘要:国内的地图软件基本是支持查询天气的唯独腾讯地图不支持天气查询,当然其他天气平台提供的接口也是够个人使用的高德地图高德地图开发者平台支持获取实时天气数据百度地图百度地图开放平台支持获取实时天气天气预报还有指数,未来几天的天气等心知天气免费版支 国内的地图软件基本是支持查询天气的唯独腾讯地图不支持天气查询,当然其他天气平台提供的接口也是够个人使用的 1、高德地图(高德地图开发者平台)sho...

    channg 评论0 收藏0

发表评论

0条评论

罗志环

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<