[微信小程序]从零开始学习和入门微信小程序之“微天气”小程序

微信小程序已经火了好一段时间了，个人觉得学习成本比较低，如果你有Web前端开发的经验，这应该算是小儿科的事了，然而对于我这样的安卓开发者来说，移动端的小程序，貌似在界面上还是比较麻烦的，css毕竟还是比较让人头大的哈哈，不知道有没有人和我一样的想法。

今天，我通过资料学习了开发一个微天气的微信小程序，再次作为主要内容，学习记录，磨砺自己。

微信小程序的学习，我还是从官方的文档和部分学习资料开始，本文未使用第三方的框架，只是比较初级的功能，展示天气的在线查询。

首先是搭建界面，界面比较简介，如下所示。

1.创建项目，本文APPID使用了测试号的id，因为本项目只有一个界面，故在page页面新建weather目录以及weather.js等文件；

"pages": [
    "pages/weather/wether",
  ],
"window":{
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "微天气",
  "navigationBarTextStyle": "black"
}

2.编写界面代码，就是UI设计了，创建weather.wxml，代码如下。题外话：这里就比较简单的设计一些界面了，至少现在对我来说也是挺麻烦的事，不知道大佬们有没有更好的途径去学习小程序的css和布局。

<view class="content">
  <view class="info">
    <view class="city">{{city}} {{today}}</view>
    <!--当天温度 -->
    <view class="temp">{{weather.wendu}}℃</view>
    <!-- 天气描述 -->
    <view class="weather">{{weather.ganmao}}</view>
  </view>
  <!-- 昨天的天气信息 -->
  <view class="yesterday">
    <view class='detail'>
      <text class="yesterday-title">昨天</text>{{weather.yesterday.date}}</view>
    <view class='detail'>{{weather.yesterday.type}}<!-- 天气类型，如阴、晴 -->
      {{weather.yesterday.fx}}<!-- 风向 -->
       {{weather.yesterday.fl}}<!-- 风力 -->
        {{weather.yesterday.low}}<!-- 最低温度 -->
         {{weather.yesterday.high}}<!-- 最高温度 -->
    </view>
  </view>

  <view>
    <!-- 最近五天天气信息 -->
    <view class="forecast">
      <view class="next-day" wx:key="{{index}}" wx:for="{{weather.forecast}}">
        <!-- 日期 -->
        <view class="detail date">{{item.date}}</view>
        <!-- 天气类型 -->
        <view class="detail">{{item.type}}</view>
        <!-- 最高温度 -->
        <view class="detail">{{item.high}}</view>
        <!-- 最低温度 -->
        <view class="detail">{{item.low}}</view>
        <!-- 风向 -->
        <view class="detail">{{item.fengxiang}}</view>
        <!-- 风力 -->
        <view class="detail">{{item.fengli}}</view>
      </view>
    </view>
  </view>
  <!-- 搜索 -->
  <view class="search-area">
    <input bindinput="inputing" placeholder="请输入城市名称" value="{{inputCity}}"></input>
    <button type="primary" size="mini" bindtap="bindSearch">查询</button>
  </view>
</view>

3.编写界面的样式文件，在weather.wxss中编写界面样式代码。

.content{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  font-family: 微软雅黑，宋体;
  box-sizing: border-box;
  padding: 20rpx 10rpx;
  color: #252525;
  font-size: 16px;
  background-color: #f2f2f8;
}

.info{
  margin-top: 20rpx;
  width: 100%;
  height: 160px;
}

.city{
  margin: 20rpx;
  border-bottom: 1px solid #043567;
}
.detail{
  color:#043567;
}

.temp{
  font-size: 120rpx;
  line-height: 130rpx;
  text-align: center;
  padding-top: 20rpx;
  color: #043567;
}

.weather{
  line-height: 22px;
  margin: 10px 0;
  padding: 0 10px;
}

.yesterday{
  width: 93%;
  padding: 20rpx;
  margin-top: 50rpx;
  border-radius: 10rpx;
  border: 1px solid #043567;
}

.yesterday-title{
  color:red;
}

.forecast{
  width: 100%;
  display: flex;
  margin-top: 50rpx;
  align-self: flex-end;
}

.next-day{
  width:20%;
  height: 450rpx;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
  margin: 0 3rpx;
  border: 1px solid #043567;
  border-radius: 10rpx;
}

.date{
  margin-bottom: 20rpx;
  border-bottom: 1px solid #043567;
  color: #f29f39;
}

.search-area{
  display: flex;
  background: #f4f4f4;
  padding: 1rem 0.5rem;
}

.search-area input{
  width: 70%;
  height: 38px;
  line-height: 38px;
  border: 1px solid #ccc;
  box-shadow: inset 0 0 10px #ccc;
  color: #000;
  background-color:#fff;
  border-radius: 5px;
}

.search-area button{
  width: 30%;
  height: 40px;
  margin-left: 5px;
  line-height: 40px;
}

4.开始写逻辑层的代码，在weather.js中编写主要功能，我们现在page函数中，在data里创建临时数据wether等数据，不仅可以用来预览我们刚写的界面，还将用来作为后面查询的数据。

