天氣微信小程式

我學的是，劉剛老師的“微信小程式開發”。

天氣微信小程式，在寫代碼的時候遇到一些符号和變量的疑問：

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;
}