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.wxss**/
.container {
height: 100%;
text-align:center; background:#f6f8f8; padding:20rpx;font-size:16px;
}
.padb{padding-bottom: 15rpx;}
程序结果：
三、学习总结
首先先在官网了解了最基本的组件，然后老师也给我们大概讲解了常用的组件，虽然刚接触是不大懂，但是在后面自己操作的时候，在慢慢的去接触和使用，通过查找网上的资料了解它的用法，然后就是完成课后题目。
举个例子，之前完成的地图这一功能，在组件中也有相应的属性，怎么使用，有哪一些属性，就是方便开发人员指导要输入哪一些信息，或者通过这些知道自己需要哪一些信息。