1.在app.json文件的pages数组里加上main文件夹和template（模板）文件夹的路径。
2.在main.js文件中，在onLoad()函数中调用loadInfo()函数。
3. 自定义获取位置的函数loadInfo()，调用wx.getLocation，用于获取当前的纬度（latitude）和经度（longitude）。在loadInfo()函数中接着调用loadCity()函数。
4. 自定义获取城市的函数loadCity()，调用wx.request，在“百度地图开放平台”网站中注册自己的AK，通过获取城市信息的网址（http://api.map.baidu.com/geocoder/v2/?ak=自己的ak&location=纬度值,经度值&output=json）实现当前城市名称的获取。
在loadCity()函数中接着调用loadWeather()函数。
5.自定义获取天气的函数loadWeather(),根据已有的城市名称，通过获取天气信息的网址（http://wthrcdn.etouch.cn/weather_mini?city=城市名）实现天气信息的数据获取。
6.在main.wxml文件中，销扰未来天气部分通过import调用了自定义模亏旦旦板文件itemtpl.wxml。
然后分析项目中文件的源码。
app.json文件的代码如下：
{
"pages":[
"pages/main/main",
"pages/template/itemtpl",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"迟肆light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "天气",
"navigationBarTextStyle":"black"
}
}
main.wxml的代码如下：
<view class='cont'>
<!-- 今日天气-->
<view class='today'>
<view class='info'>
<view class='tempe'>{{today.wendu}}°C</view>
<view class='weather'>{{today.todayInfo.type}}{{today.todayInfo.fengxiang}}</view>
<view>温馨提示：{{today.ganmao}}</view>
<view class='city'>{{city}}</view>
</view>
</view>
<!-- 未来天气-->
<import src="../template/itemtpl"/>
<view class='future'>
<block wx:for="{{future}}">
<template is="future-item" data="{{item}}"/>
</block>
</view>
</view>
main.wxss文件的代码如下：
/**/
.cont{
font-size:30rpx
width:100%
height:100%
}
.today{
padding:50rpx 0 0 0
height:50%
}
.info{
padding:20rpx
background:rgba(0,0,0,.8)
line-height: 1.5em
color:#eee
}
.tempe{
font-size:90rpx
text-align: center
margin:30rpx 0
}
.weather{
text-align: center
}
.city{
font-size:40rpx
color:#f60
text-align: right
margin: 30rpx 10rpx 0 0
}
.future{
display:flex
flex-direction: row
height:100%
padding:20rpx 0 20rpx 10rpx
background:rgba(0,0,0,.8)
text-align: center
margin:50rpx 0 70rpx 0
color:#eee
}
.future-item{
min-height: 100%
width:160rpx
margin: 0 10rpx
border:solid 1px #f90
padding:10rpx 0 0 0
line-height:2em
}
main.js文件的代码如下：
//
Page({
data: {
// weatherData:''
city:"" ,
today:{},
future:{},
},
onLoad: function () {
this. loadInfo()
},
//自定义获取位置
loadInfo:function(){
var page=this
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: function (res) {
var latitude = res.latitude
var longitude = res.longitude
console.log(latitude, longitude)
page.loadCity(latitude, longitude)
}
})
} ,
//自定义获取城市
loadCity: function (latitude, longitude){
var page = this
wx.request({
url: 'http://api.map.baidu.com/geocoder/v2/?ak=自己的AK &location=' + latitude + ',' + longitude + '&output=json',
header: {
'content-type': 'application/json'
},
success: function (res) {
console.log(res)
var city=res.data.result.addressComponent.city
city=city.replace("市","")
page.setData({
city:city
})
page.loadWeather(city)
}
})
},
//自定义获取天气
loadWeather: function (city) {
var page = this
wx.request({
url: 'http://wthrcdn.etouch.cn/weather_mini?city=' + city,
header: {
'content-type': 'application/json'
},
success: function (res) {
console.log(res)
var future=res.data.data.forecast
var todayInfo=future.shift()
var today=res.data.data
today.todayInfo=todayInfo
page.setData({
today:today,
future:future,
})
}
})
}
})
itemtpl.wxml的代码如下：
<!-- 模板文件-->
<template name="future-item">
<view class="future-item">
<view>{{item.date}}</view>
<view>{{item.type}}</view>
<view>{{item.fengxiang}}</view>
<view>{{item.low}}</view>
<view>{{item.high}}</view>
</view>
</template>
至此，案例制作完成。
1. 首先如果我们想要加天气情况添加到手机桌面上我们就需要先在手机中下载一个天气软件华为手机是自带的天气软件所以我们可以直接在桌面上找到这个天气图标点击打开2.然后我们返回到手机桌面，进入到手机桌面之后我巧物败们用两个手指按住屏幕然后同时向中间靠拢接下来桌面就会进入到设置模式
3. 进入到桌面的设置模式之后我们就可以在桌面的下方找到小窗口小工具的图标点击这个图标
4. 然后我们就可以在下方找到所有的窗口小工具的图标接下来我们在图标中找到天气应用的小工具点击选中这个小工具
5. 接下来我们看到上方的手机桌面界面孝颤然后在这个界面中通过左右滑动调整手机桌面，找到我们想要放置天气情况的桌面
6. 然后我们就可以按住下方的天气小工具然后将工具拖动到手机桌面中了
拖动完成之后我们就可以点击home键然后返回到桌面，接下来我们就可以直接在蚂誉界面上查看天气情况了
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）