在這一節(jié)中，我們將開發(fā)一個天氣預(yù)報的小程序，使用的數(shù)據(jù)接口為百度天氣預(yù)報的接口，該接口可以根據(jù)經(jīng)緯度坐標(biāo)查詢所在地天氣。
準(zhǔn)備工作
使用百度接口需要預(yù)先申請。在本書第4章中有百度ak的申請方法以及百度天氣預(yù)報接口介紹。所不同的是第4章使用城市名稱查詢天氣，而本節(jié)中使用坐標(biāo)進行查詢。
在小程序中，將會向該地址發(fā)起請求，需要預(yù)先將百度接口所在域名設(shè)置到小程序的request合法域名中。如圖21-7所示。

圖21-7小程序服務(wù)器配置
需要注意的是，小程序目前只支持https協(xié)議，使用之前需要確定域名接口是否支持。如果是自己的服務(wù)器，需要配置安全證書等操作。
在微信Web開發(fā)者工具中，點擊左側(cè)導(dǎo)航，在“項目”中將域名信息進行刷新同步。如圖21-8所示。

圖21-8 域名配置同步
選項配置
項目文件列表如圖21-9所示，程序只有一個頁面index，該頁面有相應(yīng)的js、wxml、wxss文件，另外有一個公共模塊common.js用于獲取外部數(shù)據(jù)。

圖21-9域名配置同步
小程序配置文件app.json的配置如下所示。

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "天氣預(yù)報",
    "navigationBarTextStyle":"black"
  },
  "networkTimeout": {
    "request": 10000
  },
  "debug": true
}

由于項目只有一個頁面，所以不需要底部tab。另外設(shè)置網(wǎng)絡(luò)請求時間為10秒，并且啟用調(diào)試模式。
邏輯層實現(xiàn)
首先在common.js中使用獲取用戶當(dāng)前地理位置接口獲取用戶的坐標(biāo)地址，坐標(biāo)類型選擇gcj02。
//獲取當(dāng)前位置坐標(biāo)

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

Wx.getlocation調(diào)用成功之后，將坐標(biāo)信息返回給callback函數(shù)。失敗時將false傳給callback函數(shù)。
獲取到坐標(biāo)之后，再使用百度接口查詢天氣。相應(yīng)的查詢代碼如下所示。

function getWeather(latitude, longitude, callback) {
    var ak = "ECe3698802b9bf4457f0e01b544eb6bb";
    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，再通過拼接參數(shù)構(gòu)造url的其他部分。然后調(diào)用 wx.request 請求天氣預(yù)報數(shù)據(jù)。
接下來把上述接口組合起來，組成給應(yīng)用層的接口，相應(yīng)代碼如下所示。

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

最后通過 module.exports對外暴露該接口。代碼如下所示。

module.exports = {
    loadWeatherData: loadWeatherData
}

頁面與視圖層處理
在頁面文件中，使用 require 將公共代碼引入。代碼如下所示。

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

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

在頁面的Page函數(shù)中， data定義為天氣的初始化數(shù)據(jù)，該數(shù)據(jù)將會以 JSON 的形式由邏輯層傳至渲染層。在 onLoad 方法中，使用common中的 loadWeatherData 方法獲取天氣數(shù)據(jù)并設(shè)置到 UI 上，并將取到的數(shù)據(jù)使用 setData 方法將它設(shè)置到數(shù)據(jù)層中。
在頁面的界面實現(xiàn)中，相應(yīng)的代碼如下所示。

<!--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，分別用于存放頁面頭和頁面列表。頁面頭中存放城市名稱和時間。頁面列表用于存放最近幾天的天氣情況。
頁面的樣式表實現(xiàn)如下所示。

.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中移植而來。
最終實現(xiàn)的天氣預(yù)報小程序效果如圖21-10所示。

圖21-10天氣預(yù)報小程序效果圖

小結(jié)