手把手教你开发小程序

数据绑定实践：Hxh拜客生活常识网

Hxh拜客生活常识网

Hxh拜客生活常识网

Hxh拜客生活常识网

页面结构Hxh拜客生活常识网

Hxh拜客生活常识网

数据Hxh拜客生活常识网

Hxh拜客生活常识网

Hxh拜客生活常识网

绑定数据Hxh拜客生活常识网

Hxh拜客生活常识网

样式Hxh拜客生活常识网

Hxh拜客生活常识网

Hxh拜客生活常识网

样式Hxh拜客生活常识网

Hxh拜客生活常识网

样式Hxh拜客生活常识网

Hxh拜客生活常识网

效果图Hxh拜客生活常识网

//weather.wxml

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


//weather.js
Page({
      data:{
        temp:4,
        low:"-1 C",
        high:"10 C",
        type:"晴",
        week:"星期二",
        city:"昆山",
        weather:"无持续风行，微风级"
      }
  }
);

//weather.wxss
.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;
}

.weather{
  font-size: 12px;
  text-align: center;
  margin-top: 20rpx;
}

相关阅读: