微信小程序开发五：案例实践

最新推荐文章于 2024-09-06 14:55:10 发布

weixin_30838921

最新推荐文章于 2024-09-06 14:55:10 发布

阅读量194

点赞数

文章标签： json ui

原文链接：http://www.cnblogs.com/zhijiangch/p/7806158.html

版权

5.1天气预报

在这一节中，我们将开发一个天气预报的小程序，使用的数据接口为百度天气预报的接口，该接口可以根据经纬度坐标查询所在地天气。
准备工作
使用百度接口需要预先申请。在本书第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; }