这次的微信小程序的总结是在隔了一天之后才发出来,因为原本用来练手的小程序写的太乱了只好重新再写一个出来。
任务:通过api接口设计一个天气预报页面
通过api接口设计一个天气预报页面
因为在此之前在实训中做过一个将“一言”的数据导入到微信小程序页面内的操作,所以并不是很难,主要是排版还有接口调用的for循环需要一点时间。下面顺便先将“一言”的实现情况放一下。
js源代码(有的原本自带的动作相应没有删掉,实际可以不用后半段部分源代码):
Page({
data: {
hitokoto:" ",
from:" ",
windowWidth: '',
windowHeight: '',
fu: "",
fu1:"",
fu2:"",
},
click:function(){
// 一言
var _this=this;
wx.request({
url: 'https://v1.hitokoto.cn/',
// 请求参数
data: {
c:"d"
},
header: {
'content-type': 'application/json'
},
success(res) {
console.log(res.data)
_this.setData({
fu:"————",
fu1:"『",
fu2:"』",
hitokoto:res.data.hitokoto,
from:res.data.from,
})
}
})
},
// 获取设备信息
getInfo: function () {
},
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
var _this = this;
wx.getSystemInfo({
success: function (res) {
_this.setData({
model: res.model,
pixelRatio: res.pixelRatio,
windowWidth: res.windowWidth,
windowHeight: res.windowHeight,
language: res.language,
version: res.version,
system: res.system,
platform: res.platform
})
},
fail: function (res) {
},
complete: function (res) {
}
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
wxml源代码(其实就是一个简单的按钮):
<view class='bj'>
<!-- 按钮 -->
<view><button bindtap='click' style="opacity:{{0.5}}" class='click'>点击一下</button></view>
<!-- 一言 -->
<view class='ban'><text>{{fu1}}{{hitokoto}}{{fu2}}\n{{fu}}{{from}}</text></view>
</view>
wxss源代码(也是因为背景basc64代码太长这里就直接省略掉先):
.ban{
height: 900rpx;
display: flex;
justify-content: center;
align-items: center;
padding-left: 40rpx;
padding-right: 30rpx;
font-size: 50rpx;
font-weight: 600;
line-height: 100rpx;
color:white;
text-shadow:2px 2px 4px #8d8b8b;
}
.click{
background-color:rgab(0,0,0,0.8);
color:rgb(124, 124, 124);
padding-left: 30rpx;
padding-right: 30rps;
border: none;
border-radius:0%;
font-weight: 600;
flex-direction: row;
align-items: center;
justify-content: center;
}
.bj{
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
background-image: url("")
}
实现效果图:
下面就是天气预报界面的源代码:
js源代码:
Page({
data: {
weather:{},
flag:false,
todayIcon:'../../images/weather/qing.png'
},
onLoad: function (options) {
// 天气请求
var _this = this;
wx.request({
url: 'https://www.tianqiapi.com/api/',
method:"get",
dataType:"json",
data: {
version:'v1',
city:'湛江'
},
header: {
'content-type': 'application/json'
},
success(res) {
console.log(res.data);
_this.setData({
weather:res.data,
flag:true,
todayIcon: '../../images/weather/' + res.data.data[0].wea_img+'.png',
})
}
})
},
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
wxml源代码:
<!-- 背景 -->
<view class='pock' style="opacity:{{0.7}}">
<!-- 正式天气 -->
<view class='first'>
<view><image src='{{todayIcon}}' class='yun'></image>
<text wx:if="{{flag}}" class='one'>{{weather.city}}</text>
</view>
<text wx:if="{{flag}}">{{weather.data[0].date}}</text>
</view>
<!-- 第一个框框 -->
<view class='beikuang' style="opacity:{{0.6}}">
<view class='twoface'>
<text>今天天气预报:{{weather.data[0].wea}}</text><text>空气质量:{{weather.data[0].air_level}}
</text>
</view>
</view>
<!-- 第二个框框 -->
<view class='beikuang' style="opacity:{{0.6}}">
<text wx:if="{{flag}}" class='clothes'>穿衣指数\n『{{weather.data[0].index[3].desc}}』</text>
</view>
<!-- 第三个框框 -->
<view class='beikuang' style="opacity:{{0.6}}">
<view>
<view wx:for="{{weather.data}}">
<view class='future'><view><text space='ensp'>{{item.day}} {{item.wea}}</text></view><view>{{item.tem2}}</view></view>
</view>
</view>
</view>
</view>
wxss源代码:
.two{
display: flex;
justify-content: space-between;
}
.yun{
padding-top: 20rpx;
text-align: center;
height: 150rpx;
width: 190rpx;
}
.one{
font-size: 100rpx;
}
.first{
color: white;
padding-right: 30rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
text-shadow:2px 2px 4px #696868;
font-weight: 600;
}
.beikuang{
background-color:black;
display: flex;
color: white;
flex-direction: column;
box-sizing: border-box;
background-size: 100%;
padding: 30rpx;
margin: 30rpx;
border-radius: 5px;
text-shadow:2px 2px 4px #696868;
font-weight: 600;
}
.twoface{
font-size: 35rpx;
display: flex;
justify-content: space-between;
margin-left: 35rpx;
margin-right: 35rpx;
}
.clothes{
font-size: 35rpx;
}
.future{
font-size: 30rpx;
margin-left: 20rpx;
margin-right: 40rpx;
margin-top: 5rpx;
margin-bottom: 10rpx;
display: flex;
justify-content: space-between;
}
.pock{
width: 100vw;
height: 100vh;
background-size: 100vw;
background-repeat: no-repeat;
background-image: url("")
}
实现效果图: