菜单

天气预报开发实例代码源码_JavaScript_脚本之家

2020年3月30日 - www.2138.com

正文实例为我们狼吞虎咽了Wechat小程序达成天气预测效能的实际代码,供大家参照他事他说加以考查,具体内容如下

Wechat小程序 天气预测

这些案例是仿UC中天气界面做的高级中学级也许有一点点出入,预先流出了突显当前城市名字和刷新Logo的任务,自个儿能够写下,也得以增多搜索城市。值得注意的是百分百那些装置好像早已倒霉使了,能够经过得到道具的冲天通过数量绑定设置中度。地址:weather

机关定位所在城市 依照所一向的城市得到天气音信 突显今后几天的天气意况查看当每一日气的详细情况音讯

首先有的

Wechat小程序-天气 首页

www.2138.com,此地是留下的一块可以活动增加补充下

天气预报开发实例代码源码_JavaScript_脚本之家。Wechat小程序-气候 详细情况页

其次有的:

思路及编码部份自动定位所在城市

    {{currentTemperature}}       {{nightAirTemperature}}  /  {{dayAirTemperature}}    {{weather}}   

wx.getLocation:通过法定文书档案的API中得以看到wx.getLocation能够获得到当前的地理地点和速度,然则获取到的地理地方只是经纬度,并非真正的城市名称,但大家得以依赖那个经纬度来博取城市称号等音信,再通过城市名称和都市ID获取相应的气象新闻。

其三片段:

在.js逻辑层扩大函数:

       {{aqi}}  {{quality}}    {{windPower}}  {{windDirection}}  
