范围:深圳亚博app开发,软件定制开发,亚博app软件开发公司,深圳软件外包公司.TEL:3447249690
当前位置:首页 > app小程序

亚博-天气小程序实战开发教程

07-06 亚博APP
摘要:气候接口欠好找,我花了几个小时搜了国表里十几个气候API,很少有汗青气候查询,有的也是付费办事。

气候接口欠好找,我花了几个小时搜了国表里十几个气候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 。

// 先在项目中引入微信小法式JavaScript SDKvar QQMapWX = require(\'../../lib/qqmap-wx-jssdk.min.js\');// onLoad中,实例化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问题不会影响法式。一个小时今后,审核经由过程了,

审核后,兴奋的发给伴侣试用。此刻才发现一个主要的问题,假如哪天没打开,第二天就没有昨日气候了,需要天天都打开一次!真但愿有免费的汗青气候接口啊,哪怕只有简化的昨日气候也行啊。

保举浏览:小法式入门模块化开辟教程 微信小法式开辟教程

版权保护: 本文由 亚博app开发 原创
转载请保留链接: http://www.jiayuanLi.com

关于我们      深圳亚博app定制开发软件有限公司,自2013年成立以来,为上千家企业提供软件外包、系统软件开发、亚博app开发、微信公众号开发、深圳亚博小程序开发等各种优秀的软件定制开发服务.关键词:软件外包公司、手机软件开发、app制作开发、手机亚博app开发、小程序开发公司【TEL】:3447249690 微信:3447249690 QQ:3447249690
  • 1578文章总数
  • 13访问次数
  • 建站天数