微信小程序案例2——天气微信小程序（学会绑定数据）

---

一、项目步骤

1 创建一个weather项目

2 进入index.wxml、index.js、index.wxss文件，清空所有内容，进入App.json，修改导航栏标题为“中国天气网”。

app.json

{"pages":["pages/index/index"],"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.js，在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></view></view>
</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: 30rpx;
}
.type{font-size: 16px;text-align: center;margin-top: 30rpx;
}
.week{font-size: 12px;text-align: center;margin-top: 30rpx;
}

效果

讲解

index.wxss
background-size：100% 100%;—按容器比例撑满，图片变形；
background-size：cover;—把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉。

1 WXML 数据绑定

通过数据绑定来实现页面的动态更新
WXML页面里的动态数据都是来自js文件Page的data，数据绑定就是通过双大括号({{}})将变
量包起来，在WXML页面里将数据值显示出来。

 <!--index.wxml--><view>{{message}}</view>

// index.js
Page({data:{message:'hello,world'}
})

组件属性绑定
组件属性绑定是将data里的数据绑定到微信小程序的组件上，示例代码如下。

 <!--index.wxml--><view id="item-{{id}}">hello,world</view>

// index.js
Page({data:{id:0}
})

控制属性绑定
控制属性绑定用来进行if语句条件判断，如果满足条件，则执行，否则不执行，示例代码
如下。

<!--index.wxml--><view wx:if="condition">hello,world</view>

// index.js
Page({data:{condition:false}
})

关键字绑定
关键字绑定常用于组件的一些关键字，像复选框组件一样。checked关键字如果等于true则代表
选中复选框，false则代表不选中复选框，示例代码如下。

 <!--index.wxml--><checkbox checked="{{false}}"></checkbox>

运算

三元运算

 <!--index.wxml-->
<view hidden="{{flag? true : false}}">hidden1</view>

// index.js
Page({data:{flag:false}
})

flag为false，显示内容。