天气微信小程序移动端原型和交互演示

昨天用天气微信小程序移动端参加了一个微信小程序校赛。

项目原型图的交互演示

原型图是利用Axure RP 9软件制作的。

这个软件有着丰富的交互效果，能够让设计出来的原型图接近更真实的用户交互体验。用简单的交互面板和操作语句就可以实现复杂的交互，代码编写能力要求不高，确实也降低了设计的门槛。

具备全面的原型设计工具，并且可以自动适应不同设备和屏幕尺寸，确保原型在各种终端上的效果一致。

同样他可以实现多人实时协作的模式，成员之间可以在线编辑和评论项目。

制作天气预报小程序的开发背景

其实就是想着制作一款可以随心查询不同城市天气状况的微信小程序，便于在近期活动城市有变的情况下比较方便快捷的了解到自己想要了解的城市。

实现小程序天气预报

在小程序上设置添加按钮、删除按钮和个人登录页面。

添加城市

addCitys:function(e){
    //由于wxml是data-index获取第多少个  data-model则是e.currentTarget.dataset.model
    const index=e.currentTarget.dataset.index
    // 通过index索引30个以完成标记的中的指定元素
    let city=this.data.processedOptionalCity[index]
    // 并根据其对应标记的布尔值来判断是添加城市还是提示
    if(city.isActive==true){
        // 该城市以在citys里
      wx.showToast({
        title: '已有该城市',
        icon: 'none', // 可以设置为 'none'、'success'、'loading' 等，'none' 表示不显示图标
        duration: 2000 // 提示框显示的时长，单位为毫秒
      });
    }else{
        // 由于是city.name是中文先转换
      let name=encodeURIComponent(city.name);
      console.log(name,city.name);
      wx.request({
        url: `http://localhost:3000/weather/${name}`, 
        method: 'GET', // 明确请求方法
        header: {
            'Content-Type': 'application/json'
        },
        // 获取执行成功后
        success: (res) => {
            // 在原有citys上添加新城市数据
          this.data.citys.push(res.data)
          console.log("ksjdkdsf");
          this.setData({
            citys:this.data.citys,
          })
          // 一但添加成功就返回首页
          const citys = this.data.citys;
          const citysStr = encodeURIComponent(JSON.stringify(citys));
        //   将新的以完成添加后的总城市数据给首页
          const url = `/pages/index/index?citys=${citysStr}`;
          wx.redirectTo({
            url: url,
            // 跳转成功后
            success: function (res) {
              console.log('页面跳转成功', res);
            },
            // 跳转失败后
            fail: function (err) {
              console.log('页面跳转失败', err);
            }
          })
        }
      })
    }
  },

删除城市

delectCity:function(e){
    //由于wxml是data-index获取第多少个  data-model则是e.currentTarget.dataset.model
    let index=e.currentTarget.dataset.index
    let newCitys = this.data.citys;
    // splice会修改原数组   已方便获取当前点击删除的城市信息
    newCitys.splice(index, 1);
    this.setData({
      citys:newCitys
    })
    //携带用户昵称和数据
    const citys=this.data.citys
    const name=this.data.userName
    
    // 将当前的信息提交给对应用户更新
    wx.request({
      url: `http://localhost:3000/userCityData`, 
      method: 'POST', 
      // 数据
      data: { 
        nickname:name,
        data:citys
      },
      header: {
        "Content-Type": "application/json" // 数据格式类型，也可根据实际情况设为"application/x-www-form-urlencoded"等
      },
    });
  },

个人登录页面依托node.js连接了MongoDB数据库，将用户登录的昵称记录在了数据库。

时间温差图表

结合其他天气预报APP的特点，小程序也同样设置了七小时温度折线图以及七小时温差柱状图。

图表引用了echarts技术，并且在CSS部分设置了动画效果.

ECharts 是一个由百度开发的开源数据可视化库，专为 Web 应用程序设计。具备多种图表类型。

链接：echarts.apache.org/zh/index.ht…

天气小程序项目总结

根据开头那个原型图，通过小程序代码其实已经实现。但是在页面美观度方面还是不够的，还是需要不断改进的。