小程序模板網(wǎng)

《冷暖自知》天氣小程序

發(fā)布時間:2018-05-05 15:14 所屬欄目:小程序開發(fā)教程

《冷暖自知》天氣小程序

學(xué)無止境,以玩兒玩兒的心態(tài)去學(xué)習(xí)!
前一天晚上寫的,寫的不太好,第二天馬上修改了,如有差錯,請多指教。

花半天時間完成簡單的小程序應(yīng)用。適合小程序初學(xué)者。

步驟:

  1. 申請小程序帳號: 小程序注冊入口, 具體操作按照官網(wǎng)步驟執(zhí)行,相信你會看的很明白的(-
  2. 安裝微信開發(fā)者工具,打開工具填寫信息:①項目目錄為自己要開發(fā)小程序的位置②AppId在微信管理后臺的設(shè)置-開發(fā)設(shè)置中③項目名稱自己起,填寫完成點擊完成;
  3. 看到默認的初始小程序Hello Horld是不是很興奮,以上步驟不是我們今天研究的重點,下面進行我們的關(guān)鍵:
  4. 在index.wxml中寫我們的結(jié)構(gòu),index.wxss中寫css樣式,在index.js中寫我們的邏輯內(nèi)容。前提是要有css3和javascript的基礎(chǔ)哦?。?!
  5. 在index.js中定義兩個方法:getLocation()獲取用戶的地理位置,getWeather()獲取天氣的方法;
  6. 和風(fēng)天氣提供免費天氣接口(無償打廣告,哈哈~~),免費版只能獲取3天的天氣情況,開發(fā)文檔

廢話不多說,直接上代碼~~~

代碼

index.wxml部分


<!--index.wxml-->
<view class="container">
<view class="weather yesterday">
<view>
<view class='date'>今天</view>
<view class='location'>{{basic.location}}/{{basic.parent_city}}</view>
<view class='tmp'>{{today.tmp_min}}℃~{{today.tmp_max}}℃</view>
<view class='cond_txt'>{{today.cond_txt_d}}</view>
</view>
<view>
<view class='weather_icon'>
<image src='{{todyIcon}}'></image>
</view>
<view class='lastUpdateDate'>最后更新:{{update}}</view>
</view>
</view>
<view class="weather today">
<view>
<text>明天</text>
<view class='location'>{{basic.location}}/{{basic.parent_city}}</view>
<view class='tmp'>{{tomorrow.tmp_min}}℃~{{tomorrow.tmp_max}}℃</view>
<view class='cond_txt'>{{tomorrow.cond_txt_d}}</view>
</view>
<view>
<view class='weather_icon'>
<image src='{{tomorrowIcon}}'></image>
</view>
<view class='lastUpdateDate'>最后更新:{{update}}</view>
</view>
</view>
<view class="weather tomorrow">
<view>
<text>后天</text>
<view class='location'>{{basic.location}}/{{basic.parent_city}}</view>
<view class='tmp'>{{afterTomor.tmp_min}}℃~{{afterTomor.tmp_max}}℃</view>
<view class='cond_txt'>{{afterTomor.cond_txt_d}}</view>
</view>
<view>
<view class='weather_icon'>
<image src='{{afterTomorIcon}}'></image>
</view>
<view class='lastUpdateDate'>最后更新:{{update}}</view>
</view>
</view>
</view>

 

index.wxss部分


/**index.wxss**/
.container {
 height: 100%;
 width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-between;
 padding: 10px 15px;
 box-sizing: border-box;
} 
.weather{
 height: 110px;
 width: 100%;
 margin-bottom: 10px;
 border-radius: 5px;
 color: #FFF;
 padding: 5PX 15px;
 display: flex;
 font-size: 14px;
 box-sizing: border-box;
}
.weather>view{
 flex: 1;
}
.weather>view>view{
 margin: 5px 0;
}
.yesterday{
 background-color: #30BCAF;
}
.today{
 background-color: #78A4be;
}
.tomorrow{
 background-color: #FCB654;
}
.location,.cond_txt{
 font-size: 14px;
}
.date,.tmp{
 font-weight: bold;
}
.weather_icon{
 text-align: center;
 height: 65px;
}
.weather_icon image{
 width: 75px;
 height: 100%;
}
.lastUpdateDate{
 font-size: 10px;
 text-align: center;
}

 

index.js部分


//index.js
//獲取應(yīng)用實例
const app = getApp()

Page({ 
 data: {
   update: '',
   basic:{},
   today:{},
   tomorrow:{},
   afterTomor:{},
   todyIcon:'../../imgs/weather/999.png',
   tomorrowIcon:'../../imgs/weather/999.png',
   afterTomorIcon:'../../imgs/weather/999.png'
},
 onShow: function () {
this.getLocation();
},
//事件處理函數(shù)
 bindViewTap: function() {
   wx.navigateTo({
     url: '../logs/logs'
})
},
 getLocation:function(){
var that = this;
   wx.getLocation({
     type: 'wgs84',
     success: function (res) {
var latitude = res.latitude
var longitude = res.longitude
       that.getWeatherInfo(latitude, longitude);
}
})
},
 getWeatherInfo: function (latitude, longitude){
var _this = this;
var key = '';//你自己的key
//需要在微信公眾號的設(shè)置-開發(fā)設(shè)置中配置服務(wù)器域名
var url = 'https://free-api.heweather.com/s6/weather?key='+key+'&location=' + longitude + ',' + latitude;
   wx.request({
     url: url, 
     data: {},
     method: 'GET',
     success: function (res) {
var daily_forecast_today = res.data.HeWeather6[0].daily_forecast[0];//今天預(yù)報
var daily_forecast_tomorrow = res.data


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24272.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