概述

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

一、准备工作

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});}})

 

---