data:{ weatherApikey:'', //天气apikey,在http://apistore.baidu.com 上申请 city:'', //城市名称 areaid:'', //城市对应的id curWd:{}, //当天天气情况 indexs:{}, //当天天气详情说明 forecast:{} //未来4天的天气情况},onLoad:function{ // 生命周期函数--监听页面加载 this.setData({weatherApikey:getApp().globalData.weatherApikey}); this.loadLocation();},//获取当前的位置信息,即经纬度loadLocation: function() { var page = this; wx.getLocation({ type: 'gcj02', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标 success: function{ // success var latitude = res.latitude; var longitude = res.longitude; //获取城市 page.loadCity; } })},//通过经纬度获取城市loadCity: function { var page = this; //这个key是自己在http://apistore.baidu.com上申请的 var key = "XSWBZ-EVQ3V-UMLPA-U4TP6-6MQFZ-UUFSL"; var url = "http://apis.map.qq.com/ws/geocoder/v1/?location="+latitude+","+longitude+"&key="+key+"&get_poi=1"; wx.request({ url: url, data: {}, method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT // header: {}, // 设置请求的 header success: function{ // success var city = res.data.result.address_component.city; city = city.replace; //将“市”去掉,要不然取不了天气信息 page.setData; page.loadId},//通过城市名称获取城市的唯一IDloadId: function { var page = this; var url = "http://apis.baidu.com/apistore/weatherservice/citylist"; wx.request({ url: url, data: { cityname: city }, header: { apikey:page.data.weatherApikey }, method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT success: function{ // success var cityid = res.data.retData[0].area_id; page.setData; page.loadWeather},//通过城市名称和城市ID获取天气情况loadWeather: function { var page = this; var url = "http://apis.baidu.com/apistore/weatherservice/recentweathers"; wx.request({ url: url, data: { cityname:city, cityid: areaId }, header: { apikey: page.data.weatherApikey }, method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT success: function{ // success page.setData({curWd : res.data.retData.today, indexs: res.data.retData.today.index, forecast:res.data.retData.forecast}); } })},//事件绑定,跳转到天气详情页面gotoDetail: function {// console.log(this.data.areaid+"==在这里跳转=="+this.data.city);wx.navigateTo({ url: '../detail/detail?city='+this.data.city+"&citybrush:xml;">                

第四有的:

证实:在这里地运用了Wechat的片段零部件,如:view:视图容器;block:不会在页面上预先流出任韩平西,循环时使用那么些不会追加额外的价签;template:援用模板;import:导入模板音信,唯有导入后才干援用;{{}}:援用数据;wx:for:循环。

      星期一 星期二 星期三 星期四 星期五 星期六 星期日  {{item.night_air_temperature}}  / {{item.day_air_temperature}}   

//index.js//获取应用实例var app = getApp()Page({ data: { //加载状态 loadingHidden: false, //当前温度 currentTemperature: '', //夜间温度 nightAirTemperature: '', //白天温度 dayAirTemperature: '', //当前天气 weather: '', //污染指数 aqi: '', //污染程度 quality: '', //风力 windPower: '', //风向 windDirection: '', //因为数据返回不是数组所以要自己封装一个数组 list: [], height: 0, }, onLoad: function () { console.log var that = this //100%好像不好使 可以获取设备高度 wx.getSystemInfo({ success: function  { that.data.height = res.windowHeight; } }) wx.getLocation({ success: function  { //通过经纬度请求数据 wx.request({ //这个网站有免费API赶紧收藏 url: 'http://route.showapi.com/9-5', data: { showapi_appid: '11697', showapi_sign: '6c0c15c5ec61454dac5288cea2d32881', // from: '5', lng: res.longitude, lat: res.latitude, //获取一周情况 0是不获取 needMoreDay: '1', needIndex: '1' }, success: function  { console.log console.log(res.data.showapi_res_body.now.api) that.setData({ //改变加载状态 loadingHidden: true, currentTemperature: res.data.showapi_res_body.now.temperature, nightAirTemperature: res.data.showapi_res_body.f1.night_air_temperature, dayAirTemperature: res.data.showapi_res_body.f1.day_air_temperature, weather: res.data.showapi_res_body.now.weather, aqi: res.data.showapi_res_body.now.aqi, quality: res.data.showapi_res_body.now.aqiDetail.quality, windPower: res.data.showapi_res_body.now.wind_power, windDirection: res.data.showapi_res_body.now.wind_direction, //拼接数组 list: [ { 'day_weather_pic': res.data.showapi_res_body.f1.day_weather_pic, 'weekday': res.data.showapi_res_body.f1.weekday, 'day_air_temperature': res.data.showapi_res_body.f1.day_air_temperature, 'night_air_temperature': res.data.showapi_res_body.f1.night_air_temperature }, { 'day_weather_pic': res.data.showapi_res_body.f2.day_weather_pic, 'weekday': res.data.showapi_res_body.f2.weekday, 'day_air_temperature': res.data.showapi_res_body.f2.day_air_temperature, 'night_air_temperature': res.data.showapi_res_body.f2.night_air_temperature }, { 'day_weather_pic': res.data.showapi_res_body.f3.day_weather_pic, 'weekday': res.data.showapi_res_body.f3.weekday, 'day_air_temperature': res.data.showapi_res_body.f3.day_air_temperature, 'night_air_temperature': res.data.showapi_res_body.f3.night_air_temperature }, { 'day_weather_pic': res.data.showapi_res_body.f4.day_weather_pic, 'weekday': res.data.showapi_res_body.f4.weekday, 'day_air_temperature': res.data.showapi_res_body.f4.day_air_temperature, 'night_air_temperature': res.data.showapi_res_body.f4.night_air_temperature }, { 'day_weather_pic': res.data.showapi_res_body.f5.day_weather_pic, 'weekday': res.data.showapi_res_body.f5.weekday, 'day_air_temperature': res.data.showapi_res_body.f5.day_air_temperature, 'night_air_temperature': res.data.showapi_res_body.f5.night_air_temperature }, { 'day_weather_pic': res.data.showapi_res_body.f6.day_weather_pic, 'weekday': res.data.showapi_res_body.f6.weekday, 'day_air_temperature': res.data.showapi_res_body.f6.day_air_temperature, 'night_air_temperature': res.data.showapi_res_body.f6.night_air_temperature }, { 'day_weather_pic': res.data.showapi_res_body.f7.day_weather_pic, 'weekday': res.data.showapi_res_body.f7.weekday, 'day_air_temperature': res.data.showapi_res_body.f7.day_air_temperature, 'night_air_temperature': res.data.showapi_res_body.f7.night_air_temperature } ] }) } }) } }) }})

.container { display: flex; flex-direction: column; justify-content: space-between;}.newTopView { display: flex; flex-direction: row; justify-content: space-between;}/* 头部样式上半部分*/.topView { flex-direction: column; align-self: center; margin-top: -450rpx;}/*当前度数样式*/.degreeView { flex-direction: row; position: relative;}/*当前温度度数图标*/.circle { width: 35rpx; height: 35rpx; position: absolute; left: 130rpx;} /*当前度数数组*/.degree { color: white; font-size: 130rpx}/*详细View样式*/.detailInfoView { flex-direction: row;}/*当前最高和最低温度度数图标*/.detailInfoCircle { width: 20rpx; height: 20rpx; position: absolute; left: 30rpx;} /*当前度数数组*/.detailInfoDegree { color: white; font-size: 30rpx}/*斜线*/.detailInfoLine { color: white; margin-left: 15rpx; font-size: 30rpx;}/*比如阴天 晴天,暴雨*/.detailInfoName { font-size: 30rpx; color: white; margin-left: 20rpx; align-self: center}/*中间view样式*/.centerView { display: flex; flex-direction: row; margin-top: -550rpx; justify-content: center; align-items: center;}/*中间view分为两个view*/.centerItem { display: flex; flex-direction: row; align-items: center; justify-content: center;}/*Item中图片样式*/.centerItemImage { width: 25rpx; height: 25rpx;}/*文字样式*/.centerItemText { font-size: 28rpx; color: white;}/*底部view样式*/.bottomView { margin-top: -200rpx; display: flex; flex-direction: row; justify-content: space-around; align-items: center;}.bottomItemView { display: flex; flex-direction: column; align-items: center; margin-bottom: 200rpx;}/*最近七天样式*/.bottomImage { width: 70rpx; height: 70rpx;}.bottomText { font-size: 28rpx; color: white;}

模板文件

开垦者工具不可能展现难点:是因为View未有拿走惊人,默许个惊人或许直接校订wxml中height中度就可以。

模板文件其实正是wxml文件

别的,本站在线工具小程序上有一款天气查询工具,还增多了都会采用的效果,感兴趣的爱侣能够扫描如下小程序码查看:

  {{city}} {{curWd.date}} {{curWd.week}} {{curWd.curTemp}} {{curWd.type}} {{curWd.lowtemp}}/{{curWd.hightemp}} {{curWd.wd}} 

以上就是本文的全体内容,希望对大家的求学抱有利于,也愿意大家多多照看脚本之家。

当心:关于模板的描述可以参见官方文书档案模板和引用。

源码下载:

别的,本站在线工具小程序上有一款气候查询工具,工具中还加多了都市政委员会大选择切换的效应,感兴趣的爱人能够扫描如下小程序码查看:

多谢阅读,希望能支持到大家,多谢大家对本站的支撑!

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图