微信小程序案例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，进行当天天气情况的界面布局，包括温度、最低温、最高温、天气情况、城市、星期、风行情况，代码如下。

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

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

5进入index.wxml，将data里提供的天气数据绑定到页面里，代码如下。

   
      
            {{temp}}℃
            {{low}}/{{high}}
            {{type}}
            {{city}}
            {{week}}
             {{weather}} 
      
   

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页面里将数据值显示出来。

 
 {{message}}

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

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

 
 hello,world

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

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

 hello,world

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

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

运算

三元运算

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

flag为false，显示内容。