data: {
      weather:{
        wendu:18,
        ganmao:'易感人群应适当减少室外活动。',
        yesterday:{
          date:'17日星期四',
          type:'阴',
          fx:'南风',
          fl:'微风级',
          low:'低温8℃',
          high:'高温16℃'
        },
        forecast:[
          {
            date: '18日星期五',
            type: '阴',
            high: '高温16℃',
            fengxiang: '南风',
            fengli: '微风级',
            low: '低温8℃'
          },
          {
            date: '19日星期六',
            type: '阴',
            high: '高温16℃',
            fengxiang: '南风',
            fengli: '微风级',
            low: '低温8℃'
          },
          {
            date: '20日星期日',
            type: '阴',
            high: '高温16℃',
            fengxiang: '南风',
            fengli: '微风级',
            low: '低温8℃'
          },
          {
            date: '21日星期一',
            type: '阴',
            high: '高温16℃',
            fengxiang: '南风',
            fengli: '微风级',
            low: '低温8℃'
          },
          {
            date: '22日星期二',
            type: '阴',
            high: '高温16℃',
            fengxiang: '南风',
            fengli: '微风级',
            low: '低温8℃'
          }
        ]
      },
      today:'2019-09-19',
      city:'无锡',
      inputCity:''
  }

以上是我们需要展示的数据，那数据哪里来呢？我的想法是通过微信的API：wx.getLocation(Object object)来获取所在地的经纬度，然后通过百度地图的webapi进行逆地理编码，从而获取所在城市名称，该接口也可以放在浏览器中使用：

http://api.map.baidu.com/reverse_geocoding/v3/?ak=您的ak&output=json&coordtype=wgs84ll&location=31.225696563611,121.49884033194  //GET请求

天气预报接口，来查询城市天气：

http://wthrcdn.etouch.cn/weather_mini?city=城市名称 

逻辑代码是以下是全部代码：

// pages/weather/wether.js
var util = require('../../utils/util.js');
var BD_AK = '请使用你在百度平台的项目AK';
Page({
  /**
   * 页面的初始数据
   */
  data: {
      weather:{
        wendu:18,
        ganmao:'易感人群应适当减少室外活动。',
        yesterday:{
          date:'17日星期四',
          type:'阴',
          fx:'南风',
          fl:'微风级',
          low:'低温8℃',
          high:'高温16℃'
        },
        forecast:[
          {
            date: '18日星期五',
            type: '阴',
            high: '高温16℃',
            fengxiang: '南风',
            fengli: '微风级',
            low: '低温8℃'
          },
          {
            date: '19日星期六',
            type: '阴',
            high: '高温16℃',
            fengxiang: '南风',
            fengli: '微风级',
            low: '低温8℃'
          },
          {
            date: '20日星期日',
            type: '阴',
            high: '高温16℃',
            fengxiang: '南风',
            fengli: '微风级',
            low: '低温8℃'
          },
          {
            date: '21日星期一',
            type: '阴',
            high: '高温16℃',
            fengxiang: '南风',
            fengli: '微风级',
            low: '低温8℃'
          },
          {
            date: '22日星期二',
            type: '阴',
            high: '高温16℃',
            fengxiang: '南风',
            fengli: '微风级',
            low: '低温8℃'
          }
        ]
      },
      today:'2019-09-19',
      city:'无锡',
      inputCity:''
  },
  /**
   * 查询所在地区的天气接口
   */
  searchWeather:function(cityName){
    if (cityName == '' || cityName == null || cityName == undefined || cityName.length<2){
      wx.showModal({
        title: '提示',
        content: '请输入有效的城市名称',
        showCancel: false,
        success: function (res) {
        }
      })
      return
    }
    console.log('城市：'+cityName);
    var self = this;
    wx.request({
      url: 'http://wthrcdn.etouch.cn/weather_mini?city='+cityName,
      header:'Content-Type:application/json',
      success(res){
        if(res.data.status==1002){
            wx.showModal({
              title: '提示',
              content: '输入的城市名称有误，请重新输入！',
              showCancel:false,
              success:function(res){
                self.setData({
                  inputCity:''
                })
              }
            })
        }else{
          var weather = res.data.data;
          var yesterday = weather.yesterday;
          yesterday.fl = yesterday.fl.replace("<![CDATA[", '').replace("]]>", '');
          for (var i = 0; i < weather.forecast.length;i++){
              var d = weather.forecast[i].date;
              weather.forecast[i].date = ' ' + d.replace('星期',' 星期');
            var fengli = weather.forecast[i].fengli;
            fengli = fengli.replace("<![CDATA[", '').replace("]]>", '');
            weather.forecast[i].fengli = fengli;
          }

          self.setData({
            weather:weather,
            city:cityName,
            inputCity:''
          })
        }
      }
    })
  },
  /**
   * 监听输入框输入的事件监听
   */
  inputing:function(e){
    console.log("inputing:" + e.detail.value);
    this.setData({
      inputCity:e.detail.value
    })
  },
  /**
   * 查询事件
   */
  bindSearch:function(){
    this.searchWeather(this.data.inputCity);
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      today: util.formatTime(new Date).split(' ')[0]
    })
    var self = this;
    wx.getLocation({
      type:'wgs84',
      success: function(res) {
        const latitude = res.latitude
        const longitude = res.longitude
        var url = "http://api.map.baidu.com/reverse_geocoding/v3/?ak=" + BD_AK + '&output=json&coordtype=wgs84ll&location=' +         latitude + ',' + longitude;
        console.log('url:'+url);
        wx.request({
          url: url,
          header:'Content-Type:application/json',
          success(res){
            if(res.data.status==0){
              var city = res.data.result.addressComponent.city.replace('市','');
              self.searchWeather(city);
            }
          }
        })
      },
    })
  }
})

注意：本项目注意的地方就是，请在测试项目中加入两个接口域名，保证request的域名合法性，不然在调用wx.request时会提示错误的。

好了今天就先学习到这里。继续加油吧！