1.

微信小程序已经火了好一段时间了，个人觉得学习成本比较低，如果你有Web前端开发的经验，这应该算是小儿科的事了，然而对于我这样的安卓开发者来说，移动端的小程序，貌似在界面上还是比较麻烦的，css毕竟还是比较让人头大的哈哈，不知道有没有人和我一样的想法。

2.

今天，我通过资料学习了开发一个微天气的微信小程序，再次作为主要内容，学习记录，磨砺自己。

3.

微信小程序的学习，我还是从官方的文档和部分学习资料开始，本文未使用第三方的框架，只是比较初级的功能，展示天气的在线查询。

4.

首先是搭建界面，界面比较简介，如下所示。

5.

1.创建项目，本文APPID使用了测试号的id，因为本项目只有一个界面，故在page页面新建weather目录以及weather.js等文件；

"pages":["pages/weather/wether",],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"微天气","navigationBarTextStyle":"black"}6.

2.编写界面代码，就是UI设计了，创建weather.wxml，代码如下。题外话：这里就比较简单的设计一些界面了，至少现在对我来说也是挺麻烦的事，不知道大佬们有没有更好的途径去学习小程序的css和布局。

viewclass"content"viewclass"info"viewclass"city"{{city}}{{today}}/view!--当天温度--viewclass"temp"{{weather.wendu}}℃/view!--天气描述--viewclass"weather"{{weather.ganmao}}/view/view!--昨天的天气信息--viewclass"yesterday"viewclass'detail'textclass"yesterday-title"昨天/text{{weather.yesterday.date}}/viewviewclass'detail'{{weather.yesterday.type}}!--天气类型，如阴、晴--{{weather.yesterday.fx}}!--风向--{{weather.yesterday.fl}}!--风力--{{weather.yesterday.low}}!--最低温度--{{weather.yesterday.high}}!--最高温度--/view/viewview!--最近五天天气信息--viewclass"forecast"viewclass"next-day"wx:key"{{index}}"wx:for"{{weather.forecast}}"!--日期--viewclass"detaildate"{{item.date}}/view!--天气类型--viewclass"detail"{{item.type}}/view!--最高温度--viewclass"detail"{{item.high}}/view!--最低温度--viewclass"detail"{{item.low}}/view!--风向--viewclass"detail"{{item.fengxiang}}/view!--风力--viewclass"detail"{{item.fengli}}/view/view/view/view!--搜索--viewclass"search-area"inputbindinput"inputing"placeholder"请输入城市名称"value"{{inputCity}}"/inputbuttontype"primary"size"mini"bindtap"bindSearch"查询/button/view/view7.

3.编写界面的样式文件，在weather.wxss中编写界面样式代码。

