天氣微信小程序

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