微信小程序关于天气页面制作（第3章）-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序关于天气页面制作（第3章）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、制作天气微信小程序
1.先创建一个天气“weather”小程序
2.进入index.wxml、index.js、index.wxss文件，清空所有的内容，进入app.json文件，
修改导航栏标题为“中国天气网”

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "中国天气网",
    "navigationBarTextStyle": "black"
  },

3.进入index.wxml文件，进行当天天气情况的界面布局，包括温度、最低温和最高温、
天气情况、城市、星期、风向情况。代码如下：

<view class="content">
<view class="today">
<view class="info">
<view class="temp">℃</view>
<view class="lowhigh"></view>
<view class="type"></view>
<view class="city"></view>
<view class="week"></view>
<view class="weather"></view>
    </view>
  </view>
</view>

4.进入index.ts文件，在data里提供天气的数据，让这些数据在界面里显示出来。
代码如下:

Page({
  data:{
    temp:"4",
    low:"-1℃",
    high:"10℃",
    type:"晴",
    city:"北京",
    week:"星期二",
    weather:"无持续风向，微风级"
  }
})

5.进入index.wxml文件，将data里提供天气情况的数据绑定到页面里。

<view class="content">
<view class="today">
<view class="info">
<view class="temp">{{temp}}℃</view>
<view class="lowhigh">{{low}}/{{high}}</view>
<view class="type">{{type}}</view>
<view class="city">{{city}}</view>
<view class="week">{{week}}</view>
<view class="weather">{{weather}}</view>

6.进入index.wxss文件，为index.wxml文件添加样式，美化页面。代码如下。

.content{
  font-family: 微软雅黑，宋体;
  font-size: 14px;
  background-size: cover;
  height: 100%;
  width:100%;
color: #333333;
}
.today{
  padding-top: 70rpx;
  height: 50%;
}
.temp{
  font-size: 80px;
  text-align: center;
}
.city{
  font-size: 20px;
  text-align: center;
  margin-top: 20rpx;
  margin-right: 10rpx;
}
.lowhigh{
  font-size: 12px;
  text-align: center;
  margin-top: 20rpx;
  margin-right: 10rpx;
}
.type{
  font-size: 16px;
  text-align: center;
  margin-top: 30rpx;
}
.week{
  font-size: 12px;
  text-align: center;
  margin-top: 20rpx;
}
.weather{
  font-size: 12px;
  text-align: center;
  margin-top: 20rpx;
}
.length{
  font-size: 12px;
  text-align: center;
  margin-top: 20rpx;
}