这个是记录微信小程序的学习,开发一款今日天气
目前完成

  • 获取实时位置信息并显示天气信息
  • 手动选择位置信息并获取天气

所用api来自和风天气,请自行注册key,代码中的key皆用****表示。

新建项目

打开微信开发工具

删除所有内容

删除初始化所有内容并新建app.jsonapp.jsapp.wxss,在新建的app.json中输入{}并保存。

新建page

pages/index目录下右键新建page

文件作用

  • js:页面逻辑 (JavaScript)
  • json:负责标题栏和一些状态栏
  • wxml:管理页面有什么 (html)
  • wxss:页面排版 (css)

修改标题栏

修改app.json文件,输入window

编写index.wxml内容

相当于编写小程序页面有什么内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<view class="container">
<!-- 区域一 选择器 -->
<picker mode="region" bindchange="ChangeRegion">
<view>{{region}}</view>
</picker>
<!-- 区域二 文本区 -->
<text>{{now.temp}} ℃ {{now.text}}</text>
<!--区域三 图片 -->
<image src="../../images/{{now.icon}}.png"></image>
<!-- 区域四 天气信息 -->
<view class="detail">
<view class="bar">
<view class="box">湿度</view>
<view class="box">气压</view>
<view class="box">能见度</view>
</view>
<view class="bar">
<view class="box">{{now.humidity}} %</view>
<view class="box">{{now.pressure}} hPa</view>
<view class="box">{{now.vis}} Km</view>
</view>
<view class="bar">
<view class="box">风向</view>
<view class="box">风速</view>
<view class="box">风力</view>
</view>
<view class="bar">
<view class="box">{{now.windDir}}</view>
<view class="box">{{now.windSpeed}} Km/h</view>
<view class="box">{{now.windScale}} 级</view>
</view>
</view>
</view>

编写逻辑代码index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
Page({
data: {
region:["北京市","北京市","东城区"],
location:"",
now:{"icon":999}
},
onLoad:function(){
this.getnowlocation();
},
ChangeRegion:function(e){
this.setData({
region:e.detail.value
})
this.getLocation()
},
getLocation:function(){
var that=this;
wx.request({
url: 'https://geoapi.qweather.com/v2/city/lookup?',
data:{
key:'****',
location:that.data.region[2]
},
success:function(res){
that.setData({location:res.data.location[0].id});
that.getWeather();
}
})
},
getnowlocation:function(){
var that=this;
wx.getLocation({
type:'wgs84',
success (res) {
that.setData({location:res.longitude+","+res.latitude})
that.setCity();
that.getWeather();
}
})
},
setCity:function(){
var that=this;
wx.request({
url: 'https://geoapi.qweather.com/v2/city/lookup?',
data:{
key:'****',
location:that.data.location
},
success:function(res){
console.log(res.data.location[0])
that.setData({
region:[res.data.location[0].adm1,res.data.location[0].adm2,res.data.location[0].name]
})
}
})
},
getWeather:function(){
var that=this;
wx.request({
url: 'https://devapi.qweather.com/v7/weather/now?',
data:{
key:'****',
location:that.data.location
},
success:function(res){
that.setData({now:res.data.now})
}
})
}
})

编写排版文件index.wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.container{
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.detail{
width: 100%;
display: flex;
flex-direction: column;
}
.bar{
margin: 20rpx 0;
display: flex;
flex-direction: row;
}
.box{
width: 33.3%;
text-align: center;
}

最终样式

加入了打开时获取当前位置信息,需要授权位置信息获取权限,稍后可以手动选择查询位置