js文件

const app = getApp();
Component({data: {icon: '',name: '1',province: '',location_city: '',// get_time: '',cue_word: '',tmp: '',cond_txt: '',wind_dir: '',wind_sc: '',fl: '',tmp_max: '',tmp_min: '',cond_code_d: '',cond_txt_d: '',tmp_max_m: '',tmp_min_m: '',cond_code_d_m: '',cond_txt_d_m: '',hum: '',cloud: '',pres: '',vis: '',wind_deg: '',pcpn: '',wind_spd: '',future: [],lifeindex: [],showModal: true, // 显示modal弹窗single: true// true 只显示一个按钮，如果想显示两个改为false即可},lifetimes: {created: function(){var options={};this.weiZhi(options);}},onPullDownRefresh: function () {var that = this;var options = {};that.weiZhi(options);wx.stopPullDownRefresh();},methods: {
//获取用户位置（经纬度）
weiZhi: function (options) {console.log("--------"+options);var truedata = JSON.stringify(options);var that = this;truedata == '{}';if (truedata == '{}') {wx.getLocation({type: 'wgs84',success(res) {var latitude = res.latitudevar longitude = res.longitudewx.setStorageSync("latitude", latitude);wx.setStorageSync("longitude", longitude);that.getUserCity(latitude, longitude);},})} else {var latitude = options.lat;var longitude = options.lng;wx.setStorageSync("latitude", latitude);wx.setStorageSync("longitude", longitude);that.getUserCity(latitude, longitude);}
},//获取用户地理位置（城市）
getUserCity: function (latitude, longitude) {wx.showLoading({title: '加载中...',mask: true,});var that = this;// var lat = wx.getStorageSync('latitude');// var longit = wx.getStorageSync('longitude');wx.request({method: "POST",url: app.globalData.apiUrl + '/GetCityName', data: {latitude: latitude,longitude: longitude,},header: {'content-type': 'application/json' // 默认值},success(res) {if (res.data.code == 1) {that.setData({location_city: res.data.data.location_city,province: res.data.data.province,// get_time: res.data.data.gettime,cue_word: res.data.data.cue_word,});that.getWeatherList(latitude, longitude);} else {wx.hideLoading();wx.showToast({title: '请下拉刷新或重新进入小程序',icon: 'none',duration: 5000});}}})
},//获取用户天气集合预报
getWeatherList: function (latitude, longitude) {var that = this;// var latitudes = wx.getStorageSync('latitude');// var longitudes = wx.getStorageSync('longitude');wx.request({method: "POST",url: app.globalData.apiUrl + '/WeatherGather',data: {latitude: latitude,longitude: longitude,},header: {'content-type': 'application/json' // 默认值},success(res) {// console.log(res.data)if (res.data.code == 1) {// console.log(1)that.setData({tmp: res.data.data.tmp,cond_txt: res.data.data.cond_txt,wind_dir: res.data.data.wind_dir,wind_sc: res.data.data.wind_sc,hum: res.data.data.hum,cloud: res.data.data.cloud,pres: res.data.data.pres,vis: res.data.data.vis,wind_deg: res.data.data.wind_deg,pcpn: res.data.data.pcpn,wind_spd: res.data.data.wind_spd,fl: res.data.data.fl,tmp_max: res.data.weather[0].tmp_max,tmp_min: res.data.weather[0].tmp_min,cond_txt_d: res.data.weather[0].cond_txt_d,cond_code_d: res.data.weather[0].cond_code_d,tmp_max_m: res.data.weather[1].tmp_max,tmp_min_m: res.data.weather[1].tmp_min,cond_txt_d_m: res.data.weather[1].cond_txt_d,cond_code_d_m: res.data.weather[1].cond_code_d,future: res.data.weather,lifeindex: res.data.lifeindex,});wx.hideLoading();} else {wx.hideLoading();wx.showToast({title: '请下拉刷新或重新进入小程序',icon: 'none',duration: 5000});}}})
},// 点击生活指数
click_button: function (e) {// console.log(e);wx.showModal({title: '温馨提示',content: e.currentTarget.dataset.name,showCancel: false,confirmText: '我知道了',confirmColor: '#6666FF',});
},// 定位
search: function () {wx.navigateTo({url: '../../components/search/search',})
},}
})

wxml文件

