小程式開發之天氣預報

本文介紹如何使用微信小程式開發天氣預報功能。

 

一、專案檔案清單

# 

二、小程式設定

使用app.json檔案來對微信小程式進行全域配置，決定頁面檔案的路徑、視窗表現、設定網路逾時時間、設定多tab 等。

{  "pages":[    "pages/index/index"
  ],  "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "天气预报",    "navigationBarTextStyle":"black"
  },  "networkTimeout": {    "request": 10000
  },  "debug": true}

因為專案只有一個頁面，所以不需要底部tab。另外設定網路請求時間為10秒，並啟用調試模式。

三、小程式邏輯層

首先在common.js中使用取得使用者目前地理位置介面取得使用者的座標位址，座標類型選擇gcj02。
//取得目前位置座標

function getLocation(callback) {
    wx.getLocation({
        type: 'gcj02',
        success: function(res) {
            callback(true, res.latitude, res.longitude);
        },
        fail: function() {
            callback(false);
        }
    })
}

Wx.getlocation呼叫成功之後，將座標資訊傳回給callback函數。失敗時將false傳給callback函數。
取得到座標之後，再使用百度介面查詢天氣。對應的查詢程式碼如下所示。

function getWeather(latitude, longitude, callback) {    var ak = "";//换成自己的ak,不要用方倍工作室的
    var url = "https://api.map.baidu.com/telematics/v3/weather?location=" + longitude + "," + latitude + "&output=json&ak=" + ak;
    wx.request({
        url: url,
        success: function(res){
            console.log(res);
            callback(res.data);            
        }
    });
}

在上述程式碼中，先定義百度介面的ak，再透過拼接參數建構url的其他部分。然後呼叫 wx.request 請求天氣預報資料。
接下來把上述接口組合起來，組成給應用層的接口，對應程式碼如下。

function loadWeatherData(callback) {
    getLocation(function(success, latitude, longitude){  
        getWeather(latitude, longitude, function(weatherData){
            callback(weatherData);   
        });
    });
}

最後透過 module.exports對外暴露此介面。程式碼如下所示。

module.exports = {
    loadWeatherData: loadWeatherData
}

四、小程式頁面與檢視

在頁面檔案中，使用 require 將公用程式碼引入。程式碼如下所示。

//index.jsvar common = require('common.js')

Page({
    data: {
        weather: {}
    },
    onLoad: function () {        var that = this;
        common.loadWeatherData(function(data){
            that.setData({
                weather: data
            });
        });    
    }
})

在頁面的Page函數中， data定義為天氣的初始化數據，該數據將以 JSON 的形式由邏輯層傳至渲染層。在 onLoad 方法中，使用common中的 loadWeatherData 方法取得天氣資料並設定到 UI 上，並將所取到的資料使用 setData 方法將它設定到資料層中。
在頁面的介面實作中，對應的程式碼如下所示。

<!--index.wxml--><view class="container">  
  <view class="header">
      <view class="title">{{weather.results[0].currentCity}}</view>
      <view class="desc">{{weather.date}}</view>
  </view>

  <view class="menu-list">
      <view class="menu-item" wx:for="{{weather.results[0].weather_data}}" wx:key="*this">
        <view class="menu-item-main">
          <text class="menu-item-name">{{item.date}} {{item.weather}} {{item.wind}} {{item.temperature}}</text>
          <image class="menu-item-arrow" src="{{item.dayPictureUrl}}"></image>
        </view>
      </view>
  </view></view>

最外層是一個 class 為 container 的 View，它的裡面放了2個子 View，分別用來存放頁頭和頁面清單。頁面頭中存放城市名稱和時間。頁面清單用於存放最近幾天的天氣狀況。
頁面的樣式表實作如下所示。

.header {
  padding: 30rpx;
  line-height: 1;
}.title {
  font-size: 52rpx;
}.desc {
  margin-top: 10rpx;
  color: #888888;
  font-size: 28rpx;
}.menu-list {
  display: flex;
  flex-direction: column;
  background-color: #fbf9fe;
  margin-top: 10rpx;
}.menu-item {
  color: #000000;
  display: flex;
  background-color: #fff;
  margin: 10rpx 30rpx;
  flex-direction: column;
}.menu-item-main {
  display: flex;
  padding: 40rpx;
  border-radius: 10rpx;
  align-items: center;
  font-size: 32rpx;
  justify-content: space-between;
}.menu-item-arrow {
  width: 96rpx;
  height: 96rpx;
  transition: 400ms;
}

上述頁面檔案和樣式表，都是從微信官方Demo中移植而來。
最終實現的天氣預報小程式效果如圖所示。

 【相關推薦】

1.微信小程式完整原始碼下載

2.微信小程式demo：果庫跟新版

 

以上是小程式開發之天氣預報的詳細內容。更多資訊請關注PHP中文網其他相關文章！