微信小程序——天气预报开发

小程序接入流程

1. 注册
2. 小程序信息完善
3. 开发小程序
4. 提交审核和发布

注册账号

• 前往：https://mp.weixin.qq.com/ 选择小程序，点击注册

这里的密码是新设置的登录密码，不是qq密码。

• 激活邮箱：微信平台会给你的邮箱发送邮件，可以点击连接继续注册
• 信息登记：
  
• 之后就是填写小程序的信息了
  

小程序信息完善

• 小程序基本信息填写：小程序的名称、头像、简称等等

开发小程序

• 打开开发工具—新建小程序—输入AppID（在微信平台的配置服务器中可查看）
• 注册百度地图API：http://lbsyun.baidu.com/
  填入基本信息——打开邮件中的链接——填写信息获得AK
  
• 下载SDK
  百度地图开放平台——开发文档——Web开发——点击“微信小程序JavaScript API”——相关下载——点击“全部下载”
  文件中包含了以下文件，开发时主要用到src里的js文件：bmap-wx.js（.min为压缩版）
  
• 在小程序设置中设置request合法域名
  微信平台——开发——开发设置——填入request合法域名https://api.map.baidu.com

微信要求域名都为https，所以有些API为http的就不能用。

• 编写代码
  目前我完成的小程序只是简单的实现了本地天气信息和未来三天天气信息以及感冒系数等信息这三个模块。（之后会继续增加功能）
  
  
  这是bmap-wx.js中的代码：

onLoad: function() {
        var that = this;
        var BMap = new bmap.BMapWX({
            ak: '你的ak'
        });
        var fail = function(data) {
            console.log('fail!!!!')
        };
        var success = function(data) {
            console.log('success!!!');
            var weatherData = data.currentWeather[0];
            weatherData = '城市：' + weatherData.currentCity 
            + '\n' + 'PM2.5：' + weatherData.pm25 + '\n' +
            + '日期：' + weatherData.date + '\n' + '温度：'
            +  + weatherData.temperature + '\n' +'天气：' + 
            + weatherData.weatherDesc + '\n' +'风力：' + 
            + weatherData.wind + '\n';
            that.setData({
                weatherData: weatherData
            });
        }
        BMap.weather({
            fail: fail,
            success: success
        });
    }

输出data的值（console.log(data)）：
data.currentWeather[0]显示的是今日天气信息（可以根据信息前的name来查找具体信息，例如：
data.currentWeather[0].date:"周三 04月17日 （实时：22℃）"）

data.originalData.results[0].index[ ]显示日常信息（根据index的不同对应不同的信息）

data.originalData.results[0].weather_data[ ]显示未来三天天气信息

我的代码：
index.js:

const app=getApp();
var bmap=require("../../utils/bmap-wx.min.js");
Page({
  data: {
    weatherData:'',
    flag:false
  },
  onReady: function () {
    var that = this;
    var BMap = new bmap.BMapWX({
      ak: '我的ak'
    });
    var fail = function (data) {
      console.log('fail!!!!')
    };
    var success = function (data) {
      console.log(data);
      var weatherData = data.currentWeather[0];
      var city=weatherData.currentCity;
      var temperature=weatherData.temperature;
      var currentTem = weatherData.date;
      currentTem=currentTem.substr(14,2);
      var skies=weatherData.weatherDesc;
      var pm25=weatherData.pm25;
      var state=null;
      if(pm25<50&&pm25>0){
        state='优';
      }
      else if(pm25<100){
        state='良';
      }
      else if(pm25<150){
        state='轻度污染';
      }
      else if(pm25<200){
        state='中度污染';
      }
      else if (pm25 < 300) {
        state = '重度污染';
      }
      else {
        state = '严重污染';
      }
      var wind=weatherData.wind;
      that.setData({
        weatherData: weatherData,
        city:city,
        temperature: temperature,
        currentTem:currentTem,
        skies: skies,
        wind:wind,
        pm25:pm25,
        state:state
      });
      var forecast = new Array(3);
      for (var i = 0; i <3; i++) {
        forecast[i] = data.originalData.results[0].weather_data[i + 1];
      }
      var dailyInfo=new Array(5);
      for (var i = 0; i < 5; i++) {
        dailyInfo[i] = data.originalData.results[0].index[i];
      }
      var flag=setTimeout(function(){
        that.setData({
          flag:true
        },3000)
      })
      that.setData({
        forecast: forecast,
        dailyInfo: dailyInfo,
      });
    }
    BMap.weather({
      fail: fail,
      success: success
    });
  },
  cityChange:function(){
    wx.navigateTo({
      url: '',
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  }
})

index.wxml:

<!--index.wxml-->
<loading hidden="{{flag}}">加载中...</loading>
<view class='content' wx:if="{{flag}}">
  <view class='top'>
    <view class='location' >
      <image class='locImg' src='../../images/locate.png' bindtap="cityChange"></image>
      <text>{{city}}</text>
    </view>
    <view class='currenttem'>
        <view>{{currentTem}}
          <text class='sign'>℃</text>
        </view>
    </view>
     <text class='pm'>{{state}}-{{pm25}}</text>
  </view>
  <view class='center'>
    <view class='dayWeather'>
      <view class='list'>今天</view>
      <view class='list'>{{skies}}</view>
      <view class='list'>{{temperature}}</view>
      <view class='list'>{{wind}}</view>
    </view>
   <view class='dayWeather' wx:key="{{index}}" wx:for="{{forecast}}"> 
      <view class='list'>{{item.date}}</view>
      <view class='list'>{{item.weather}}</view>
      <view class='list'>{{item.temperature}}</view>
      <view class='list'>{{item.wind}}</view>
    </view>
  </view>
  <view class='bottom'>
      <view class='dailyinfo' wx:key="{{index}}" wx:for="{{dailyInfo}}">
        <image src='../../images/info{{index+1}}.png'></image>
        <view>{{item.tipt}}-{{item.zs}}</view>
        <view class='txt'>{{item.des}}</view>
      </view>
  </view>  

</view>

提交审核

• 确认代码无误后，点击上传（微信Web开发工具）

• 微信平台——版本发布——提交开发版——审核通过——上线

暂时就是这些，之后会继续添加，有建议的小伙伴可以留言啊。