天气微信小程序

转自csdn

我学的是，刘刚老师的“微信小程序开发”。
天气微信小程序，在写代码的时候遇到一些符号和变量的疑问：

1. 单词不了解，navigationBarTitleText 导航栏标题文本，info 信息，content 内容，font-family 字体系列，padding-top 顶部填充，text-align 文本对齐，margin-top 上边距，margin-right 右边距。

2. 符号问题，微信小程序用的符号，都是英文符号。

3. 内容，在index.js里数据初始化， index.wxml中调用index.js的变量，例如temp调用了“4”，index.wxss的内容用来改变字体的，类型、颜色、对齐、边距、宽、高等。

4. 其他，

• index.js中的数据可以变化，
• index.wxml中双括号{{}}，是用来调用数据，
• font-family : 微软雅黑，宋体;中的冒号是英文，
• background-size : cover;若用cover，意味着将一张图片放入框内，剪去多余部分。用contain，意味着将一张图片放入框内，放下全图，甚至会留下一部分空白。

天气微信小程序作用是联系绑定数据和字体类型，整体很简单。

app.json的代码

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

index.js的代码

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

index.wxml的代码

<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">{{cite}}</view>
          <view class="week">{{week}}</view>
          <view class="weather">{{weather}}</view>
    </view>
  </view>
</view>

index.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 : 30px
}

.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 : 30rpx;
}