这个案例是仿UC中天气界面做的中间也有点出入，预留了显示当前城市名字和刷新图标的位置，自己可以写下，也可以添加搜索城市。值得注意的是100%这个设置好像已经不好使了，可以通过获取设备的高度通过数据绑定设置高度。地址：weather
界面主要分为四部分：
第一部分
这里是预留的一块可以自行添加补充下
<view> <!--左边添加当前城市名字，点击跳转选择城市 右边添加刷新当前天气--> </view>
第二部分：
<view> <view> <!--当前温度--> <text>{{currentTemperature}}</text> <!--度数图标--> <image src=""></image> </view> <view> <view> <!--夜间天气情况--> <text>{{nightAirTemperature}}</text> <image src="" /> <text>/</text> <!--白天天气--> <text>{{dayAirTemperature}}</text> <!-- style优先级比class高会覆盖class中相同属性 --> <image src="" /> <!-- 当前天气名字 --> <text>{{weather}}</text> </view> </view> </view>
第三部分：
<!-- 中间部分 --> <view> <view> <image src="" /> <!-- 相同属性抽出来！ --> <!--污染指数--> <text>{{aqi}}</text> <!--污染指数对应name--> <text>{{quality}}</text> </view> <view> <image src="" /> <text>{{windPower}}</text> <!--风--> <text>{{windDirection}}</text> </view> </view>
第四部分：
<!-- 底部view --> <view> <!--数据返回的不是数组 在js中拼接的数组--> <block wx:for-items="{{list}}"> <view> <image src="https://www.jb51.net/{{item.day_weather_pic}}" /> <text wx:if="{{item.weekday == 1}}">星期一</text> <text wx:elif="{{item.weekday == 2}}">星期二</text> <text wx:elif="{{item.weekday == 3}}">星期三</text> <text wx:elif="{{item.weekday == 4}}">星期四</text> <text wx:elif="{{item.weekday == 5}}">星期五</text> <text wx:elif="{{item.weekday == 6}}">星期六</text> <text wx:else="{{item.weekday == 7}}">星期日</text> <view> <text>{{item.night_air_temperature}}</text> <image src="" /> <text>/</text> <text>{{item.day_air_temperature}}</text> <!-- style优先级比class高会覆盖class中相同属性 --> <image src="" /> </view> </view>
js
//index.js //获取应用实例 var app = getApp() Page({ data: { //加载状态 loadingHidden: false, //当前温度 currentTemperature: '', //夜间温度 nightAirTemperature: '', //白天温度 dayAirTemperature: '', //当前天气 weather: '', //污染指数 aqi: '', //污染程度 quality: '', //风力 windPower: '', //风向 windDirection: '', //因为数据返回不是数组所以要自己封装一个数组 list: [], height: 0, }, onLoad: function () { console.log('onLoad') var that = this //100%好像不好使 可以获取设备高度 wx.getSystemInfo({ success: function (res) { that.data.height = res.windowHeight; } }) wx.getLocation({ success: function (res) { //通过经纬度请求数据 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 (res) { console.log(res) 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 } ] }) } }) } }) } })
wxss