微信小程序開發實戰-天氣小程序

園齡6年8個月了，還一篇文章都沒寫過，慚愧！

最近周末做了個天氣預報小程序，在這里整理一下開發過程和注意點，給對小程序開發感興趣的伙伴們提供點參考。

廢話不多說，先上圖最終效果：

 

下面進入正文：

 

第一步  准備

0. 把微信小程序開發文檔過一遍。https://developers.weixin.qq.com/miniprogram/dev/framework/  作為程序員，就要從0開始計數。

1. 下載安裝微信開發者工具（https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html），這個就不多說了。

2. 設計產品原型，我們要把產品做成什么樣。

先曬一下第一版的原型，比較丑，見諒。（第一版丑和簡陋先忍，后面可以迭代）

下面的代碼也會是第一版，功能沒有上面掃碼看到的那么多。我是希望能從0開始寫起，然后把每次迭代也寫上，讓大家能看到一個項目是怎么從第一版最簡陋的功能，逐步功能豐富和完善。這才是一個項目真正的開發過程。一開始就做的很復雜很完備的，往往容易難產。

 

 然后我們接口需要向頁面提供的信息就明確了：位置名、實時溫度、天氣文字、空氣文字、今日日期、今日天氣狀況。

 

第二步 啟程 開發小程序前端頁面

【10點20了，終於下班到家，有時間繼續補充了】

0.新建項目

打開微信開發者工具，創建一個新項目。暫起名“miniweather”（名字不重要，以后可以隨時改）。如下圖：

 

創建完成后，默認微信開發者工具就把項目編譯預覽出來了，效果如下。

 

點擊“獲取頭像昵稱按鈕”，界面變成如下：

 

（請忽略我吊炸天的微信名）

 

1. 編寫頁面內容

由於咱們這個天氣預報只有一個頁面，就直接在index這個頁面改起，沒必要創建新頁面了。

刪掉index.wxml中的全部代碼，稍后重寫。

刪掉index.wxss中的全部樣式代碼，稍后重寫。

咱們從頭寫起。如果你熟悉html和css，那么這個wxml和wxss就很容易上手了。

先貼代碼如下

index.wxml：

<view class="weather-wrapper">
  <view class="location-text">北京</view>
  <view class="temp">30°</view>
  <view class="weather">
    <text class="weather_txt">晴</text>
    <text class="air_label">空氣優</text>
  </view>
  <view class="day-weather">
    <view class="day-text">2019-09-12</view>
    <view class="temp-text">晴轉多雲</view>
  </view>
</view>

 

上面wxml( 相當於web開發的html )就這么12行。把頁面需要的元素列出來，並加了對應的class名，稍后我們可以針對class設置樣式。

現在的效果是這樣的：

頁面沒有任何樣式，但是基本內容都有了。

接下來，編輯index.wxss文件（wxss相當於web開發的css），把樣式加上。

仍然是先貼代碼：

index.wxss

.weather-wrapper{
  position: relative;
  padding-top: 20rpx;
  padding-bottom: 250rpx;
}
.location-text{
  text-align: center;
}
.temp {
  text-align:center;
  font-size:200rpx;
  line-height:280rpx;
  opacity:0.8;
}
.weather {
  text-align: center;
  font-size: 40rpx;
  line-height: 56rpx;
  opacity: 0.65;
}
.air_label{
  margin-left: 20rpx;
  border-radius: 10rpx;
  padding:8rpx;
}
.day-weather {
  display: flex;
  align-items: center;
  position: absolute;
  bottom:0;
  left: 40rpx;
  right: 40rpx;
  height: 90rpx;
  font-size: 30rpx;
  line-height: 42rpx;
  color: rgba(0, 0, 0, 0.5)
}
.temp-text {
  flex-grow: 1;
  padding-right: 30rpx;
  text-align: right;
}

 保存index.wxss文件，工具自動編譯，這下再看預覽效果，順眼多了

 

 

 

2. 加背景圖

頁面框架有了，但是還沒有圖片資源，顯得很簡陋，這一步我們給它加一個背景圖。

首先創建一個images/background目錄，然后把背景圖片存到backgrond目錄中。

