微信小程序_(案例)简单中国天气网首页

Posted 2021-02-13 Cynical丶Gary

 

 

Demo：简单中国天气网首页

 

Page({
  data:{
    name:"CynicalGary",
    temp:"4",
    low:"-1°C",
    high:"10°C",
    type:"晴",
    city:"泉州",
    week:"星期五",
    weather:"无持续风行 微风级"
  }
})

index.js

 

<view class=\'content\'>
  <view class=\'today\'>
    <view class=\'info\'>
      <view class=\'name\'>{{name}}</view>
      <view class=\'temp\'>{{temp}}°C</view>
      <view class=\'lowhigh\'>{{low}}/{{height}}</view>
      <view class=\'type\'>{{type}}</view>
      <view class=\'city\'>{{city}}</view>
      <view class=\'week\'>{{week}}</view>
      <view class=\'weather\'>{{weather}}</view> 
    </view>
  </view>
</view>

index.wxml

 

.content{
  font-family: 微软雅黑,宋体;
  font-size: 14px;
  background-size: cover;
  height: 100%;
  width: 100%;
  color:#333;
}

.today{
  padding: 70rpx;
  height: 50%;
}

.name{
  font-size: 20px;
  text-align: center;
  color: grey;
}

.temp{
  font-size: 80px;
  text-align: center;
}

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

.type{
  font-size: 16px;
  text-align: center;
  margin-top: 30rpx;
}

.city{
  font-size: 20px;
  text-align: center;
  margin-top: 20rpx;
  margin-right: 10rpx;
}

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

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

index.wxss

 

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "中国天气网",
    "navigationBarTextStyle":"black"
  }
}

app.json