目录
前言
最近在开发小程序，将自己写的分享给大家,希望能帮助到你们！
效果图
和风天气API获取
网址链接：dev.qweather.com
我用的是和风天气的API，打开该网址注册或登陆你的账号
点击进入开发服务平台，进入我们的控制台管理界面
点击项目管理，并且创建属于我们自己的KEY（我们选择免费订阅，并选择 Web API）
创建成功之后我们就可以看到 等会要用到的Key了（这个是关键）
微信小程序后台配置域名
登录小程序后台，点击开发设置
点击服务器域名 点击修改 将我们要用到的API的域名添加到request合法域名中 ，https://devapi.qweather.com和 https://geoapi.qweather.com
选择城市弹窗
我用的是Vant Weapp打开该网址后点击Popup弹出层
我们可以看到在引入中写着在app.json或index.json中引入组件
我们将代码复制到你的json文件中
将基本用法复制到你的WXML的文件中，并将红圈部分复制到你的JS文件中，然后根据你需要从哪边弹出进行top（顶部）、bottom（底部）、left（左侧）、right（右侧）的选择
页面代码
页面核心
.WXML
<image class="bg-wave" src="/pages/images/bg_wave.gif"></image>
<view class="top">
<view class="city" bindtap="showPopup">
<image class="icon" src="/pages/images/定位.png" bindtap="showPopup"></image>
<text class="city" bindtap="showPopup">{{shi}}-{{xian}}</text>
</view>
<view class="hourly_title">24小时预报</view>
<scroll-view scroll-x="true" class="hourly">
<view class="hourly_item" wx:for="{{hourly}}" wx:key="index">
<text class="hourly_time">{{item.time}}</text>
<text class="h_time">{{item.text}}</text>
<view class="hourly_img">
<image mode="widthFix" src="/pages/images/128/{{item.pice}}.png"></image>
</view>
<text class="hourly_tmp">{{item.tmp}}°</text>
<text class="hourly_wind_dir">{{item.wind_dir}}</text>
<text class="hourly_wind_sc">{{item.wind_sc}}级</text>
</view>
</scroll-view>
<view class="hourly_title">7天预报</view>
<scroll-view scroll-x="true" class="daily">
<view class="daily_item" wx:for="{{daily}}" wx:key="index">
<text class="daily_txt">{{item.d_txt}}</text>
<text class="daily_date">{{item.d_date}}</text>
<text class="d_date">{{item.d_text}}</text>
<view class="hourly_img">
<image mode="widthFix" src="/pages/images/128/{{item.piced}}.png"></image>
</view>
<text class="hourly_tmp">{{item.tmp_min}}°~{{item.tmp_max}}°</text>
<view class="hourly_img">
<image mode="widthFix" src="/pages/images/128/{{item.picen}}.png"></image>
</view>
<text class="d_wind_dir">{{item.n_text}}</text>
<text class="daily_wind_dir">{{item.wind_dir}}</text>
<text class="daily_wind_sc">{{item.wind_sc}}级</text>
</view>
</scroll-view>
//查询功能
<van-popup show="{{show}}" round position="bottom" custom-style="height: 70%" bind:close="onClose">
<view class="search-box">
<icon type="search" size="18" color="#0081ff" bindtap="search"></icon>
<input bindinput="bindKeyInput" placeholder="请输入城市名"></input>
<view class="chaxun" bindtap="search" wx:if="{{search_city}}">查询</view>
</view>
<view class="result-box">
<scroll-view scroll-y="true" data-cityid="{{item.city_id}}" class="result-item" bindtap="onclick" wx:for="{{location}}" wx:key="index">
{{item.xian}}-{{item.shi}}
</scroll-view>
</view>
</van-popup>.JS
//定位实况天气
getweather: function (e) {
var that = this;
//获取地理位置
wx.getLocation({
type: 'gcj02',
success(res) {
const latitude = res.latitude
const longitude = res.longitude
console.log(res.longitude, res.latitude)
that.setData({
location: res.longitude + "," + res.latitude
})
//获取城市
wx.request({
url: 'https://geoapi.qweather.com/v2/city/lookup?key=' + APIKEY + "&location=" + that.data.location,
success(res) {
console.log(res.data)
that.setData({
shi: res.data.location[0].adm2,
xian: res.data.location[0].name,
})
//获取实况天气
wx.request({
url: 'https://devapi.qweather.com/v7/weather/now?key=' + APIKEY + "&location=" + res.data.location[0].id,
success(res) {
console.log(res.data)
that.setData({
temp: res.data.now.temp,
humi: res.data.now.humidity,
tianqi: res.data.now.text,
fengxiang: res.data.now.windDir,
dengji: res.data.now.windScale,
feelsLike:res.data.now.feelsLike,
pic: res.data.now.icon,
pres: res.data.now.pressure,
update: res.data.updateTime.slice(0, 10)
})
}
})
//获取空气质量
wx.request({
url: 'https://devapi.qweather.com/v7/air/now?key=' + APIKEY + "&location=" + res.data.location[0].id,
success(res) {
console.log(res.data)
that.setData({
mass:res.data.now.category,
})
}
})
//获取24小时天气
wx.request({
url: 'https://devapi.qweather.com/v7/weather/24h?key=' + APIKEY + "&location=" + res.data.location[0].id,
success(res) {
console.log(res.data)
var arr = res.data.hourly
var hourly = []
for (var i = 0; i < arr.length; i++) {
hourly[i] = {
"pice": arr[i].icon,
"tmp": arr[i].temp,
"time": arr[i].fxTime.slice(11, 16),
"wind_dir": arr[i].windDir,
"wind_sc": arr[i].windScale，
"text": arr[i].text
}
}
that.setData({
hourly: hourly
})
}
})
//获取未来7天天气
var weekArray = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
wx.request({
url: 'https://devapi.qweather.com/v7/weather/7d?key=' + APIKEY + "&location=" + res.data.location[0].id,
success(res) {
console.log(res.data)
var arr = res.data.daily
var daily = []
for (var i = 0; i < arr.length; i++) {
daily[i] = {
d_txt: i == 0 ? "今天" : weekArray[new Date(arr[i].fxDate).getDay()],
d_date: arr[i].fxDate.slice(5, 10),
piced: arr[i].iconDay,
picen: arr[i].iconNight,
wind_dir: arr[i].windDirDay,
wind_sc: arr[i].windScaleDay,
tmp_max: arr[i].tempMax,
tmp_min: arr[i].tempMin,
d_text: arr[i].textDay,
n_text: arr[i].textNight,
}
}
that.setData({
daily: daily
})
}
})
}
})
}
})
},
//选择城市并显示在列表
bindKeyInput(e) {
this.setData({
search_city: e.detail.value
})
console.log(e.detail.value)
},
search(e) {
var that = this;
//获取城市
wx.request({
url: 'https://geoapi.qweather.com/v2/city/lookup?key=' + APIKEY + "&location=" + this.data.search_city,
success(res) {
console.log(res.data)
var arr = res.data.location
var location = []
for (var i = 0; i < arr.length; i++) {
location[i] = {
xian: arr[i].name,
shi: arr[i].adm2,
city_id: arr[i].id
}
}
that.setData({
location: location
})
}
})
},
//点击选择城市并更新ui
nclick(e) {
var that = this;
var cityid = e.currentTarget.dataset.cityid;
console.log(e.currentTarget.dataset.cityid)
wx.request({
url: 'https://geoapi.qweather.com/v2/city/lookup?key=' + APIKEY + "&location=" + cityid,
success(res) {
console.log(res.data)
that.setData({
shi: res.data.location[0].adm2,
xian: res.data.location[0].name,
})
}
})
//以下获取天气代码同上
//...........我就不展示了
that.setData({
show: false //自动关闭弹出层
});
},.WXSS
/* 页面样式 */
.header {
height: 400rpx;
background-color: #64C8FA;
background: linear-gradient(to bottom, #56CCF2, #2F80ED);
position: relative;
padding: 30rpx;
}
.header .bg-wave {
width: 100vw;
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 120rpx;
mix-blend-mode: screen;
}
.top {
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
}
.icon{
width: 40rpx;
height: 40rpx;
margin-right: 8rpx;
}
.city {
margin-top: 5rpx;
display: flex;
align-items: center;
color: white;
font-size: 20px;
}
.city image {
margin-top: 5rpx;
width: 50rpx;
height: 50rpx;
}
.search {
margin-top: 10px;
margin-left: 50px;
border-radius: 8rpx;
display: inline-flex;
justify-content: center;
align-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.1);
height: 70rpx;
}
.search input {
width: 200rpx;
padding: 18rpx 32rpx;
text-align: left;
color: white;
display: inline-block;
}
.bt_search {
border-radius: 0 8rpx 8rpx 0;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
display: inline-flex;
justify-content: center;
align-content: center;
align-items: center;
}
.bt_search icon {
margin: 8rpx 18rpx;
}
.center {
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
}
.tmp {
margin-left: 18rpx;
display: inline-block;
font-size: 180rpx;
color: white;
}
.cond-image{
width: 200rpx;
margin-right: 32rpx;
margin-top: 32rpx;
}
.bottom{
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
}
.bottom view{
color: white;
margin: 10px;
}
.hourly_title{
font-weight: bold;
font-size: 42rpx;
padding: 18rpx 32rpx;
margin-top: 10px;
}
.hourly {
width: 718rpx;
margin: 0 18rpx;
border-radius: 18rpx;
box-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.15);
white-space: nowrap;
background-color: white;
}
.hourly_item {
margin: 18rpx 0;
display: inline-block;
width: 143.5rpx;
text-align: center;
font-size: 28rpx;
}
.hourly_img {
margin: 64rpx 0;
}
.hourly_img image {
width: 60rpx;
}
.hourly_item text {
display: block;
}
.hourly_time {
color: gray;
}
.hourly_wind_dir {
margin-top: 32rpx;
}
.hourly_wind_sc {
color: gray;
}
.hourly_tmp {
color: #027aff;
}
.daily {
width: 718rpx;
white-space: nowrap;
margin: 0 18rpx;
background-color: white;
border-radius: 18rpx;
box-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.15);
}
.daily_item {
margin: 18rpx 0;
display: inline-block;
width: 179.5rpx;
text-align: center;
font-size: 28rpx;
}
.daily_item text {
display: block;
}
.daily_date {
color: gray;
}
.daily_wind_dir {
margin-top: 32rpx;
}
.daily_wind_sc {
color: gray;
}
.footer{
font-size: 28rpx;
color: gray;
text-align: center;
margin-top: 50rpx;
margin-bottom: 18rpx;
}
.result-box{
border-top: gainsboro 1rpx solid;
}
.result-item{
display: flex;
padding: 35rpx;
border-radius: 8rpx;
font-size: 28rpx;
border-bottom: gainsboro 1rpx solid;
background-color: white;
justify-content: space-between;
align-items: center;
}
.search-box{
margin: 32rpx 32rpx 18rpx 32rpx;
border-radius: 18rpx;
box-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.15);
background-color: white;
display: flex;
overflow: hidden;
align-items: center;
}
.search-box input{
flex: 1;
padding:18rpx 32rpx;
}
.search-box icon{
padding: 18rpx 0 18rpx 18rpx;
}
.nav_mya {
width: 93%;
height: 170rpx;
background-color: rgb(255, 255, 255);
border-radius: 40rpx;
box-shadow: 0 0 20px rgb(0 0 0 / 20%);
margin-left: 30rpx;
margin-right: 30rpx;
margin-top: 20px;
}
.index_icon{
height: 10%;
width: 10%;
padding-left: 40%;
margin-top: -120px;
display: inline-block;
}
.index_f{
font-weight: bold;
font-size: 35rpx;
padding: 10rpx 20rpx;
}
.index_text{
padding-left: 20px;
padding-right: 120px;
display: flex;
justify-content: space-between;
color: gray;
font-size: 25rpx;
}
.index{
padding-top: 15px;
margin-left: 40px;
margin-right: 140px;
font-size: 25rpx;
display: flex;
font-weight:700;
justify-content: space-between;
}
.end-text{
display: flex;
justify-content: center;
padding-top: 20px;
padding-bottom: 20px;
font-weight: 700;
font-size: 15px;
}
.chaxun{
margin-right: 10px;
color: #027aff;
}
注意事项（谨记）
记得将刚刚在和风天气创建的KEY复制到这个里面
记得将以下代码添加至您的app.json中
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序获取当前位置的天气情况"
}
},欢迎浏览
大家可以进入我的微信小程序看看实际效果和功能,如果有啥问题大家随时在下面留言！
625
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
