微信小程序开发——实现天气预报小功能

步骤：

1.安装“微信web开发者工具”，登录后创建本地项目，.wxml相当于html文件，.wxss相当于css文件，语法上略有不同（div改成view）。

页面代码如下：

main.wxml代码：

<!-- 最外部整体-->
<view class="content">
  <!-- 上部-->
  <view class="location">
    <view class="province">{{province}},{{city}}</view>

    <view class="quxian">{{district}}</view>
    <view class="tmp">22℃</view>
    <view class="weather">晴</view>
    <view class="other">
      <!--风  -->
      <view class="x">
        <view>东南风</view>
        <view>微风级</view>
      </view>
      <view class="fgx"></view>
       <!--湿度  -->
      <view class="x">
        <view>湿度</view>
        <view>75%</view>
      </view>
      <view class="fgx"></view>
       <!--体感温度  -->
      <view class="x">
        <view>体感温度</view>
        <view>21℃</view>
      </view>
    </view>
  </view>
  <!-- 下部 -->
  <view class="future">
    <view class="day">
      <view class="x">{{days[0]}}</view>
      <view class="x">
        <image class="img" src="../Assets/img/100.png"></image>
      </view>
      <view class="x">晴</view>
      <view class="x">18°/29°</view>
    </view>   
    <view class="day">
      <view class="x">{{days[1]}}</view>
      <view class="x">
        <image class="img" src="../Assets/img/100.png"></image>
      </view>
      <view class="x">晴</view>
      <view class="x">18°/28°</view>
    </view>
    <view class="day">
      <view>{{days[2]}}</view>
      <view class="x">
        <image class="img" src="../Assets/img/100.png"></image>
      </view>
      <view class="x">阴</view>
      <view class="x">20°/28°</view>
    </view>
  </view>
</view>

main.wxss代码：

.content{
  background-image: url('../Assets/img/bg.jpg');
  width: 100%;
  height: 100%;
  position: absolute;
  color: white;
  font-size: 15px;
  font-family: 微软雅黑,宋体;
}
.location{
  padding: 20px;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
}
.tmp{
  font-size: 65px;
}
.other{
  padding-top:30px;
  text-align: center;
  width: 100%;
  flex-direction: row;
  justify-content: space-around; 
  display: flex; 
}
.fgx{
  border: 1px solid white;
}
.future{
  padding-left: 20px;
  flex-direction: row; 
  justify-content: space-around;
}
.img{
  width: 60rpx;
  height: 60rpx;
}
 .day{
   padding: 30px;
   font-size: 20px;
   flex-direction: row;  
   justify-content: space-around;  
   display: flex;
   border-bottom: 1px solid gray;
   margin-left: 10px;
   margin-right: 20px;   
}

main.js代码：

Page({

data: {
days:['今天','明天','后天']
},

onLoad: function () {
this.getLocationXY()
},
//获得当前的坐标，通过百度地图API
//
getLocationXY: function () {
var that=this;
wx.getLocation({
success: function(res) {
var locationX=res.latitude;
var locationY=res.longitude;
//通过坐标获得具体的位置
that.getCityByLocation(locationX, locationY);
},
})
},
//通过坐标获得具体的位置名称,关联百度地图API
getCityByLocation: function (locationX,locationY) {
var that=this;
wx.request({
url: 'http://api.map.baidu.com/geocoder/v2/',
data:{
location:locationX+","+locationY,
ak: '6eLe4tDVUOUA2qQT8gDLPzwlrx6OSkrt',
output: 'json'
},
success:function(res){
var province=res.data.result.addressComponent.province;
var city = res.data.result.addressComponent.city;
var district = res.data.result.addressComponent.district;
that.setData({province:province,city:city,district:district});
},
fail:function(res){},
complete:function(res){}
})
},

onShow: function () {

},

onHide: function () {

},

onUnload: function () {

},

onPullDownRefresh: function () {

},

onReachBottom: function () {

},

onShareAppMessage: function () {

}
})

需要登录百度地图账号，百度地图开放平台-->开发文档-->web服务API-->正/逆地理编码服务-->逆地理编码

ak-->申请ak-->获取ak编号



提交后成功申请ak编号



页面效果：