365体育备用网址报道21.5.1天气预告_365体育备用网址官网资讯

在这一节中,我们将开拓一个天气预告的小程序,使用的数据接口为百度天气预告的接口,该接口能够依据经纬度坐标查询所在地天气。
准备工作
使用百度接口需要预先申请。在本书第4章中有百度ak的申请方法以及百度天气预告接口介绍。所不同的是第4章使用城市名称查询天气,而本节中使用坐标进行查询。
在小程序中,将会向该地址发起要求,需要预先将百度接口所在域名设置到小程序的request合法域名中。如图21-7所示。

图21-7小程序服务器配置
需要注意的是,小程序当前只撑腰https协议,使用之前需要确定域名接口是否撑腰。如果是自己的服务器,需要配置安全证书等操作。
在微信Web开拓者工具中,点击左侧导航,在“项目”中将域名信息进行刷新同步。如图21-8所示。

图21-8 域名配置同步
选项配置
项目文件列表如图21-9所示,程序只有一个页面index,该页面有相应的js、wXML、wxss文件,另外有一个公共模块common.js用于猎取外部数据。

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

{
  "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 = "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,再通过拼接参数构造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.js
var 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中移植而来。
最终实现的天气预告小程序效果如图21-10所示。

图21-10天气预告小程序效果图

------分隔线----------------------------

公布评论 (105人察看0条评论)
请自觉遵守互联网相关的政策法规,严禁公布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换浩博娱乐城在线开户
最新评论