<cu-custom bgColor="bg-gradual-blue"><view slot="content">天气</view>
</cu-custom>
<view class="zong">
<view class='yetou'><view class='heads'><!-- 顶部 --><view class='title-top'><!-- 位置 --><view class='dlwz' bindtap='search'><text>{{province}}</text><text style='margin-left:10px;'>{{location_city}}</text></view></view><!-- pm2.0 --><view class='title-zj'><!-- 污染 --><view class='wuran'><text style='display:block;'>{{fl}}℃</text><text style='display:block;'>体感温度</text></view></view><!-- 温度详情 --><view class='title-xb'><!-- 温度 --><view class='wendu'><text class='sheshidu'>{{tmp}}</text></view><!-- 多云 --><view class='duoyun'><text class='weather'>{{cond_txt}}</text></view><!-- 风向 --><view class='feng'><text class='wind'>{{wind_dir}} {{wind_sc}}级</text></view></view></view>
</view><!-- boby -->
<view class='bobys'><!-- 空白 --><!-- <view class='blanks'></view> --><!-- 天气预报 --><view class='freddy'><!-- 左边 --><view class='left_weather'><view class='today'><text class='tqyb'>今天</text><text class='tqyb'>{{tmp_min}}/{{tmp_max}}℃</text></view><view class='today'><text class='tqyb'>{{cond_txt_d}}</text><view class='tqyb'><image class='tqybs' src='{{cond_code_d}}'></image></view></view></view><!-- 右边 --><view class='right_weather'><view class='today'><text class='tqyb'>明天</text><text class='tqyb'>{{tmp_min_m}}/{{tmp_max_m}}℃</text></view><view class='today'><text class='tqyb'>{{cond_txt_d_m}}</text><view class='tqyb'><image class='tqybs' src='{{cond_code_d_m}}'></image></view></view></view></view>
<!-- 三天天气状况 -->
<view class='ThreeWeather'>
<block wx:for="{{future}}" wx:key="index"><view class='futrue-item'><text>{{item.date}}</text><!-- <text>日出{{item.sr}}</text><text>日落{{item.ss}}</text> --><text>{{item.cond_txt_d}}</text><image class='pic_img' src='{{item.cond_code_d}}'></image><!-- <text>{{item.tmp_max}}℃(最高)</text><text>{{item.tmp_min}}℃(最低)</text> --><text>{{item.tmp_min}}℃/{{item.tmp_max}}℃</text><!-- <image class='pic_img' src='{{item.cond_code_n}}'></image> --><!-- <text>{{item.cond_txt_n}}</text> --><!-- <text>月升{{item.mr}}</text><text>月落{{item.ms}}</text> --><text>{{item.wind_dir   }}</text><view><image class="img" src="https://file.tlzcf.vip/feng.png"></image><text>{{item.wind_sc}}级</text></view></view>
</block>
</view>
<view class="hengxian"></view>
<!-- 天气状况 -->
<scroll-view class='weather_state' scroll-x="true"><view class='y_items'><text>{{hum}}%</text><image style='width:60rpx;height:60rpx;' src='https://file.tlzcf.vip/wetness.png'></image><text>相对湿度</text></view><view class='y_items'><text>{{cloud}}%</text><image style='width:60rpx;height:60rpx;' src='https://file.tlzcf.vip/yun.png'></image><text>总云量</text></view><view class='y_items'><text>{{pres}}pa</text><image style='width:60rpx;height:60rpx;' src='https://file.tlzcf.vip/pa.png'></image><text>大气压强</text></view><view class='y_items'><text>{{vis}}km</text><image style='width:60rpx;height:60rpx;' src='https://file.tlzcf.vip/mor.png'></image><text>能见度</text></view><view class='y_items'><text>{{wind_deg}}°</text><image style='width:60rpx;height:60rpx;' src='https://file.tlzcf.vip/wdir.png'></image><text>风向角度</text></view><view class='y_items'><text>{{pcpn}}mm</text><image style='width:60rpx;height:60rpx;' src='https://file.tlzcf.vip/water.png'></image><text>降水量</text></view><view class='y_items'><text>{{wind_spd}}km/h</text><image style='width:60rpx;height:60rpx;' src='https://file.tlzcf.vip/wind.png'></image><text>今日风速</text></view>
</scroll-view>
<!-- 生活指数 -->
<view class='indexlife'>
<block wx:for="{{lifeindex}}" wx:key="index">
<view class='zhishu' bindtap='click_button' data-name='{{item.txt}}'><image class='lifeindex_pic' src='{{item.type}}'></image><text>{{item.brf}}</text><!-- <text style='font-size:10px;'>{{item.file}}</text> -->
</view>
</block>
</view>
</view>
</view>

WXSS文件

