1.

小程序-天气预报，在现实生活中是非常常用的，我们平时都可以通过自己的手机上面或网上进行查看天气等等；这个demo可以应用到自己的小程序模块上。本案例先弄个简约版本的v1.0.0…

2.

前期准备：

申请自己的微信小程序，云开发环境也弄一下（用来模拟后端增删查改数据）；气象数据：看完了百度天气，数据太少了；最后使用的是和风天气，需自行注册账号，获取自己的key；版本对比：免费版（数据少一些），建议申请开发者版（需个人去认证一下），商业版（功能更多）但要Q，博主木有Q；具体使用自行查阅文档哈…3.

天气来源：我用的是开发版（项目用到接口有：实况天气now，7天预报forecast，逐3小时预报hourly，生活指数lifestyle，城市搜索find，热门城市top等等），相关参数看文档哈…

4.

授权-位置：具体看一下微信小程序文档

5.

数据存储：具体看一下云开发文档

6.

页面大致如下，后续再进行优化升级；部分代码展示：

//授权用户位置-先判断autoUserLocation(){letthatthis;wx.getSetting({success(res){if(!res.authSetting['scope.userLocation']){console.log('位置未授权')that.globalData.is_Address0;wx.authorize({scope:'scope.userLocation',success(res){that.getWxLocation();},fail(res){console.log('~~取消位置授权~~')wx.showModal({title:'定位失败',content:'请允许”使用我的地理位置“后，再查看定位城市信息，默认为您展示广州的天气信息。',showCancel:false,success(res){if(res.confirm){wx.openSetting({success:(ret){if(ret.authSetting['scope.userLocation']){that.getWxLocation();}else{//返回-回调if(that.isCancleCallback){that.isCancleCallback(ret);}}}})}}})}})}else{console.log('位置已授权')that.getWxLocation();}}})},//获取今日天气getWeather(location){letthatthis,keyglobalData.key;constnewWeatherRecordthat.data.weatherRecord,newWeaValthat.data.weatherRecord.val;varparams{};params.locationlocation;params.keykey;that.setData({weatherParms:params})util.showLoading('加载中...')//***现在的***util.requestAjax.post(`${globalData.requestUrl.weather}`+'now',params).then((res){//console.log(res)constdatares.data.HeWeather6[0],dataNowdata.now;newWeaVal['pres']dataNow.pres;newWeaVal['hum']dataNow.hum;newWeaVal['wind_dir']dataNow.wind_dir;newWeaVal['wind_spd']dataNow.wind_spd;newWeaVal['fl']dataNow.fl;newWeaVal['vis']dataNow.vis;that.setData({nowWeather:dataNow,cityName:data.basic.location,weekday:util.formatWeekday(newDate()),weatherRecord:newWeatherRecord})}).catch((res){console.log(res);});that.getHourWeather();that.getSevenWeather();that.getLifeStyle();},//获取我的地址从云后台getMyCityWeater(){letthatthis;util.showLoading('加载中...');db.collection('cityWeather').where({_openid:that.data.openid}).get({asyncsuccess(res){//console.log(res.data)varresultres.data;if(result.length0){console.log('没有自己');}else{varcityArrresult[0].cityArr;//异步回调async一下letarr[],newArr;for(leti0;icityArr.length;i++){try{letvalawaitthat.getWeather(cityArr[i]);//console.log(val)arr.push(val);//重整一下数组newArrarr.map(((item,index){returnObject.assign(item,{city:cityArr[index],isTouchMove:false})}))}catch(e){}}that.setData({myCityWeatherList:newArr})}},fail(res){console.log(res)}})},7.

上架一下：仅供学习参考，暂时不分享源码，如有问题留言哦~