之后，修改index.wxml文件，在weather-wrapper類中加入圖片：

<image src="/images/background/sunny.png" mode="scaleToFill" class="bgimg"></image>

mode="scaleToFill"表示將圖片拉伸填滿，可以查看圖片的官方文檔了解詳情。

class="bgimg"  是我們給圖片定義一個叫bgimg的類，方便稍后我們給它設置樣式。

之后我們的index.wxml變成如下：

<view class="weather-wrapper">
  <image src="/images/background/sunny.png" mode="scaleToFill" class="bgimg"></image>
  <view class="location-text">北京</view>
  <view class="temp">30°</view>
  <view class="weather">
    <text class="weather_txt">晴</text>
    <text class="air_label">空氣優</text>
  </view>
  <view class="day-weather">
    <view class="day-text">2019-09-12</view>
    <view class="temp-text">晴轉多雲</view>
  </view>
</view>

再編輯index.wxss，給bgimg設置樣式。添加代碼如下：

.bgimg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

 

之后，我們的index.wxss變成如下：

.weather-wrapper {
  position: relative;
  padding-top: 20rpx;
  padding-bottom: 350rpx;
}
.bgimg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.location-text {
  margin-top: 50rpx;
  text-align: center;
}
.temp {
  text-align: center;
  font-size: 200rpx;
  line-height: 280rpx;
  opacity: 0.8;
}
.weather {
  text-align: center;
  font-size: 40rpx;
  line-height: 56rpx;
  opacity: 0.65;
}
.air_label {
  margin-left: 20rpx;
  border-radius: 10rpx;
  padding: 8rpx;
}
.day-weather {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 40rpx;
  right: 40rpx;
  height: 90rpx;
  font-size: 30rpx;
  line-height: 42rpx;
  color: rgba(0, 0, 0, 0.5);
}
.temp-text {
  flex-grow: 1;
  padding-right: 30rpx;
  text-align: right;
}

 

 

保存文件，點擊“編譯”按鈕，查看效果

 

 有了背景圖，看起來美觀多了。

【下方的白色空白是特意預留的，以后展示未來天氣的預報信息，這部分此篇文章篇幅所限就不寫了】

 

第三步  找數據源 提供數據接口

這一步可走的路就多了。

有專門提供天氣api接口的廠商，免費、收費都有。比如墨跡、彩雲、和風等專門就是干這個的

也可以自己寫代碼去爬數據。

這里為了學習，可以先用和風天氣的免費接口，去上面注冊一個賬號，然后看官方文檔，了解怎么獲取到天氣信息。

 

其實正規項目，我們應該有自己的后端服務，后端自己制造、存儲數據或者和第三方（如和風天氣）交互獲取數據，自己的小程序只向自己的后端接口請求數據。不過這東西攤開來講就太多了，它是一整個技術棧，涉及了太多方面。

我是構建了自己的后端服務，但是對於初學者，我沒法在這里指導你們從頭開始構建。（想想需要買雲主機、買域名、域名備案、進行環境配置、寫后端服務代碼、代碼上線部署等，一大攤子事，不是三言兩語或者幾篇文章能寫清楚的）

至於小程序力推的雲開發，我個人其實不推薦。雲開發雖然方便了開發者，省去買服務器、域名、數據庫等各種事，看似對開發者友好，但事情都有兩面性。雲開發塑造了一個封閉的生態圈，所有東西都在微信的統轄內，不利於互聯網的開放，如果想把數據給網站、app使用也很難。而且當用戶量大的時候，雲開發並不會節省多少成本。

 

所以接下來就讓小程序直接調用和風天氣的接口來獲取數據作為演示。

第四步 小程序通過接口調數據，展示信息

0.移除無用代碼

對於數據的的操作，我們在index.js中進行。默認的index.js中太多無用的東西了，天氣小程序不需要獲取用戶信息，所以不想關的都刪掉，最終index.js內容如下：

Page({
  data: {
  },
  onLoad: function () {
  }
})

1.設置頁面從js中獲取初始數據

其中data是用來存放頁面初始數據的，我們可以在里面設置初始數據，傳遞給頁面。

修改后index.js內容如下：

