文章目录
- 一、项目步骤
- 1 创建一个无AppID的weather项目
- 2 进入index.wxml、index.js、index.wxss文件，清空所有内容，进入App.json，修改导航栏标题为“中国天气网”。
- 3进入index.wxml，进行当天天气情况的界面布局，包括温度、最低温、最高温、天气情况、城市、星期、风行情况，代码如下。
- 4进入index.js，在data里提供天气的数据，让这些数据在界面里显示出来，代码如下。
- 5进入index.wxml，将data里提供的天气数据绑定到页面里，代码如下。
- 6进入index.wxss，将index.wxml添加样式，美化页面，代码如下。
- 效果
- 讲解
- 1 WXML 数据绑定
一、项目步骤
1 创建一个无AppID的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，显示内容。
