初次尝试小程序--简单的天气预报

博客班级	https://edu.cnblogs.com/campus/zjcsxy/SE2020/
作业要求	https://edu.cnblogs.com/campus/zjcsxy/SE2020/homework/11334
作业目标	编写一个天气小程序，可以基本实现查询天气相关功能（使用百度API），在博客园班级中写一篇相应的博文
源代码	https://github.com/locker13/rg-first
学号	31801118
院系	浙大城市学院计算机系

前言：软件工程的第一次作业，因为是个人初次接触小程序，选择做一个比较简单的显示天气的小程序，天气的信息来自于百度地图API，主要难点在于百度地图API的调用。

开发工具：微信开发者工具。

效果演示：

注：因为百度API服务问题，通过其读取的日期信息有误，具体可见最后的现存问题。

全局配置：

app.json

两个基本页面，包括主页和添加城市界面。页面设计相关的参数可以按喜好修改。

{
  "pages": [
    "pages/index/index",
    "pages/add/add",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#0099FF",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "white"
  },
  "sitemapLocation": "sitemap.json"
}

app.js

小程序启动的时候，从本地缓存中读取现存的城市数据，首页设定为当前所在城市。

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync(\'logs\') || []
    logs.unshift(Date.now())
    wx.setStorageSync(\'logs\', logs);
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  }
})

核心部分

关于页面的设计和实现在博文中不多赘述，主要说明一下使用百度API提取信息并且在页面上使用的方法。

index.js

整体思路是先创建百度地图API接口，通过向百度申请天气数据，存入本地数组后逐个提取，再分别放入页面的各个显示元素中。

注意在使用前需要现在百度地图API中申请一个个人的key，替换index.js和common.js中的\'ak\'变量才可以正常使用。具体可见：http://lbsyun.baidu.com/