.content{height:100%;width:100%;display:flex;flex-direction:column;font-family:微软雅黑，宋体;box-sizing:border-box;padding:20rpx10rpx;color:#252525;font-size:16px;background-color:#f2f2f8;}.info{margin-top:20rpx;width:100%;height:160px;}.city{margin:20rpx;border-bottom:1pxsolid#043567;}.detail{color:#043567;}.temp{font-size:120rpx;line-height:130rpx;text-align:center;padding-top:20rpx;color:#043567;}.weather{line-height:22px;margin:10px0;padding:010px;}.yesterday{width:93%;padding:20rpx;margin-top:50rpx;border-radius:10rpx;border:1pxsolid#043567;}.yesterday-title{color:red;}.forecast{width:100%;display:flex;margin-top:50rpx;align-self:flex-end;}.next-day{width:20%;height:450rpx;text-align:center;line-height:30px;font-size:14px;margin:03rpx;border:1pxsolid#043567;border-radius:10rpx;}.date{margin-bottom:20rpx;border-bottom:1pxsolid#043567;color:#f29f39;}.search-area{display:flex;background:#f4f4f4;padding:1rem0.5rem;}.search-areainput{width:70%;height:38px;line-height:38px;border:1pxsolid#ccc;box-shadow:inset0010px#ccc;color:#000;background-color:#fff;border-radius:5px;}.search-areabutton{width:30%;height:40px;margin-left:5px;line-height:40px;}8.

4.开始写逻辑层的代码，在weather.js中编写主要功能，我们现在page函数中，在data里创建临时数据wether等数据，不仅可以用来预览我们刚写的界面，还将用来作为后面查询的数据。

data:{weather:{wendu:18,ganmao:'易感人群应适当减少室外活动。',yesterday:{date:'17日星期四',type:'阴',fx:'南风',fl:'微风级',low:'低温8℃',high:'高温16℃'},forecast:[{date:'18日星期五',type:'阴',high:'高温16℃',fengxiang:'南风',fengli:'微风级',low:'低温8℃'},{date:'19日星期六',type:'阴',high:'高温16℃',fengxiang:'南风',fengli:'微风级',low:'低温8℃'},{date:'20日星期日',type:'阴',high:'高温16℃',fengxiang:'南风',fengli:'微风级',low:'低温8℃'},{date:'21日星期一',type:'阴',high:'高温16℃',fengxiang:'南风',fengli:'微风级',low:'低温8℃'},{date:'22日星期二',type:'阴',high:'高温16℃',fengxiang:'南风',fengli:'微风级',low:'低温8℃'}]},today:'2019-09-19',city:'无锡',inputCity:''}9.

以上是我们需要展示的数据，那数据哪里来呢？我的想法是通过微信的API：wx.getLocation(Objectobject)来获取所在地的经纬度，然后通过百度地图的webapi进行逆地理编码，从而获取所在城市名称，该接口也可以放在浏览器中使用：

http://api.map.baidu.com/reverse_geocoding/v3/?ak您的akoutputjsoncoordtypewgs84lllocation31.225696563611,121.49884033194//GET请求10.

天气预报接口，来查询城市天气：

http://wthrcdn.etouch.cn/weather_mini?city城市名称11.

逻辑代码是以下是全部代码：

//pages/weather/wether.jsvarutilrequire('../../utils/util.js');varBD_AK'请使用你在百度平台的项目AK';Page({/***页面的初始数据*/data:{weather:{wendu:18,ganmao:'易感人群应适当减少室外活动。',yesterday:{date:'17日星期四',type:'阴',fx:'南风',fl:'微风级',low:'低温8℃',high:'高温16℃'},forecast:[{date:'18日星期五',type:'阴',high:'高温16℃',fengxiang:'南风',fengli:'微风级',low:'低温8℃'},{date:'19日星期六',type:'阴',high:'高温16℃',fengxiang:'南风',fengli:'微风级',low:'低温8℃'},{date:'20日星期日',type:'阴',high:'高温16℃',fengxiang:'南风',fengli:'微风级',low:'低温8℃'},{date:'21日星期一',type:'阴',high:'高温16℃',fengxiang:'南风',fengli:'微风级',low:'低温8℃'},{date:'22日星期二',type:'阴',high:'高温16℃',fengxiang:'南风',fengli:'微风级',low:'低温8℃'}]},today:'2019-09-19',city:'无锡',inputCity:''},/***查询所在地区的天气接口*/searchWeather:function(cityName){if(cityName''||cityNamenull||cityNameundefined||cityName.length2){wx.showModal({title:'提示',content:'请输入有效的城市名称',showCancel:false,success:function(res){}})return}console.log('城市：'+cityName);varselfthis;wx.request({url:'http://wthrcdn.etouch.cn/weather_mini?city'+cityName,header:'Content-Type:application/json',success(res){if(res.data.status1002){wx.showModal({title:'提示',content:'输入的城市名称有误，请重新输入！',showCancel:false,success:function(res){self.setData({inputCity:''})}})}else{varweatherres.data.data;varyesterdayweather.yesterday;yesterday.flyesterday.fl.replace("![CDATA[",'').replace("]]",'');for(vari0;iweather.forecast.length;i++){vardweather.forecast[i].date;weather.forecast[i].date''+d.replace('星期','星期');varfengliweather.forecast[i].fengli;fenglifengli.replace("![CDATA[",'').replace("]]",'');weather.forecast[i].fenglifengli;}self.setData({weather:weather,city:cityName,inputCity:''})}}})},/***监听输入框输入的事件监听*/inputing:function(e){console.log("inputing:"+e.detail.value);this.setData({inputCity:e.detail.value})},/***查询事件*/bindSearch:function(){this.searchWeather(this.data.inputCity);},/***生命周期函数--监听页面加载*/onLoad:function(options){this.setData({today:util.formatTime(newDate).split('')[0]})varselfthis;wx.getLocation({type:'wgs84',success:function(res){constlatituderes.latitudeconstlongituderes.longitudevarurl"http://api.map.baidu.com/reverse_geocoding/v3/?ak"+BD_AK+'outputjsoncoordtypewgs84lllocation'+latitude+','+longitude;console.log('url:'+url);wx.request({url:url,header:'Content-Type:application/json',success(res){if(res.data.status0){varcityres.data.result.addressComponent.city.replace('市','');self.searchWeather(city);}}})},})}})12.

注意：本项目注意的地方就是，请在测试项目中加入两个接口域名，保证request的域名合法性，不然在调用wx.request时会提示错误的。

13.

好了今天就先学习到这里。继续加油吧！