精华内容
下载资源
问答
  • 微信小程序天气预报api
    千次阅读
    2021-04-07 14:38:25

    一个简单的微信小程序天气预报查询

    仅以此记录自己学习小程序的过程,以及学习中所遇到的问题既解决过程给其他新手以参考

    所需要用到的标签有input输入框,用来获取城市的名称
    icon标签用来表示搜索图标,已经用来和接口发生响应


    **前导知识

    wx.request用来发起网络请求。默认超时时间和最大时间都是60s,一个微信小程序同时最多只能连接5个网络请求


    下面用代码来演示一下wx.request的使用

    wx.request({
    	url:'test', //api接口地址
    	data:{
    	
    		}, //用来请求的参数
    	method:'POST' //HTTP的请求方法
    	header:{
    			'content-type':'application/json' //默认值
    			},
    	success(res){
    			console.log(res.data) //接口调用成功的回调函数
    				}
    })
    

    获取输入的城市名

    wxml页面

    <input placeholder="请输入城市名查询" bindinput="bindInput"></input>
    <view class="icon">
    	<icon type="search" size="26" bindtap="search"/>
    </view>
    

    js页面
    首先定义一些变量,用来保存获取到的数值
    //定义城市、天气、温度、风级、图片、日期参数

    var defaultcity,getweather,gettemp,getwind,getpic,getdate
    

    //定义bindInput函数 用来获取input输入框的值

    bindInput:function(e){
    	defaultcity=e.detail.value
    }
    

    连接api接口请求天气预报的数据

    由前导知识可得

    search:function(e){
    	var that = this
    	wx.request({
    		url:'接口地址+key+参数' +defaultcity,
    		sueecss(res){
    			getweather = res.data.results[0].weather_data[0].weather
    			gettemp = res.data.results[0].weather_data[0].temperature
    			getwind = res.data.results[0].weather_data[0].wind
    			getpic = res.data.results[0].weather_data[0].dayPictureUrl
    			getdate = res.data.results[0].weather_data[0].date
    			that.setData({
    			city:defaultcity,weather:getweather,
    			temp: gettemp,wind:getwind,
    			pic : getpic,date: getdate
    						})
    					}
    				})
    					}
    

    最后渲染界面展示数据

    <view class="body">
    	<view class="city"><text>{{city}}</text> </view>
    	<view class="date"><text>{{date}}</text> </view>
    	<view>
    	<image src="{{pic}}" mode="aspectFit"/>
    	</view>
    	<view class="buttom">
    	<view class="weather"><text>{{weather}}</text> </view>
    	<view class="wind"><text>{{wind}}</text> </view>
    	<view class="temp"><text>{{temp}}</text> </view>
    	</view>
    </view>
    

    有想一起学习小程序的可以加我咱们一起讨论进步

    更多相关内容
  • 主要介绍了微信小程序 天气预报开发实例代码源码的相关资料,这里含有源码,需要的朋友可以参考下
  • 1.美好天气预报-微信小程序源码(很简单的一个小程序) 1.1天气微信小程序用来显示天气的温度、最低温度、最高温度及天气情况,通过数据绑定的方式来显示天气情况 1.2打开微信开发者工具,配置框架及全局 1.3通过...
  • 微信小程序小程序天气API示例,功能简介,方便新手快速入门。
  • 点评:使用百度地图api,你就懂了,真机预览时,会提示,是否允许获取地理位置   免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业...
  • 微信小程序源码 天气预报(学习版)微信小程序源码 天气预报(学习版)微信小程序源码 天气预报(学习版)微信小程序源码 天气预报(学习版)微信小程序源码 天气预报(学习版)微信小程序源码 天气预报(学习版)微信小程序源码...
  • 微信小程序demo:和风天气天气API,设置城市;适用1122109.zip
  • 微信小程序简单天气预报查询系统,利用API接口实现天气预报的调用查询,需要自己去设置request,在微信公众开发平台里面设置白名单。 天气接口api 地址:http://wthrcdn.etouch.cn/weather_mini?city=城市名称 不得...
  • 微信小程序天气预报(附源码)

    万次阅读 多人点赞 2020-03-23 23:20:56
    简介 这是一个完整的已经线上运行的天气应用小程序,点击可查看源码,可随意 star。也可以扫描下方的小程序码直接体验。...个人开发完全免费,有对应的小程序 sdk,加入即可,但是返回的天气数据较少。 运行前准备...

    简介

    这是一个完整的已经线上运行的天气应用小程序,点击可查看源码,可随意 star。也可以扫描下方的小程序码直接体验。

    image

    新版首页(可根据不同的天气改变背景)

    image

    其他效果图:

    image

    image

    数据来源

    地理编码、天气数据均来自百度地图开放平台。个人开发完全免费,有对应的小程序 sdk,加入即可,但是返回的天气数据较少。

    运行前准备

    • 注册微信小程序,获取 appid
    • 气象数据和风天气,需要注册账号获取 key;免费版只能获取三天的天气数据,若要获取七天的气象数据,可以申请个人开发者认证;
    • 在 app.js 中替换 globalData 中的 key 为自己的 key
    • Run

    天气数据获取

    因为只是一个个人版DEMO(完整版),开发前就决定选择免费的天气数据(个人开发免费),懒得去寻找其他的天气数据,懒得去注册账号,就直接选择了百度地图开放平台的天气数据,正好也提供了小程序对应的 sdk,但是可能相比于其他的天气 API,百度返回的数据偏少:当天 pm2.5、当天和未来三天数据、当天生活指数,其他的就没有了。但是对于一款简单的天气应用小程序来说也够了。

    地理编码

    获取天气数据默认返回当前城市的天气数据,如果要获取其他的城市的天气数据,需要传入经纬度。为了获取其他城市的经纬度,这里使用的地图的地理编码接口,输入城市名,输出经纬度,然后调用获取天气数据 API 即可。

    具体实现

    该应用只有五个个页面:首页、设置页、关于页。如下:

    首页

    首页最终的显示效果是这个样子:

    image

    从上到下依次是:其他城市天气搜索、当前城市数据展示、当天和未来三天天气数据展示、当天生活指数展示、footer。下拉刷新会刷新当前地区的天气数据。其中,顶部城市天气搜索和生活指数可以在设置中隐藏。屏幕右下角是一个悬浮球菜单,点击后会弹出设置、关于页面的入口。背景色默认是#40a7e7纯色,未来三天天气预报和生活指数分别添加了透明的黑色背景。设计稿?没有的,纯肉眼调试,直到自己看着舒服。

    主页面

    先定义一个方法获取当前地区的天气数据:

    init(params) {
      let that = this
      let BMap = new bmap.BMapWX({
        ak: globalData.ak,
      })
      BMap.weather({
        location: params.location,
        fail: that.fail,
        success: that.success,
      })
    },
    

    ak请替换为自己的ak,因为需要获取用户的地理位置,所以在fail的回调中需要处理用户拒绝获取地理位置的逻辑,这里处理为:提示打开地理位置授权,3000mswx.openSetting()跳转到小程序设置页,如下:

    fail (res) {
      wx.stopPullDownRefresh()
      let errMsg = res.errMsg || ''
      // 拒绝授权地理位置权限
      if (errMsg.indexOf('deny') !== -1 || errMsg.indexOf('denied') !== -1) {
        wx.showToast({
          title: '需要开启地理位置权限',
          icon: 'none',
          duration: 3000,
          success (res) {
            let timer = setTimeout(() => {
              clearTimeout(timer)
              wx.openSetting({})
            }, 3000)
          },
        })
      } else {
        wx.showToast({
          title: '网络不给力,请稍后再试',
          icon: 'none',
        })
      }
    },
    

    获取到用户的地理位置后,执行success

    success (data) {
      wx.stopPullDownRefresh()
      let now = new Date()
      // 存下来源数据
      data.updateTime = now.getTime()
      data.updateTimeFormat = utils.formatDate(now, "MM-dd hh:mm")
      let results = data.originalData.results[0] || {}
      data.pm = this.calcPM(results['pm25'])
      // 当天实时温度
      data.temperature = `${results.weather_data[0].date.match(/\d+/g)[2]}`
      wx.setStorage({
        key: 'cityDatas',
        data: data,
      })
      this.setData({
        cityDatas: data,
      })
    },
    

    看一下返回的天气数据格式:

    {
        "error": 0, 
        "status": "success", 
        "date": "2018-06-29", 
        "results": [
            {
                "currentCity": "北京市", 
                "pm25": "55", 
                "index": [
                    {
                        "des": "天气炎热,建议着短衫、短裙、短裤、薄型T恤衫等清凉夏季服装。", 
                        "zs": "炎热", 
                        "tipt": "穿衣指数", 
                        "title": "穿衣"
                    }, 
                    {
                        "des": "较适宜洗车,未来一天无雨,风力较小,擦洗一新的汽车至少能保持一天。", 
                        "zs": "较适宜", 
                        "tipt": "洗车指数", 
                        "title": "洗车"
                    }, 
                    {
                        "des": "各项气象条件适宜,发生感冒机率较低。但请避免长期处于空调房间中,以防感冒。", 
                        "zs": "少发", 
                        "tipt": "感冒指数", 
                        "title": "感冒"
                    }, 
                    {
                        "des": "天气较好,无雨水困扰,但考虑气温很高,请注意适当减少运动时间并降低运动强度,运动后及时补充水分。", 
                        "zs": "较不宜", 
                        "tipt": "运动指数", 
                        "title": "运动"
                    }, 
                    {
                        "des": "属中等强度紫外线辐射天气,外出时建议涂擦SPF高于15、PA+的防晒护肤品,戴帽子、太阳镜。", 
                        "zs": "中等", 
                        "tipt": "紫外线强度指数", 
                        "title": "紫外线强度"
                    }
                ], 
                "weather_data": [
                    {
                        "date": "周五 06月29日 (实时:34℃)", 
                        "dayPictureUrl": "http://api.map.baidu.com/images/weather/day/duoyun.png", 
                        "nightPictureUrl": "http://api.map.baidu.com/images/weather/night/qing.png", 
                        "weather": "多云转晴", 
                        "wind": "东南风微风", 
                        "temperature": "38 ~ 25℃"
                    }, 
                    {
                        "date": "周六", 
                        "dayPictureUrl": "http://api.map.baidu.com/images/weather/day/duoyun.png", 
                        "nightPictureUrl": "http://api.map.baidu.com/images/weather/night/duoyun.png", 
                        "weather": "多云", 
                        "wind": "东南风微风", 
                        "temperature": "36 ~ 23℃"
                    }, 
                    {
                        "date": "周日", 
                        "dayPictureUrl": "http://api.map.baidu.com/images/weather/day/qing.png", 
                        "nightPictureUrl": "http://api.map.baidu.com/images/weather/night/qing.png", 
                        "weather": "晴", 
                        "wind": "东南风微风", 
                        "temperature": "35 ~ 23℃"
                    }, 
                    {
                        "date": "周一", 
                        "dayPictureUrl": "http://api.map.baidu.com/images/weather/day/qing.png", 
                        "nightPictureUrl": "http://api.map.baidu.com/images/weather/night/duoyun.png", 
                        "weather": "晴转多云", 
                        "wind": "南风微风", 
                        "temperature": "35 ~ 25℃"
                    }
                ]
            }
        ]
    }
    

    success里缓存了最新一次获取的天气数据+更新的时间cityDatas,小程序的模板里无法使用方法,所以数据需要在js里面先格式化。calcPM用来计算当前 pm2.5 的质量,返回“优良差”类似字样,范围标准可自行搜索。当天的实时温度并没有给出独立的字段,而是混在了wearther_data[0]data字段里:"date": "周五 06月29日 (实时:34℃)",需要自行提取。返回的天气 icon 和色调不搭,就没有使用。其他的数据按照按照我们要显示的格式直接填充即可。

    城市天气搜索

    获取天气数据传参为经纬度,所以搜索城市天气时,需先将城市转换为对应的经纬度,然后调用获取天气数据 API 即可。获取经纬度的 API 为:

    https://api.map.baidu.com/geocoder/v2/?address=${address}&output=json&ak=${yourak}

    返回的数据格式为:

    {
        "status":0,
        "result":{
            "location":{
                "lng":117.21081309155257,
                "lat":39.143929903310074
            },
            "precise":0,
            "confidence":12,
            "level":"城市"
        }
    }
    

    然后直接调用获取天气 API 即可。具体代码如下:

    geocoder (address, success) {
      let that = this
      wx.request({
        url: getApp().setGeocoderUrl(address),
        success (res) {
          let data = res.data || {}
          if (!data.status) {
            let location = (data.result || {}).location || {}
            // location = {lng, lat}
            success && success(location)
          } else {
            wx.showToast({
              title: data.msg || '网络不给力,请稍后再试',
              icon: 'none',
            })
          }
        },
        fail (res) {
          wx.showToast({
            title: res.errMsg || '网络不给力,请稍后再试',
            icon: 'none',
          })
        },
        complete () {
          that.setData({
            searchText: '',
          })
        },
      })
    },
    search (val) {
      // 动画
      if (val === '520' || val === '521') {
        this.setData({
          searchText: '',
        })
        this.dance()
        return
      }
      wx.pageScrollTo({
        scrollTop: 0,
        duration: 300,
      })
      if (val) {
        let that = this
        this.geocoder(val, (loc) => {
          that.init({
            location: `${loc.lng},${loc.lat}`
          })
        })
      }
    },
    

    搜索动画彩蛋

    在搜索框里搜索520521,会出现从顶部下小心心的动画,如下:

    image

    这里实现比较简单。

    创建了一个heartbeat的组件。wxml结构是遍历数组,创建多个大小、位置随机的图片:

    <image wx:for='{{arr}}' wx:key='{{index}}' animation='{{animations[index]}}' class='heart' style='left:{{lefts[index]}}px;top:{{tops[index]}}px;width:{{widths[index]}}rpx;height:{{widths[index]}}rpx;' src='/img/heartbeat.png'></image>
    

    然后使用的是小程序提供的wx.createAnimation,动画的使用比较简单,创建动画,然后赋予animation属性即可,比较简单,但是也有局限性,比如,没有直接的动画结束后的回调,但是可以使用setTimeout来实现等。这里会用到可用窗口宽高,因为多处用到了该参数,所以在app.js里面异步获取了先。

    动画代码如下:

    dance (callback) {
        let windowWidth = this.data.windowWidth
        let windowHeight = this.data.windowHeight
        let duration = this.data.duration
        let animations = []
        let lefts = []
        let tops = []
        let widths = []
        let obj = {}
        for (let i = 0; i < this.data.arr.length; i++) {
          lefts.push(Math.random() * windowWidth)
          tops.push(-140)
          widths.push(Math.random() * 50 + 40)
          let animation = wx.createAnimation({
            duration: Math.random() * (duration - 1000) + 1000
          })
          animation.top(windowHeight).left(Math.random() * windowWidth).rotate(Math.random() * 960).step()
          animations.push(animation.export())
        }
        this.setData({
          lefts,
          tops,
          widths,
        })
        let that = this
        let timer = setTimeout(() => {
          that.setData({
            animations,
          })
          clearTimeout(timer)
        }, 200)
        let end = setTimeout(() => {
          callback && callback()
          clearTimeout(end)
        }, duration)
      },
    },
    

    首页搜索特定关键词后,调用组件dance方法即触发小心心动画。

    悬浮球菜单

    屏幕右下角的悬浮球提供了三个页面的入口:城市选择页、设置页、关于页。菜单弹出、收回会有动画。

    这里的动画分为弹出和收起,两者写起来基本上一样的,只是动画的参数不一样。这里贴出弹出的动画:

    // wxml
    <!-- 悬浮菜单 -->
    <view class='menus'>
      <image src="/img/location.png" animation="{{animationOne}}" class="menu" bindtap="menuOne"  style='top:{{pos.top}}px;left:{{pos.left}}px;'></image>
      <image src="/img/setting.png" animation="{{animationTwo}}" class="menu" bindtap="menuTwo"  style='top:{{pos.top}}px;left:{{pos.left}}px;'></image>
      <image src="/img/info.png" animation="{{animationThree}}" class="menu" bindtap="menuThree"  style='top:{{pos.top}}px;left:{{pos.left}}px;'></image>
      <image src="/img/menu.png" animation="{{animationMain}}" class="menu main" bindtap="menuMain" catchtouchmove='menuMainMove' style='top:{{pos.top}}px;left:{{pos.left}}px;'></image>
    </view>
    
    // js
    popp() {
      let animationMain = wx.createAnimation({
        duration: 200,
        timingFunction: 'ease-out'
      })
      let animationOne = wx.createAnimation({
        duration: 200,
        timingFunction: 'ease-out'
      })
      let animationTwo = wx.createAnimation({
        duration: 200,
        timingFunction: 'ease-out'
      })
      let animationThree = wx.createAnimation({
        duration: 200,
        timingFunction: 'ease-out'
      })
      animationMain.rotateZ(180).step()
      animationOne.translate(-50, -60).rotateZ(360).opacity(1).step()
      animationTwo.translate(-90, 0).rotateZ(360).opacity(1).step()
      animationThree.translate(-50, 60).rotateZ(360).opacity(1).step()
      this.setData({
        animationMain: animationMain.export(),
        animationOne: animationOne.export(),
        animationTwo: animationTwo.export(),
        animationThree: animationThree.export(),
      })
    },
    

    悬浮菜单是可以在屏幕上随意滑动的,方法也很简单,监听touchmove事件即可,因为菜单展开方向是在左边,所以悬浮菜单能往左边移动的最远距离要有一段间隔,否则展开的菜单就进入左边屏幕了,移动到上方同样逻辑(后期可以改成菜单展开方向随移动而改变,而不是一味在左边展开)。

    代码如下:

    menuMainMove (e) {
      // 如果已经弹出来了,需要先收回去,否则会受 top、left 会影响
      if (this.data.hasPopped) {
        this.takeback()
        this.setData({
          hasPopped: false,
        })
      }
      let windowWidth = SYSTEMINFO.windowWidth
      let windowHeight = SYSTEMINFO.windowHeight
      let touches = e.touches[0]
      let clientX  = touches.clientX
      let clientY = touches.clientY
      // 边界判断
      if (clientX > windowWidth - 40) {
        clientX = windowWidth - 40
      }
      if (clientX <= 90) {
        clientX = 90
      }
      if (clientY > windowHeight - 40 - 60) {
        clientY = windowHeight - 40 - 60
      }
      if (clientY <= 60) {
        clientY = 60
      }
      let pos = {
        left: clientX,
        top: clientY,
      }
      this.setData({
        pos,
      })
    },
    

    至于一些样式、逻辑上的细节,这里不再赘述,具体可查看源码。

    关于页

    关于页是一个展示页,没有多少交互,使用到的 API 只有复制到剪切板wx.setClipboardData。“微信快速联系”使用的是小程序提供的联系客服的方式<button open-type="contact" class='btn'></button>,将button绝对定位隐藏到点击区域的下方即可。有精力的话,可以自己搭建服务,将小程序的消息 push 到自己的服务上去。

    设置页

    设置页的功能看着有点多,其实并不多,只是一堆 API 的调用。这个页面分了自定义、检查更新、小工具、清除数据三个部分。各个设置参数保存在storage中。一个一个来说。

    1. 自定义

    • 自定义首页背景

    自定义背景是将选取的图片(wx.chooseImage)保存(wx.saveFile)到本地,然后首页获取(wx.getSavedFileList)保存的图片,在首页展示出来即可。长按删除,则是获取(wx.getSavedFileList)保存的图片,然后wx.removeSavedFile掉即可。现在设置的是本地只保存一张图片,所以重新设置其他背景时,会删除上一张背景图,然后重新保存新背景图。

    实现如下:

    defaultBcg () {
      this.removeBcg(() => {
        wx.showToast({
          title: '恢复默认背景',
          duration: 1500,
        })
      })
    },
    removeBcg (callback) {
      wx.getSavedFileList({
        success: function (res) {
          let fileList = res.fileList
          let len = fileList.length
          if (len > 0) {
            for (let i = 0; i < len; i++)
            (function (path) {
              wx.removeSavedFile({
                filePath: path,
                complete: function (res) {
                  if (i === len - 1) {
                    callback && callback()
                  }
                }
              })
            })(fileList[i].filePath)
          } else {
            callback && callback()
          }
        },
        fail: function () {
          wx.showToast({
            title: '出错了,请稍后再试',
            icon: 'none',
          })
        },
      })
    },
    customBcg () {
      let that = this
      wx.chooseImage({
        success: function (res) {
          that.removeBcg(() => {
            wx.saveFile({
              tempFilePath: res.tempFilePaths[0],
              success: function (res) {
                wx.navigateBack({})
              },
            })
          })
        },
        fail: function (res) {
          let errMsg = res.errMsg
          // 如果是取消操作,不提示
          if (errMsg.indexOf('cancel') === -1) {
            wx.showToast({
              title: '发生错误,请稍后再试',
              icon: 'none',
            })
          }
        },
      })
    },
    
    • 打开顶部城市天气快捷搜索

    该操作只是将首页的顶部搜索wx:if掉而已。switch组件的样式可以通过修改默认的类来修改,调一个自己满意的即可:

    .wx-switch-input{width:84rpx !important;height:43rpx !important;}
    .wx-switch-input::before{width:82rpx !important;height: 38rpx !important;}
    .wx-switch-input::after{width: 38rpx !important;height: 38rpx !important;}
    
    • 显示生活指数信息

    同样wx:if掉。

    • 检查更新

    检查更新默认关闭。小程序的更新是在冷启动时去检查,如果有新版本会异步下载,再次冷启动时会加载新版本。这里使用wx.getUpdateManager,因为该 API 基础库支持最低版本是 1.9.90,基础库版本低的会提示不支持,显示的文案也会相应修改。

    • 小工具

    1)NFC

    使用wx.getHCEState

    2)屏幕亮度

    获取屏幕亮度、设置屏幕亮度、保持常亮使用的 API 分别是wx.getScreenBrightnesswx.setScreenBrightnesswx.setKeepScreenOn。完整实现可查看源码。

    3)系统信息

    系统信息会跳转到新页面。

    其他

    其他代码细节,不再赘述,具体可查看源码。
    作者:jack.zhang
    GitHub:https://github.com/zhangliwen1101/WeatherWidget

     

    智能垃圾分类,源码,扫码直接体验

    定制属于你自己的婚礼邀请函,源码,扫描直接体验

    扫码关注,免去各种VIP,直接观看各种影视资源

    需要入群交流的,可以加我微信:  bjawenfd  ,纯粹交流群互粉群

    展开全文
  • 微信小程序天气预报查询

    千次阅读 2022-04-29 15:07:56
    前不久用安卓做了个天气预报,麻烦的要死,故想体验一下微信小程序开发(其实没有可比性) 发现了一个免费的天气接口 天气接口api 地址:http://wthrcdn.etouch.cn/weather_mini?city=城市名称 (1)index.wxml...

    前不久用安卓做了个天气预报,麻烦的要死,故想体验一下微信小程序开发(其实没有可比性)

    发现了一个免费的天气接口

    天气接口api 地址:http://wthrcdn.etouch.cn/weather_mini?city=城市名称

    (1)index.wxml文件

    <!--index.wxml-->
    <view class="page">
      <!-- top部分 -->
      <view class="top">
        <input placeholder="输入城市名进行搜索" bindinput="bindKeyInput"></input>
        <view class="icon">
          <icon type="search" size="25" bindtap="search" />
        </view>
      </view>
      <!-- body部分 -->
      <view class="body">
        <view class="city">
          <text>{{city}}</text>
        </view>
        <view class="today">
          <text>{{date}}</text>
        </view>
        <view>
          <image src="{{pic}}" mode="aspectFit" style="width: 400rpx; height: 400rpx" />
        </view>
      </view>
      <!-- bottom部分 -->
      <view class="bottom">
        <view class="weather">
          <text>{{weather}}</text>
        </view>
        <view class="right">
          <view class="temp">
            <text>{{temp}}</text>
          </view>
          <view class="wind">
            <text>{{wind}}</text>
          </view>
        </view>
      </view>
    </view>
    

    (2)index.wxss文件

    /**index.wxss**/
    page {
        background-color: #5a9cd8;
        color: #fff;
      }
      
      .page {
        margin: 50rpx;
      }
      
      .top {
        display: flex;
        padding: 20rpx;
        flex-direction: row;
        background-color: #efefef;
        position: relative;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
      }
      
      .input {
        width: 80%;
        font-size: 32rpx;
      }
      
      .icon {
        width: 10%;
        position: absolute;
        right: 0;
        bottom: 5rpx;
      }
      
      .body {
        text-align: center;
        display: flex;
        flex-direction: column;
      }
      
      .city {
        font-size: 80rpx;
      }
      
      .today {
        font-size: 34rpx;
      }
      
      .bottom {
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: center;
      }
      
      .weather {
        font-size: 38rpx;
        width: 50%;
      }
      
      .right {
        display: flex;
        flex-direction: column;
      }
      
      .wind {
        font-size: 40rpx;
      }
      
      .temp {
        font-size: 40rpx;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
      }
      
      input {
        color: #333;
      }
      

    (3)index.js文件

    主要是实现三个动作

    一个是初始化加载

    一个是动态获取input的城市名称

    一个是绑定搜索按钮,实现搜索功能

    当然,最关键的是weather函数,用来将给.wxml页面中所需的天气数据赋值

    // index.js
    // 定义城市、天气、温度、风级、图片,日期参数
    var defaultcity, getweather, gettemp, getwind, getpic, getdate
    var vurl = 'http://wthrcdn.etouch.cn/weather_mini?city='
    Page({
      data: {},
      // 初始化加载
      onLoad: function (e) {
        // 默认城市名称
        defaultcity = '长沙'
        this.weather()
      },
      // 动态获取input输入值 城市名称
      bindKeyInput: function (e) {
        defaultcity = e.detail.value
      },
      // 搜索城市
      search: function (e) {
        this.weather()
      },
      weather: function () {
        wx.showLoading({
          title: '加载中',
        })
        wx.request({
          url: vurl + defaultcity,
          success: res => {
            console.log(res.data)
            if (!res.data) {
              console.log('获取天气接口失败')
              return
            }
            getweather = res.data.data.forecast[0].high + '\n' + res.data.data.forecast[0].low
            gettemp = res.data.data.forecast[0].high
            getwind = res.data.data.forecast[0].fengxiang + ',' + res.data.data.forecast[0].fengli.replace(/<\!\[CDATA\[(.*)\]\]>/, '$1')
            getpic = ''
            getdate = res.data.data.forecast[0].date
            this.setData({
              city: defaultcity,
              weather: getweather,
              temp: gettemp,
              wind: getwind,
              pic: getpic,
              date: getdate
            })
            wx.hideLoading()
          }
        })
      }
    })
    

    不得不说这个免费的天气接口真的香,微信小程序的天气API封装的也不错,对于喜欢偷懒的我来说,真心比安卓开发香

    效果图

     

    展开全文
  • 小程序-天气预报简单应用版本。鉴于有些小伙伴对云开发不熟悉,就弄了个简单版的。 气象数据:和风天气,苹果app也是用和风天气sdk的哦。,自行去申请key密钥哦。 和风天气: 小程序合法域名配置: ...

    小程序-天气预报简单应用版本。
    气象数据和风天气,自行去申请key密钥哦,苹果自带的天气预报App也是用和风天气sdk哦。

    和风天气

    在这里插入图片描述

    小程序合法域名配置

    https://devapi.qweather.com
    https://geoapi.qweather.com
    在这里插入图片描述

    和风天气密钥key放app.js里面

    在这里插入图片描述

    案例截图

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    源码会持续更新到公众号,需要可以关注一下哦…
    在这里插入图片描述

    • 如上配置不懂的可留言或私信哦,谢谢~
    • 仅供学习参考,不作商业用途~
    展开全文
  • 使用百度地图API(源代码+截图)微信小程序demo:精品天气预报;使用百度地图API(源代码+截图)微信小程序demo:精品天气预报;使用百度地图API(源代码+截图)微信小程序demo:精品天气预报;使用百度地图API(源代码+...
  • 微信小程序实现天气预报,支持自动定位。
  • 十分钟开发网络API·天气查询小程序、天气查询,美观简约,简单易上手复习小程序项目的新建过程 掌握配置https域名的方式 使用微信网络请求能力获取天气预报 使用腾讯提供的网络通信API,调用第三方提供的API
  • 采用的接口是https://api.asilu.com/这个网站的 wether.js部分 var defaultcity, getweather, gettemp, getwind, getpic, getdate,updata Page({ data: {}, onLoad: function(e) { defaultcity = '集美' this...
  • 微信小程序显示天气预报

    千次阅读 2021-11-30 00:38:27
    1问题描述使用小程序使用天气api显示天气。2算法描述首先打开微信开发者工具创建一个新的小程序项目,但是可以不选择任何模板,进入新建的小程序,先将index中的js,wxml,wxss中的...
  • 微信小程序demo:天气预报;使用百度地图API74.zip
  • 采用高德地图微信小程序开发API(getWeather),如果 city 属性的值为空(或者没有city属性),默认返回定位位置的天气数据;如果 city 不为空,则返回 city 指定位置的天气数据。 WXML <view><text>城市:...
  • 微信小程序实现天气预报功能(附源码)

    万次阅读 多人点赞 2020-04-05 12:32:29
    目录前言效果图天气API获取微信小程序后台域名配置页面代码注意问题(必看) 前言 最近在学小程序开发,刚好学到天气预报功能的制作,于是给大家分享下。 效果图 天气API获取 这里我用的是和风天气的API,打开官网...
  • 目录前言效果图天气API获取微信小程序后台域名配置页面代码注意问题(必看)源码留言 前言 由于和风天气API的更新,之前写的那篇文章 可能会出现版本不兼容的 情况。所以 更新了 这个 使用新版API的 小程序。 效果图...
  • 微信小程序天气预报 说明: 实现了天气预报和生活指数,设置城市等功能。 数据接口: https://api.getweapp.com/thirdparty/heweather/now https://api.getweapp.com/thirdparty/heweather/suggestion 目录结构:...
  • 目录天气预报小程序源码,天气类微信小程序源码。API使用的是和风天气。可以提供实时全国天气气象信息,及时发布天气预报、灾害预警、气象云图、旅游天气、台风、暴雨雪等气象信息,为我国的生产生活提供全面精确的...
  • 通过微信小程序的天气项目预报api开发的一款简单的天气预报项目的源码,本源码涵盖了整个过程的实现方式,采用json数组获取数据,练习微信小程序的api和数据绑定
  • 天气预报小程序源码/天气类微信小程序源码 ☑️ 编号:ym444 ☑️ 品牌:无 ☑️ 语言:小程序 ☑️ 大小:348KB ☑️ 类型:天气预报 ☑️ 支持:小程序 欢迎关注(发消息才不限制),私信,领取 ✨ 源码介绍 天气...
  • 微信小程序项目实战之天气预报

    千次阅读 多人点赞 2018-02-16 08:26:10
    微信小程序项目实战之天气预报
  • 天气预报小程序源码,天气类微信小程序源码。API使用的是和风天气。可以提供实时全国天气气象信息,及时发布天气预报、灾害预警、气象云图、旅游天气、台风、暴雨雪等气象信息,为我国的生产生活提供全面精确的气象...
  • 天气预报小程序源码,天气类微信小程序源码。API使用的是和风天气。可以提供实时全国天气气象信息,及时发布天气预报、灾害预警、气象云图、旅游天气、台风、暴雨雪等气象信息,为我国的生产生活提供全面精确的气象...
  • 之前已经介绍过,如何使用百度地图api...微信小程序的百度地图获取地理位置 —— 微信小程序教程系列(15) 下面介绍使用百度api来获取天气信息。 1&gt; 第一步:先到百度开放平台http://lbsyun.baidu.com申请ak ...
  • 微信小程序demo'推荐:天气预报;百度地图,BootStrap(源代码+截图)微信小程序demo'推荐:天气预报;百度地图,BootStrap(源代码+截图)微信小程序demo'推荐:天气预报;百度地图,BootStrap(源代码+截图)微信小程序...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,334
精华内容 533
关键字:

微信小程序天气预报api

微信小程序 订阅