Page({
  data: {
    location_text:'北京',
    temperature:'30°',
    now_weather: '晴',
    now_air: '優',
    today:'2019-09-12',
    today_weather: '晴轉多雲'
  },
  onLoad: function () {
  }
})

 然后修改index.wxml，接收這些參數，修改完的index.wxml如下：

<view class="weather-wrapper">
  <image src="/images/background/sunny.png" mode="scaleToFill" class="bgimg"></image>
  <view class="location-text">{{location_text}}</view>
  <view class="temp">{{temperature}}</view>
  <view class="weather">
    <text class="weather_txt">{{now_weather}}</text>
    <text class="air_label">空氣{{now_air}}</text>
  </view>
  <view class="day-weather">
    <view class="day-text">{{today}}</view>
    <view class="temp-text">{{today_weather}}</view>
  </view>
</view>

保存文件，自動編譯，查看效果：

 

 

2. js獲取和風天氣數據，渲染到頁面

 前置工作：

登錄和風天氣控制台，創建應用，生成了一個免費版的key來使用。后面調用天氣接口需要用到這個key

 

獲取位置信息

要查詢當地天氣，需要先有位置數據，這個推薦使用騰訊位置服務。官方文檔寫的清清楚楚，直接用官方例子就行。

這個在小程序后台開通，也要獲取一個key。

 

 

獲取位置信息需要用戶授權，需要把要獲取的授權信息寫在app.json中。 

app.json增加如下代碼：

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息將用於小程序獲取當前位置天氣"
    }
  },

 

利用位置信息，調用和風天氣接口獲取天氣數據

請求網絡接口用 wx.request()方法   文檔

把數據渲染到頁面

使用setData({})方法，把初始值換成我們從接口獲取到的真實值。

 

最終index.js內容如下：

const QQMapWX = require('../../utils/qqmap-wx-jssdk.js')
Page({
  data: {
    location_text: '北京',
    temperature: '30°',
    now_weather: '晴',
    now_air: '優',
    today: '2019-09-12',
    today_weather: '晴轉多雲'
  },
  onLoad: function () {
    this.qqmapsdk = new QQMapWX({
      key: 'EAXBZ-33R3X-AA64F-7FIPQ-BY27J-5UF5B'
    })
    this.getCityAndWeather()
  },
  // 獲取位置及天氣
  getCityAndWeather() {
    var that = this;
    wx.getLocation({
      success: res => {
        this.location_pin = res.longitude + ',' + res.latitude
        this.qqmapsdk.reverseGeocoder({
          location: {
            latitude: res.latitude,
            longitude: res.longitude
          },
          success: res2 => {
            let city = res2.result.address_component.city
            that.setData({
              location_text: city,
            })
            that.getNowWeather()
          }
        })
      },
      fail: () => {
        console.log('未授權位置');
      }
    })
  },

  // 獲取當前天氣
  getNowWeather() {
    let that = this
    let hfkey = '3b820c451ee144629f959b464b2dd6a5'
    let url = 'https://free-api.heweather.net/s6/weather/now?key=' + hfkey + '&location=' + this.location_pin

    wx.request({
      url: url,
      success: function (res) {
        console.log('success')
        console.log(res)
        let nowData = res.data.HeWeather6[0].now;
        //溫度數據
        let temperature = nowData.tmp
        //當前天氣文字描述
        let now_weather = nowData.cond_txt
        // 今日日期
        var date = new Date()
        const year = date.getFullYear()
        const month = date.getMonth() + 1
        const day = date.getDate()
        that.setData({
          temperature: temperature + '°',
          now_weather: now_weather,
          today: year + '-' + month + '-' + day
        })
      },
      fail: function (res) {
        console.log()
      }
    })
  }
})

 

上面只調用了一個接口獲取數據，要獲取頁面其它數據，還需要調用其它接口，方法大同小異，我這里就不重復寫了。可以參考上面的代碼自行實現。

 

可能遇到的問題及解決辦法：

1.提示域名不合法：可以取消對域名的校驗（開發工具中 詳情->本地設置->勾選不校驗合法域名...），或者在公眾平台小程序后台把域名信息加進去。

 

本文完整代碼下載

完整代碼包： 下載地址