//获取应用实例
var app = getApp()
var bmap = require(\'../../utils/bmap-wx.js\');//获取百度地图对象 
var common = require(\'../../utils/common.js\'); 
Page({
  onShareAppMessage: function () {
    return {
      title: \'天气\',
      desc: \'\',
      path: \'/pages/index/index\'
    }
  },
  data: {
    motto: \'Hello World\',
    gogoleft:0,
    gogoright:-50,
    gogostatus:false,
    pagesize:100,
    pagetop:0,
    userInfo: {},
    animationW: {},
    animationM: {},
    theWeather: {//默认显示的天气信息
      weatherIcon: "/images/w/w01",
      date: 22,
      currentCity: "杭州",
      weatherDesc: "多云",
      pm25: 67,
      temperature: "24 ~ 14",
      wind: " 无风 "
    },
    cityMenus: [],
    today : "2020-10-17",
    wall:"/images/clearday"
  },
  //创建菜单页
  setMenuNatural: function(){
    var that=this;
    var animationW = wx.createAnimation({
      duration: 100
    });
    var animationM = wx.createAnimation({
      duration: 100
    });
    var menuStatus=false;
    if(this.data.gogostatus){
      animationW.width("100%").height("100vh").top("0vh").left("0%").step();
      animationM.right("40%").step();
      menuStatus=false;
    }else{
      animationW.width("90%").height("90vh").top("5vh").left("-40%").step();
      animationM.right("0%").step();
      menuStatus=true;
    }
    this.setData({
      animationW:animationW.export(),
      animationM:animationM.export(),
      gogostatus:menuStatus,
      cityMenus: common.getCityList()
    })
  },

以下的代码是调用百度API读取当前城市天气信息的代码，主要的工作是对天气数据的读取。common.js主要是让天气数据可视化。

  menuTab: function(e){
    wx.showLoading();
    var itemId=e.target.id;
    var that=this;
    if(itemId==""){
      console.log("id");
      return;
    }
    var theCity=common.getCity()[itemId];
    var BMap = new bmap.BMapWX({ 
        ak: \'fmqP7oUQGv8eWmB2SOojtQekce3MF4wE\' 
    });
    var fail = function(data) { 
        console.log(data);
        wx.hideLoading();
        return null;
    }; 
    var success = function(data) {
        wx.hideLoading();
        var weatherData = data.currentWeather[0]; 
        weatherData.fullData = data.originalData.results[0];
        console.log(weatherData);
        var date = weatherData.date;
        date = date.substring(date.indexOf("：")+1,date.indexOf("℃"))
        weatherData.date = date
        var days=weatherData.fullData.weather_data;
        for (var i=0;i<days.length;i++){
          if(i==0){
            var todayText=days[i].date;
            todayText = todayText.substring(todayText.indexOf("周"),todayText.indexOf("周")+2);
            days[i].date = todayText;
          }
          days[i].weather= common.iconChanger(days[i].weather).icon; 
        }
        weatherData.fullData.weather_data = days;
        weatherData.xy=theCity.xy;
        var tudayStatus=common.iconChanger(weatherData.weatherDesc);
        weatherData.weatherIcon=tudayStatus.icon;
        weatherData.weatherDesc=tudayStatus.status;
        weatherData.wind=common.windHelper(weatherData.wind);
        weatherData.pmpm=common.pmText(weatherData.pm25);
        that.setData({
          theWeather: weatherData,
          today: common.getToday(),
          wall: tudayStatus.wall
        });
        that.setMenuNatural();
    } 
    // 发起weather请求 
    BMap.weather({
        location: theCity.xy,
        fail: fail, 
        success: success 
    });
  },

以下代码是添加城市后，查看缓存并且重新读取新城市的信息。

 onLoad: function (options) {
    wx.showLoading();
    common.init();
    var that = this;
    if(options.name==null){//没有选择城市，也就是说主页面，自动获取当前城市
      var BMap = new bmap.BMapWX({ 
            ak: \'fmqP7oUQGv8eWmB2SOojtQekce3MF4wE\' 
        });
      var fail = function(data) { 
            console.log(data);
            wx.hideLoading();
        }; 
      console.log("正在添加新城市");
      //调用应用实例的方法获取全局数据，从而确定缓存信息
      var success = function(data) {
          wx.hideLoading();
          var weatherData = data.currentWeather[0]; 
          weatherData.fullData = data.originalData.results[0];
          
          var date = weatherData.date;
          date = date.substring(date.indexOf("：")+1,date.indexOf("℃"));
          weatherData.date = date;
          var days=weatherData.fullData.weather_data;
          for (var i=0;i<days.length;i++){
            if(i==0){
              var todayText=days[i].date;
              todayText = todayText.substring(todayText.indexOf("周"),todayText.indexOf("周")+2);
              days[i].date = todayText;
            }
            days[i].weather= common.iconChanger(days[i].weather).icon; 
          }
          weatherData.fullData.weather_data = days;
          weatherData.xy=options.location;
          var tudayStatus=common.iconChanger(weatherData.weatherDesc);
          weatherData.weatherIcon=tudayStatus.icon;
          weatherData.weatherDesc=tudayStatus.status;
          weatherData.wind=common.windHelper(weatherData.wind);
          weatherData.pmpm=common.pmText(weatherData.pm25);
          
          common.refreshCity(weatherData);
          that.setData({
            theWeather: weatherData,
            today: common.getToday(),
            wall: tudayStatus.wall
          });
        } 
        // 发起weather请求 
        BMap.weather({
          fail: fail, 
          success: success 
      });
    }else{
      var BMap = new bmap.BMapWX({ 
            ak: \'fmqP7oUQGv8eWmB2SOojtQekce3MF4wE\' 
        });
      var fail = function(data) { 
            console.log(data);
            wx.hideLoading();
        }; 
      console.log("正在添加新城市");
      //调用应用实例的方法获取全局数据
      var success = function(data) {
          wx.hideLoading();
          var weatherData = data.currentWeather[0]; 
          weatherData.fullData = data.originalData.results[0];
          //console.log(weatherData);
          var date = weatherData.date;
          date = date.substring(date.indexOf("：")+1,date.indexOf("℃"));
          weatherData.date = date;
          var days=weatherData.fullData.weather_data;
          for (var i=0;i<days.length;i++){
            if(i==0){
              var todayText=days[i].date;
              todayText = todayText.substring(todayText.indexOf("周"),todayText.indexOf("周")+2);
              days[i].date = todayText;
            }
            days[i].weather= common.iconChanger(days[i].weather).icon; 
          }
          weatherData.fullData.weather_data = days;
          weatherData.xy=options.location;
          var tudayStatus=common.iconChanger(weatherData.weatherDesc);
          weatherData.weatherIcon=tudayStatus.icon;
          weatherData.weatherDesc=tudayStatus.status;
          weatherData.wind=common.windHelper(weatherData.wind);
          weatherData.pmpm=common.pmText(weatherData.pm25);
          common.addCity(weatherData);
          that.setData({
            theWeather: weatherData,
            today: common.getToday(),
            wall: tudayStatus.wall
          });
        } 
        // 发起weather请求 
        BMap.weather({
          location: options.location,
          fail: fail, 
          success: success 
      });
    }
  }

add.js

添加城市页面的配置，信息来自于common.js

// pages/add/add.js
var common = require(\'../../utils/common.js\');
var xjCitys={};
Page({
  data:{
    hotCitys:[],
    chinaCitys:[]
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    xjCitys=common.readXJCitys();
    this.setData({
      chinaCitys:xjCitys.province
    })
  },
  hotTaped: function(e){
    var itemId=e.target.id;
    var city=xjCitys.citys[itemId];
    wx.redirectTo({
      url: \'../index/index?name=\' + city.cityzh+\'&zh=\'+city.cityzh+\'&location=\'+city.location
    })
    //common.addCity(xjCitys.citys[itemId]);
  },
  chinaTaped: function(e){
    var itemId=e.target.id;
    var city=xjCitys.province[itemId];
    wx.redirectTo({
      url: \'../index/index?name=\' + city.cityzh+\'&zh=\'+city.cityzh+\'&location=\'+city.location
    })
    //common.addCity(xjCitys.citys[itemId]);
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

现存问题

百度地图API似乎存在问题，在当前调用天气信息的时候只会调用最远2020年9月16号的数据，这让本小程序暂时没有实用价值，比较遗憾。

主页面中的建议功能还没有实现。

结语

本次是第一次小程序编程实验，网络资料参考的较多，其中也还存在诸多问题，很多小程序内部的运行逻辑还没有掌握，但还是有些收获，希望能给后面的实验提供一些经验。本代码已经上传github。

2020.10.20

客服电话

电子邮件

请发表评论

全部评论

上一篇：

下一篇：

亲亲特价:怎么删除回收站图标

亲亲特价:怎么删除回收站图标

关于我们

产品与服务

解决方案

139-2527-9053