微信小程序之天气预报 ，小程序天气预报的功能实现

概述

微信小程序项目实战之天气预报

一、准备工作

1、注册微信小程序

   微信注册：前往：https://mp.weixin.qq.com/ 选择小程序，点击注册 申请AppID

       

        2、注册微信小程序地图ak

        打开开发工具—新建小程序—输入AppID（在微信平台的配置服务器中可查看）

        注册百度地图API：http://lbsyun.baidu.com/
        填入基本信息——打开邮件中的链接——填写信息获得AK

 

 

        3、效果图：

 

二：上代码

wxml：

<view class="hello"> 
  <text>{{weatherData}}</text> 
</view>

<view style="padding-top:30px"></view>

<block wx:for="{{futureWeather}}" wx:key="">
	<view style="border:1px solid #ccc; margin:5px" class="hello">
		<view>{{item.date}}</view>
		<view>{{item.temperature}}</view>
		<view>{{item.weather}}</view>
		<view>{{item.wind}}</view>
	</view>
</block>

<!-- 背景图    -->
<view class='ab' style='background-image:url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2399728901,3084250506&fm=26&gp=0.jpg");'></view>

wxss：

.ab {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -99;
  background-color: #000;
  background-size: cover;
  
}
.hello{
  color:white;
}

js：

引用百度地图微信小程序JSAPI模块链接和提取码

链接：https://pan.baidu.com/s/118zSxkaAcC1Y2NdIn8p5sw 
提取码：byvn 
在page data里填写你申请的ak

// 引用百度地图微信小程序JSAPI模块 
var bmap = require('../../libs/bmap-wx.min.js');

Page({
  data: {
    ak: "你的ak",
    weatherData: '',
    futureWeather: []
  },
  onLoad: function (options) {
    var that = this;
    // 新建bmap对象 
    var BMap = new bmap.BMapWX({
      ak: that.data.ak
    });
    var fail = function (data) {
      console.log(data);
    };
    var success = function (data) {
      console.log(data);

      var weatherData = data.currentWeather[0];
      var futureWeather = data.originalData.results[0].weather_data;
      console.log(futureWeather);
      weatherData = '城市：' + weatherData.currentCity +  '\n' + '日期：' + weatherData.date + '\n' + '温度：' + weatherData.temperature + '\n' + '天气：' + weatherData.weatherDesc + '\n' + '风力：' + weatherData.wind + '\n';
      that.setData({
        weatherData: weatherData,
        futureWeather: futureWeather
      });
    }

    // 发起weather请求 
    BMap.weather({
      fail: fail,
      success: success
    });
  }

})

 

---