微信小程序調用用百度地圖天氣功能

#小程序之調用百度地圖天氣功能

本篇博客主要介紹小程序在百度地圖中獲取天氣信息，如有不全請指出。下面先上效果圖

主要內容

• 百度地圖API的個人密鑰，也就是AK
• 請求百度地圖API接口數據
• 獲取到的信息結果
• 頁面輸出獲取到的信息
• 完整代碼

---

第一步：獲取個人AK

這一步較為簡單，也有很多博主寫過了，可以直接去百度開放平台注冊獲取，鏈接（http://lbsyun.baidu.com/），具體界面獲取后如下圖：

紅色部分就是我們要用到的AK，注意不是AK47哦，也不是安卓或者移動應用哦，一定要是微信小程序的應用AK。

第二步：JS代碼中引入接口請求

*在util.js中寫入函數方法

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

function getWeather(latitude, longitude, callback) {  //天氣信息
  var ak = "第一步獲取到的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.data); //在打開應用即可看到
      callback(res.data);
    }

  });
}

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

注意以上請求數據以及函數需要在util.js的module中聲明出來

module.exports = {
  http: http,
  loadWeatherData: loadWeatherData //諸如此類新寫入的函數
}

###第三步： 獲取到的天氣信息結果

以下圖片可能看不太清，可以放大了看。主要輸出結果都在results數組中，results[0].index中是各種指數提示信息，想在天氣中加入暖心貼片提示，可引用results[0].index（后面會有方法說明的）。天氣信息列表在weather_data數組中，當天信息就是第一條數據了。關於百度地圖為什么顯示4條天氣信息我未作深入研究。一般查看當天和未來三天信息已經足夠了。如有愛好者有深入研究可評論回我，我也跟你們學點。

下面這是我們在util.js中寫入的方法，

function getWeather(latitude, longitude, callback) {
  var ak = "個人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.data); //天氣請求結果輸出
      callback(res.data); //一定要回調
    }

  });
}

###第四步：頁面輸出信息

頁面輸出當前城市天氣信息：

<view class="now-tmp">
  <view class="city">{{weather.currentCity}}</view>  
  <view class="tmp">{{weatherData[0].date}}</view>
  <view class="type">{{weatherData[0].weather}} | PM2.5： {{weather.pm25}}</view>
  <view class='wind'>風力  |  {{weatherData[0].wind}}</view>
</view>

以上頁面代碼對應就是效果圖中的第一部分信息包括城市、日期、實時溫度、天氣信息、PM2.5以及風力。

<view class="exp-item">
  <view class="">{{indexData[0].tipt}}：{{indexData[0].zs}}</view>
  <view class="">{{indexData[0].des}}</view>
</view>

以上頁面代碼對應的是效果圖中的暖心提示信息。

<block wx:for="{{weatherData}}" wx:for-item="item" wx:key="">
  <view class="cast-item">
    <view class="cast-day">{{item.date}}</view>
    <view class="cast-type">
      {{item.weather}}
    </view>
    <view class="cast-tmp">
      {{item.temperature}}
    </view>
  </view>
</block>

以上代碼對應的是最近天數天氣信息列表

###最后放上完整頁面代碼

先來.wxml頁面的：

<!-- 當前城市天氣 -->
<view class="wrapper">
    <view class="now">
      <view class="now-tmp">
        <view class="city">{{weather.currentCity}}</view>
        <view class="tmp">{{weatherData[0].date}}</view>
        <view class="type">{{weatherData[0].weather}} | PM2.5： {{weather.pm25}}</view>
        <view class='wind'>風力  |  {{weatherData[0].wind}}</view>
      </view>
      <!-- 暖心提示 -->
      <view class="now-exp">
        <view class="item-sp"></view>
        <view class="exp-item">
          <view class="">{{indexData[0].tipt}}：{{indexData[0].zs}}</view>
          <view class="">{{indexData[0].des}}</view>
        </view>
        <view class="item-sp"></view>
        <view class="exp-item">
          <view class="">{{indexData[3].tipt}}：{{indexData[3].zs}} </view>
          <view class="">{{indexData[3].des}}</view>
        </view>
        <view class="item-sp"></view>
      </view>
    </view>
    <!-- 最近幾天天氣列表 -->
    <view class="forecast">
      <block wx:for="{{weatherData}}" wx:for-item="item" wx:key="">
        <view class="cast-item">
          <view class="cast-day">{{item.date}}</view>
          <view class="cast-type">
            {{item.weather}}
          </view>
          <view class="cast-tmp">
            {{item.temperature}}
          </view>
        </view>
      </block>
    </view>
</view>
<!--頁面背景圖  -->
<view class='bgImg'><image src='../../image/card1.png' ></image></view>

再來.wxss的代碼：

.wrapper{
  width:100%;
  height:100%;
  box-sizing: border-box;
  position: absolute;
  top:0;
  left:0;
  padding:50rpx;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.now{
  height:60%;
  color:#000;
  font-size: 28rpx;
  display: flex;
  flex-direction: column;
  width:90%;
  margin:0 auto;
  margin-top:8%;
}
 .city{
   margin-top:10px;
 }
 .type{
   margin-top:10px;
 }
 .wind{
   margin-top:10px;
 }
.tmp{
  margin-top:10px;
}
 
.now-exp{
  display: block;
  flex-direction: row;
  justify-content: space-around;
  line-height:150%;
}
.now-tmp{
  flex-grow:  1;/*表示剩余的空間都分配給該元素*/
}
 
.exp-item{
  font-size: 28rpx;
  text-align: left;
  margin-top:5px;
  margin-bottom:5px;
}
.item-sp{
  height:5rpx;
  width:100%;
  background-color: #fff;
}
 
.forecast{
  margin-top: 30rpx;
  width:90%;
  margin:0 auto;
}
 
 
.cast-item{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1rpx solid #ccc;
  padding: 20rpx 0;
}

.bgImg{
  height:100%;
  width:100%;
  margin:0 auto;
  top:0;
}
.bgImg image{
  width:100%;
  height:100%;
  margin:0 auto;
}

最后附上js代碼，代碼各行用處我就不一一做注釋了。有不了解的可以評論區回復我

// 引用百度地圖微信小程序JSAPI模塊 
var App = getApp();
var common = require('../../utils/util.js');

Page({
  data: {
    weather: {},
    weatherData: {},
    indexData:{}
  },
  onLoad: function () {
    var that = this;
    console.log("當加載天氣頁面的時候", that.data);
    common.loadWeatherData(function (data) {
      that.setData({
        weather: data.results[0],
        weatherData: data.results[0].weather_data,
        indexData: data.results[0].index
        
      });
      
    });
    
  },
  getUserFortune: function() {
    wx.navigateTo({
      url: '../fortune-result/fortune-result',
    })
  },
  onShareAppMessage: function(res) {
    if (res.from === 'button') {
      // 來自頁面內轉發按鈕
      console.log(res.target)
    }
    return {
      title: '快來看看你周圍有什么',
      path: 'pages/maps/map',
      success: function(res) {
        // 轉發成功
        wx.showShareMenu({
          // 要求小程序返回分享目標信息
          withShareTicket: true
        });
      },
      fail: function(res) {
        // 轉發失敗
      }
    }
  }

})

運行后的效果展示：

#最后祝各位學有所成！

---