/**index.wxss**/
page {width: 100%;height: 100%;margin-bottom: 20%;
}.img {width: 15px;height: 15px;margin-right: 5px;
}
.zong{background-color: #0DB1EE;
}
.yetou {width: 100%;height: 300px;
}.heads {width: 100%;height: 300px;
}.title-top {width: 100%;height: 45px;
}.title-zj {width: 100%;height: 50px;color: aliceblue;
}.wuran {font-size: 13px;text-align: center;width: 18%;height: 38px;float: left;margin-top: 8px;margin-left: 3%;background-color: rgba(0, 0, 0, 0.2);border-radius: 15px;
}.title-xb {width: 100%;height: 190px;margin-top: 20px;
}.sheshidu {width: 100%;height: 300rpx;display: block;margin: 0 auto;font-size: 100px;color: white;text-align: center;
}.wendu {width: 100%;height: 100px;
}.duoyun {width: 100%;height: 70rpx;margin-top: 30px;
}.weather {width: 20%;height: 60rpx;display: block;margin: 0 auto;font-size: 18px;color: white;text-align: center;
}.feng {width: 100%;height: 20px;margin-top: 10px;
}.wind {width: 21%;height: 40rpx;display: block;margin: 0 auto;font-size: 15px;color: white;text-align: center;
}.hint {width: 60%;height: 80rpx;display: block;text-align: center;color: white;font-size: 15px;margin: 0 auto;
}.dlwz {width: 100%;height: 23px;text-align: center;font-size: 15px;color: white;padding-top: 40rpx;
}.dlwztp {width: 20px;height: 20px;float: left;
}.bobys {margin: 2%;margin-top: 100px;width: 96%;color: #fff;
}.freddy {display: flex;justify-content: center;width: 100%;height: 100rpx;font-size: 14px;
}.left_weather {width: 50%;height: 100rpx;float: left;border-right: 0.1px solid #99afcc;
}.right_weather {width: 48%;height: 100rpx;float: left;
}.today {width: 100%;height: 50rpx;
}.tqyb {width: 50%;height: 50rpx;text-align: center;float: left;
}.tqybs {width: 45rpx;height: 45rpx;
}.weather_state {display: flex;font-size: 14px;white-space: nowrap;margin: 40px 2% 50px 2%;
}::-webkit-scrollbar {display:none;width:0;height:0;color:transparent;
}.y_items {width: 140rpx;height: 160rpx;flex-direction: column;justify-content: space-between;display: inline-flex;align-items: center;
}.ThreeWeather {margin: 50px 2% 40px 2%;width: 96%;height: 400rpx;display: flex;flex-direction: row;font-size: 14px;justify-content: center;
}.hengxian {width: 100%;height: 0.1px;border-top: 0.1px solid #99afcc;
}.futrue-item {width: 33%;height: 400rpx;display: flex;flex-direction: column;align-items: center;justify-content: space-between;
}.pic_img {width: 60rpx;height: 60rpx;
}.indexlife {border-radius: 15px;margin: 20px 2%;width: 96%;height: 385rpx;display: flex;flex-wrap: wrap;justify-content: center;background-color: rgba(255, 255, 255, 0.2);padding-bottom: 80%;
}.lifeindex_pic {width: 60rpx;height: 60rpx;
}.zhishu {display: flex;flex-direction: column;justify-content: space-around;align-items: center;width: 24%;height: 190rpx;font-size: 14px;flex-grow: 1;
}

线上小程序效果：

天气微信小程序相关代码相关推荐

关于微信小程序相关内容
微信小程序相关内容 1.简单描述下微信⼩程序的相关⽂件类型首先,你在app.json里面的pages下面配置一个地址,它就会自动生成一个文件夹,写在最前面的就是默认的主页面. 自动生成的文件夹里面主 ...
通过调试微信小程序示例代码解析flex布局参数功能(一)
通过调试微信小程序示例代码解析flex布局参数功能官方示例小程序源代码下载地址:https://github.com/wechat-miniprogram/miniprogram-demo 通过调试 ...
写一个微信小程序的代码
微信小程序是使用小程序框架开发的,主要使用 WXML 和 WXSS 两种语言构建用户界面,使用 JavaScript 来编写逻辑. 以下是一个简单的微信小程序示例代码: <!-- index.w ...
微信小程序实现代码高亮
预览老规矩,先上效果图. 看起来效果还不错,实名感谢日出一点一这位小哥的教程. 因为,当搜索微信小程序实现代码高亮后,结果基本都是微信小程序搜索,关键词高亮这一类的.Onz ,这可真是在 ...
微信小程序视频播放代码
微信小程序视频播放代码 1.index.wxml 2.index.wxss 3.index.js 4.小程序具体属性说明用法详见微信小程序官方文档video部分
“微天气”微信小程序实战开发过程
本文节选自高洪涛撰写的<从零开始学微信小程序开发>一书,由电子工业出版社出版. 责编:陈秋歌,关注微信开发等领域,寻求报道或者投稿请发邮件至chenqg#csdn.net. 在智能手机软件 ...
实时更新天气微信小程序开发
1.新建一个天气weather项目 2.在app.json中创建一个路由页面当我们点击保存的时候,微信小程序会自动的帮我们创建好页面 3.在weather页面上书写我们的骨架 4.此时我们的页面很 ...
天气微信小程序源码，附上线教程
博主之前发布过一篇文章,微信小程序源码合集500套.不少友友反馈很多都用不了,这里博主给大家道个歉,因为博主也是花钱网上收集到的源码,来给大家免费下载,内容之多也不可能一个个去测试它的可用性.而且博主 ...
微信小程序相关知识点和云音乐项目制作遇到的问题及解决
小程序项目想下载项目的可以下载看看~ 下载地址 github地址: https://github.com/superBiuBiuMan/Wechat_NetEase_CloudMusic gitee地 ...

天气微信小程序相关代码

js文件

wxml文件

WXSS文件

线上小程序效果：

天气微信小程序相关代码相关推荐

最新文章

热门文章