搜索

天气微信小程序实战开发教程 手把手教你做

9妹 /2018年06月28日 15:20/ 分类:微信平台/阅读:2426
天气接口不好找,我花了几个小时搜了国内外十几个天气API,很少有历史天气查询,有的也是付费服务。更多微信小程序尽在:http://xcx.96weixin.com/天气接口不好找,我花了几个小时搜了国内外十几个天气API,很少有...

  天气接口不好找,我花了几个小时搜了国内外十几个天气API,很少有历史天气查询,有的也是付费服务。更多微信小程序尽在:http://xcx.96weixin.com/

  

天气微信小程序实战开发教程 手把手教你做


  天气接口不好找,我花了几个小时搜了国内外十几个天气API,很少有历史天气查询,有的也是付费服务。免费天气预报接口倒是很多。

  1. 注册小程序

  小程序注册入口在这里 https://mp.weixin.qq.com/wxopen/waregister?action=step1 填写基本信息后,验证邮箱和微信,就能登录管理后台了。

  

天气微信小程序实战开发教程 手把手教你做


  在管理后台填写小程序名称、介绍和头像,会自动生成小程序码。

  在开发设置页面可以看到AppID(小程序ID),记住这个 AppID。

  2. 使用微信开发者工具

  微信开发者工具在这里下载 https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 下载后,用微信扫码打开,创建项目,这需要填入刚才的AppID。

  

天气微信小程序实战开发教程 手把手教你做


  假设你已经知道了微信开发的基础,代码应该有类似的结构。

  3. 获取位置信息

  (注:和风天气支持经纬度查天气,第3步是可选步骤)

  要预报当地天气,需要知道位置,微信小程序有 wx.getLocation 可以获取经纬度。

  wx.getLocation({

  type: 'wgs84',

  success: function(res) {

  var latitude = res.latitude

  var longitude = res.longitude

  var speed = res.speed

  var accuracy = res.accuracy

  }

  })

  但是天气查询的接口很多都不支持经纬度查询。我们需要用经纬度查城市名,这次使用腾讯地图的API。

  我们需要的接口就是这个页面 http://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html 中的 reverseGeocoder,用经纬度可以获取详细的城市信息,但是我们只需要城市名就可以了。

  要使用接口,先要注册腾讯lbs服务的开发者,页面右上角用QQ号登录,然后验证手机号,然后就可以调用接口了。

  在小程序中使用前,要在小程序设置界面,开发设置中添加request合法域名: http://apis.map.qq.com 。

  // 先在项目中引入微信小程序Java SDK

  var QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js');

  // 中,实例化API核心类

  qqmapsdk = new QQMapWX({

  key: 'QQ lbs 开发者密钥'

  });

  // 在 onShow 中获取城市名

  qqmapsdk.reverseGeocoder({

  location: {

  latitude: latitude, // 使用 wx.getLocation 的返回值

  longitude: longitude

  },

  success: function (res) {

  console.log(res);

  if(res.status == 0){

  // 获取到城市名

  let city_name = res.result.ad_info.city;

  }

  },

  fail: function (res) {

  console.log(res);

  },

  complete: function (res) {

  // console.log(res);

  }

  });

  4. 查询天气

  得到城市名后,再用城市名查询天气的接口,得到未来三天天气预报。

  天气接口使用和风天气 https://www.heweather.com/douments/api/s6/weather-forecast 。和风天气的接口比较简洁,返回值也有中文描述可以直接显示。免费版的天气信息足够多。历史天气接口需要付费,我们先用免费的接口。

  同上,要使用接口,需要先注册开发者账户,验证手机。

  在小程序中使用前,要在小程序设置界面,开发设置中添加request合法域名: http://free-api.heweather.com 。

  wx.request({url:'https://free-api.heweather.com/s6/weather/forecast',data:{location:location,key:'和风天气开发者密钥',rnd:new Date().getTime()// 随机数,防止请求缓存},success:function(res){ console.log(res); } })

  拿到天气以后在本地做缓存,最多只存两天的记录。

  5. 美化前端界面

  对前端程序员来说,设计酷炫的界面有点难,但是基本的审美还是有的。

  用关键词 “simple weather app” 在 Google 搜图片,出来的看起来舒服的界面,借用一下配色。

  搜索结果中还发现一个可爱的logo,还是免费的!只有一条要求,需要在使用时展示这个网站的链接,因为是小程序,不能外链,我放了文本格式的网站地址,就是这个 https://www.freepik.com/free-vector/simple-weather-app_874144.htm 。

  

天气微信小程序实战开发教程 手把手教你做


  做好的界面。

  晚上又优化了一下代码,还在12点前后做了测试,修改了几个问题,就提交审核了。

  6. 测试小程序

  就算是这么小的项目,测试也必不可少。经过测试发现和风天气的返回值,是未来三天的天气数组,12月7日晚上调用返回的结构与API一样,包含了[12-7,12-8,12-9]的天气。

  和风天气接口测试

  • 问题1:但是过了午夜12点以后,返回的仍然是[12-7,12-8,12-9],就不能随便的使用 arr[0] 当作今日天气了。

  • 问题2:早上起床不到8点,看审核还没通过,再调试一次看看,这次调用返回的数组只有一个天气[12-8],倒是有今天了,明天后天是没有的,好在我现在还不需要。

  7. 审核通过

  八点又看了一下,上面的API问题不会影响程序。一个小时以后,审核通过了,

  审核后,兴奋的发给朋友试用。现在才发现一个重要的问题,如果哪天没打开,第二天就没有昨日天气了,需要每天都打开一次!真希望有免费的历史天气接口啊,哪怕只有简化的昨日天气也行啊。


更多阅读
扩展阅读

9妹专栏

NINE SISTERS COLUMN

最新文章

NEWS ARTICLES

新媒体训练营

NEW MEDIA TRAINING CAMP
排版
写作
2014-2017 96编辑宝 淄博多维网络科技有限公司 All right reserved. 版权所有 沪ICP备19026583号-16