day 05 实习日志

一、学习内容

（一）学习怎么样配置服务器域名；

（二）学习怎么样使用接口；

（三）学习怎么样开发天气预报小程序；

（四）学习怎么使用组件；

 

 

二、课后作业

天气预报小程序开发：

（源码来自https://www.tianqiapi.com）

源码：

//index.js

const app = getApp()

 

Page({

data: {

weather: { 'wea_img': 'qing' },//实况天气

weatherweek: [],//七日天气

},

onLoad: function () {

this.getapi();

},

getapi: function () {

var _this = this;

// 获取IP地址

wx.request({

url: 'https://tianqiapi.com/ip/',

data: {

},

method: 'POST',

header: {

'content-type': 'application/x-www-form-urlencoded'

},

success: function (res) {

console.log(res);

// 根据IP获取天气数据

_this.weathertoday(res.data.ip); _this.weatherweekday(res.data.ip);

}

});

},

// 天气api实况天气

weathertoday: function (ip) {

var _this = this;

wx.request({

url: 'https://www.tianqiapi.com/api/?version=v6',

data: {

'ip': ip

},

method: 'GET',

header: {

'content-type': 'application/x-www-form-urlencoded'

},

success: function (res) {

_this.setData({

weather: res.data

});

console.log(_this.data.weather)

}

});

},

// 天气api实况天气

weatherweekday: function (ip) {

var _this = this;

wx.request({

url: 'https://www.tianqiapi.com/api/?version=v1',

data: {

'ip': ip

},

method: 'GET',

header: {

'content-type': 'application/x-www-form-urlencoded'

},

success: function (res) {

_this.setData({

weatherweek: res.data

});

console.log(_this.data.weatherweek)

}

});

}

})

 

<!--index.wxml-->

<view class='container'>

<view class='padb' style='font-size:16px; font-weight:bold;'>{{weather.city}}实况天气预报</view>

<view>气象台 {{weather.update_time}} 更新</view>

<view class='padb'>{{weather.tem}}℃ {{weather.wea}}</view>

<view class='padb'>

<image mode="widthFix" src="http://cddn.huyahaha.com/tianqiapi/skin/qq/{{weather.wea_img}}.png" style="width:120rpx;" />

</view>

<view class='padb'>{{weather.win}} {{weather.win_speed}} {{weather.win_meter}}</view>

<view class='padb'>湿度: {{weather.humidity}}</view>

<view class='padb'>能见度: {{weather.visibility}}</view>

<view class='padb'>气压: {{weather.pressure}}hPa</view>

<view class='padb'>空气质量 {{weather.air_level}}</view>

<view class='padb'>{{weather.air_tips}}</view>

<view class='padb' style='font-size:16px; font-weight:bold;'>{{weather.city}}七日天气</view>

<block wx:for='{{weatherweek.data}}' wx:key='key_list'>

<view class='padb'>{{item.day}} - {{item.wea}} - {{item.win[0]}} - {{item.tem1}}/{{item.tem2}}</view>

</block>

</view>

 

 

/**index.wxss**/

.container {

height: 100%;

text-align:center; background:#f6f8f8; padding:20rpx;font-size:16px;

}

.padb{padding-bottom: 15rpx;}

 

 

程序结果：

 

 

三、学习总结

   首先先在官网了解了最基本的组件，然后老师也给我们大概讲解了常用的组件，虽然刚接触是不大懂，但是在后面自己操作的时候，在慢慢的去接触和使用，通过查找网上的资料了解它的用法，然后就是完成课后题目。

  举个例子，之前完成的地图这一功能，在组件中也有相应的属性，怎么使用，有哪一些属性，就是方便开发人员指导要输入哪一些信息，或者通过这些知道自己需要哪一些信息。