纪念日和天气查询微信小程序

我的第一个微信小程序

1.微信小程序介绍

  介绍：这个小程序是我的一个练手的小项目，主要的功能包括纪念日和天气查询，代码地址：https://github.com/Jin0811/WeChatApp.git
  纪念日功能可以允许用户创建纪念日和删除纪念日，用户输入名称并选择时间，当选择过去的日期时，点击添加后，会显示已经过去了多少天，当选择未来的时间时，点击添加后，会显示还有多少天。在添加完成纪念日后，用户也可以选择删除纪念日。
  天气查询功能可以为用户提供天气信息，当用户授权后，可以获取到用户所在的位置，并查询天气，当然，用户也可以自己选择全国范围内的省市区来查询天气。

2、页面展示

3、制作微信小程序时的一些心得

主界面

1. 如果需要获取到用户的公开信息，可以使用open-data，不同的type值代表着不同的信息，open-data不需要经过用户的授权。userAvatarUrl代表用户的微信头像，userNickName代表用户的微信昵称，其他的type值可以查阅微信小程序的文档。

   <open-data type="userAvatarUrl"></open-data>
   <open-data type="userNickName" lang="zh_CN"></open-data>
   

2. 如果想要给小程序添加一个背景图片，在wxss中，是不能使用background-image:url(图片路径)的方式来为一个界面添加背景图片，而是要先将背景图片转换为Base64，再将Base64编粘贴到括号内，就可以设置背景图片啦，可以使用http://imgbase64.duoshitong.com/这个网站进行图片的转换。

   background-image: url("图片路径"); /*该方式不能设置背景图片*/
   background-image: url("图片的Base64编码");/*该方式可以设置*/
   

纪念日界面

  微信小程序页面主要的地方在JS代码中，有几个需要注意的地方：

1. 时间的转换问题
     纪念日最重要的地方是时间的转换，而时间又分为过去的时间和未来的时间，这个时候就需要使用判断，来判断用户输入的时间是过去的还是未来的，如果是过去的时间，就显示已经过去了多少天，如果是未来的时间，就显示还有多少天。
     这个地方，需要用到是date对象，时间戳以及时间的取正。我采用的方式是，分别获取到用户选择的日期和今天的日期，都转换为日期戳，今天的日期戳减去用户选择日期的时间戳，再进行取正。
2. 本地缓存问题
     用户创建了纪念日，肯定是不希望下次打开页面时，显示的是一片空白，这时候就需要用到微信的本地缓存，将用户输入的纪念日和日期储存起来，每一次打开页面时，都加载缓存中的数据。
3. 需要注意的是，日期的转换需要进行两次，页面打开时，转换一次，用户添加时转换一次。如果页面打开时不更新的话，那么日期就不会自动更新，还是以用户输入的那天为准，所以需要再onload中进行一次转换。
4. 删除纪念日
     我的做法是在进行本地缓存的时候，将用户添加时的时间戳也储存下来，作为该纪念日区别与其他纪念日的id。但是我这种方式有一个bug，这个bug就是如果两个纪念日的日期相同，那么他们的id就是一样的，因为我的时间戳只到天，并没有精确到毫秒，解决方法可以考虑将用户选择日期那一刻的时间戳，精确到毫秒作为纪念日的id。

天气界面

  天气界面我是跟着b站的一位up主的视频做的，原本只想做一个纪念日的小程序，但是提交审核时一直无法通过，提示小程序的类别不正确，无法通过审核。
  后来查看类别，发行工具类别中有一个天气查询的页面，我就添加了一个天气查询页面，才通过的审核。我写的可能也不是很直观，大家对天气查询感兴趣的可以去b站搜一些天气查询相关的小程序，看视频可能会更好一些。

1. 天气查询使用的是和风天气的API，分为商业版和免费版，如果只是做一个自己的微信小程序，不为盈利的话，使用免费的就可以啦，注册一下，创建项目，获取到自己的key。

// 通过获取picker的value，省市区，来获取天气
  getWeatherByAddress: function () {
    var that = this;
    // console.log(this.data.region);
    wx.request({
      url: 'https://free-api.heweather.net/s6/weather/now?',
      data: {
        location: that.data.region[1],
        key: 'ec8a14c1a3534a34ae28237e12c71d83'
      },
      success: function (result) {
        // console.log(result.data);
        that.setData({
          now: result.data.HeWeather6[0].now,
        })
      },
    })
  },

  这个函数是根据picker中用户选择的省市区来查询天气的，所以需要设置一个picker。

2. 天气查询页面的一个难点在于，怎么获取到用户的位置，使得用户开始页面时，显示的就是用户所在位置的天气，我的想法是通过wx.getLocation来取得用户所在位置的经度和纬度，使用经度和纬度来查询用户所在位置的天气。

  // 通过经度和纬度来获取天气
  // 两个参数分别为经度和纬度
  getWeatherByLongAndLat: function (longitude, latitude){
    var that = this;
    wx.request({
      url: 'https://free-api.heweather.net/s6/weather/now?',
      data:{
        location: longitude + "," + latitude,
        // that.data.region[1]
        key:'ec8a14c1a3534a34ae28237e12c71d83'
      },
      success:function(result){
        // console.log(result.data);
        let province = result.data.HeWeather6[0].basic.admin_area;
        let city = result.data.HeWeather6[0].basic.parent_city;
        let location = result.data.HeWeather6[0].basic.location;
        var addressArray = [province, city, location];
        wx.setStorage({
          key: 'address',
          data: addressArray,
        });
        that.setData({
          now: result.data.HeWeather6[0].now,
          region: [province, city, location],
        })
      },
    })
  },

总结

  这个微信小程序的介绍就到这里啦，只是大概地讲解了一下，完整的代码和图片放在了我的GitHub上。地址：https://github.com/Jin0811/WeChatApp.git
  喜欢的可以去看看，给个小星星，也欢迎大家跟我交流呀~