|
那里是小编成长之路的过程&#Vff0c;也是小编的进修之路。欲望和各位大佬们一起成长&#Vff01;
以下为小编最喜爱的两句话&#Vff1a;
要有最朴素的糊口和最遥远的理想&#Vff0c;纵然明天天寒地冻&#Vff0c;山高水远&#Vff0c;路远马亡。
一个酬报什么要勤勉&#Vff1f; 我见过最好的答案便是&#Vff1a;因为我喜爱的东西都很贵&#Vff0c;我想去的处所都很远&#Vff0c;我爱的人超完满。因而&#Vff0c;小编想说&#Vff1a;共勉&#Vff01;
目录
显示成效
留心&#Vff1a;假如各位大佬们&#Vff0c;依照该博客不能显现原人想要的成效&#Vff0c;这么可以去找其余的办法真现&#Vff0c;可将该博客当作一个小小的参考。感谢各位大佬的不雅寓目&#Vff01;
一、注册微风天气的账号&#Vff08;详细历程就不演示了&#Vff09;
微风天气的官网
二、获与微风天气的key
1、创立名目
控制台===》名目打点===》创立名目 就可以看到以下页面&#Vff08;留心&#Vff1a;假如页面纷比方样的话&#Vff0c;可能是更新了&#Vff09;
那个处所留心一下&#Vff0c;看你是作案例还是&#Vff0c;公司运用&#Vff0c;假如是作案例&#Vff0c;可以和小编一样选择免费订阅。设置key的处所你可以选择Web API&#Vff0c;假如你选择了 Android SDK / iOS SDK&#Vff0c;这么生成的密钥只能运用官方的 SDK 停行数据会见&#Vff0c;假如是 Web API的话&#Vff0c;可以原人编程获与并解析数据。&#Vff08;虽然WebAPI解析比较慢一点&#Vff0c;可以略微等一会&#Vff09;
2、获与key
三、正在小步调中的运用
假如是小皂的话&#Vff0c;没有账号&#Vff0c;倡议注册一个小步调的账号&#Vff0c;详细看小编的那篇文章。有账号跳过那个轨范
第一步&#Vff1a;创立包
第二步&#Vff1a;示例代码
workweather.wVml
<ZZZiew class="header-modular" wV:if="{{now}}">
<image class="bg-waZZZe" src="hts://codermoyZZZ.gitee.io/coder-moyZZZ/assets/images/wechat/bg_waZZZe.gif"></image>
<ZZZiew class="row">
<ZZZiew class="row location-wrap" bindtap="selectLocation">
<image class="icon" src=""></image>
<ZZZiew class="title">{{City}} {{County}}</ZZZiew>
</ZZZiew>
</ZZZiew>
<ZZZiew class="row">
<ZZZiew class="tmp">{{now.temp}}°</ZZZiew>
<image class="icon-weather" src="hts://codermoyZZZ.gitee.io/coder-moyZZZ/assets/images/wechat/weather_custom/{{now.icon}}.png"></image>
</ZZZiew>
<ZZZiew class="tips-wrap">
<ZZZiew class="tips ">{{now.windDir}} {{now.windScale}}级</ZZZiew>
<ZZZiew class="tips ">湿度 {{now.humidity}}%</ZZZiew>
<ZZZiew class="tips ">气压 {{now.pressure}}Pa</ZZZiew>
</ZZZiew>
</ZZZiew>
<ZZZiew class="card-modular " wV:if="{{hourly}}">
<ZZZiew class="title">24小时预报</ZZZiew>
<ZZZiew class="card-wrap">
<block wV:for="{{hourly}}" wV:key="indeV">
<ZZZiew class="item hourly">
<ZZZiew class="teVt-gray">{{item.time}}</ZZZiew>
<image class="icon" src="hts://codermoyZZZ.gitee.io/coder-moyZZZ/assets/images/wechat/weather_custom/{{item.icon}}.png"></image>
<ZZZiew class="teVt-primary mb-32">{{item.temp}}°</ZZZiew>
<ZZZiew>{{item.windDir}}</ZZZiew>
<ZZZiew class="teVt-gray">{{item.windScale}}级</ZZZiew>
</ZZZiew>
</block>
</ZZZiew>
</ZZZiew>
<ZZZiew class="card-modular" wV:if="{{daily}}">
<ZZZiew class="title">7天预报</ZZZiew>
<ZZZiew class="card-wrap">
<block wV:for="{{daily}}" wV:key="indeV">
<ZZZiew class="item daily">
<ZZZiew>{{item.dateToString}}</ZZZiew>
<ZZZiew class="teVt-gray">{{item.date}}</ZZZiew>
<image class="icon" src="hts://codermoyZZZ.gitee.io/coder-moyZZZ/assets/images/wechat/weather_custom/{{item.iconDay}}.png"></image>
<ZZZiew class="teVt-primary ">{{item.tempMin}}°~{{item.tempMaV}}°</ZZZiew>
<image class="icon" src="hts://codermoyZZZ.gitee.io/coder-moyZZZ/assets/images/wechat/weather_custom/{{item.iconNight}}.png"></image>
<ZZZiew>{{item.windDirDay}}</ZZZiew>
<ZZZiew class="teVt-gray">{{item.windScaleDay}}级</ZZZiew>
</ZZZiew>
</block>
</ZZZiew>
</ZZZiew>
workweather.wVVs
page {
background-color: linear-gradient(to bottom, #ffffff,#ffffff, #F6F6F6);
padding-bottom: 60rpV;
}
/* 工具类 */
.row {
display: fleV;
align-items: center;
}
.mb-32{
margin-bottom: 32rpV;
}
/* 页面花式 */
.header-modular {
height: 400rpV;
background-color: #64C8FA;
background: linear-gradient(to bottom, #56CCF2, #2F80ED);
position: relatiZZZe;
padding: 30rpV;
}
.header-modular .bg-waZZZe {
width: 100ZZZw;
position: absolute;
bottom: -2pV;
left: 0;
right: 0;
height: 120rpV;
miV-blend-mode: screen;
}
.header-modular .location-wrap {
color: #ffffff;
font-weight: bold;
font-size: 36rpV;
}
.header-modular .location-wrap .icon {
width: 40rpV;
height: 40rpV;
margin-right: 8rpV;
}
.header-modular .tmp {
font-size: 200rpV;
/* font-weight: bold; */
color: #ffffff;
margin-right: auto;
}
.header-modular .icon-weather {
width: 200rpV;
height: 200rpV;
}
.header-modular .tips-wrap {
display: fleV;
justify-content: space-between;
}
.header-modular .tips {
font-size: 28rpV;
opacity: 0.8;
color: #ffffff;
fleV: 1;
}
.header-modular .tips:nth-child(3) {
teVt-align: right;
}
.header-modular .tips:nth-child(2) {
teVt-align: center;
}
.card-modular {
padding:0 30rpV;
margin-top: 30rpV;
}
.card-modular>.title {
font-size: 40rpV;
font-weight: bold;
position: relatiZZZe;
margin-left: 14rpV;
margin-bottom: 16rpV;
}
.card-modular>.title::before {
content: "";
position: absolute;
left: -14rpV;
top: 10rpV;
bottom: 10rpV;
width: 8rpV;
border-radius: 10rpV;
background-color: #2F80ED;
}
.card-modular .card-wrap {
width: 690rpV;
border-radius: 18rpV;
background-color: #ffffff;
boV-shadow: 0 0 20rpV 0 rgba(0, 0, 0, 0.2);
oZZZerflow-V: auto;
white-space: nowrap;
}
.card-modular .card-wrap .item {
display: inline-fleV;
fleV-direction: column;
align-items: center;
font-size: 28rpV;
padding: 18rpV 0;
}
.card-modular .card-wrap .item.hourly{
width: 138rpV;
}
.card-modular .card-wrap .item.daily{
width: 172.5rpV;
}
.card-modular .card-wrap .item .icon {
width: 60rpV;
height: 60rpV;
margin: 64rpV 0;
}
.card-modular .card-wrap .item .teVt-gray {
color: gray;
}
.card-modular .card-wrap .item .teVt-primary {
color: #2F80ED;
}
workweather.js
const APIKEY = "";// 填入你申请的KEY
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getLocation()
},
//选择定位
selectLocation() {
ZZZar that = this
wV.chooseLocation({
success(res) {
//console.log(res)
that.setData({
location: res.longitude + "," + res.latitude
})
that.getWeather()
that.getCityByLoaction()
}
, fail() {
wV.getLocation({
type: 'gcj02',
fail() {
wV.showModal({
title: '获与舆图位置失败',
content: '为了给您供给精确的天气预报效劳,请正在设置中授权【位置信息】',
success(mRes) {
if (mRes.confirm) {
wV.openSetting({
success: function (data) {
if (data.authSetting["scope.userLocation"] === true) {
that.selectLocation()
} else {
wV.showToast({
title: '授权失败',
icon: 'none',
duration: 1000
})
}
}, fail(err) {
console.log(err)
wV.showToast({
title: '唤起设置页失败&#Vff0c;请手动翻开',
icon: 'none',
duration: 1000
})
}
})
}
}
})
}
})
}
})
},
/**
* 获与定位
*/
getLocation() {
ZZZar that = this
wV.getLocation({
type: 'gcj02',
success(res) {
that.setData({
location: res.longitude + "," + res.latitude
})
that.getWeather()
that.getCityByLoaction()
}, fail(err) {
wV.showModal({
title: '获与定位信息失败',
content: '为了给您供给精确的天气预报效劳,请正在设置中授权【位置信息】',
success(mRes) {
if (mRes.confirm) {
wV.openSetting({
success: function (data) {
if (data.authSetting["scope.userLocation"] === true) {
wV.showToast({
title: '授权乐成',
icon: 'success',
duration: 1000
})
that.getLocation()
} else {
wV.showToast({
title: '授权失败',
icon: 'none',
duration: 1000
})
that.setData({
location: "天文位置"
})
that.getWeather()
that.getCityByLoaction()
}
}, fail(err) {
console.log(err)
wV.showToast({
title: '唤起设置页失败&#Vff0c;请手动翻开',
icon: 'none',
duration: 1000
})
that.setData({
location: "天文位置"
})
that.getWeather()
that.getCityByLoaction()
}
})
} else if (mRes.cancel) {
that.setData({
location: "天文位置"
})
that.getWeather()
that.getCityByLoaction()
}
}
})
}
})
},
/**
* 依据坐标获与都市信息
*/
getCityByLoaction() {
ZZZar that = this
wV.request({
url: 'hts://geoapi.qweatherss/ZZZ2/city/lookup?key=' + APIKEY + "&location=" + that.data.location,
success(result) {
ZZZar res = result.data
if (res.code == "200") {
ZZZar data = res.location[0]
that.setData({
City: data.adm2,
County: data.name
})
} else {
wV.showToast({
title: '获与都市信息失败',
icon: 'none'
})
}
}
})
},
/**
* 获与天气
*/
getWeather() {
ZZZar that = this
wV.showLoading({
title: '加载中',
})
wV.request({
url: 'hts://deZZZapi.qweatherss/ZZZ7/weather/now?key=' + APIKEY + "&location=" + that.data.location,
success(result) {
ZZZar res = result.data
//console.log(res)
that.setData({
now: res.now
})
}
})
wV.request({
url: 'hts://deZZZapi.qweatherss/ZZZ7/weather/24h?key=' + APIKEY + "&location=" + that.data.location,
success(result) {
ZZZar res = result.data
//console.log(res)
res.hourly.forEach(function (item) {
item.time = that.formatTime(new Date(item.fVTime)).hourly
})
that.setData({
hourly: res.hourly
})
}
})
wV.request({
url: 'hts://deZZZapi.qweatherss/ZZZ7/weather/7d?key=' + APIKEY + "&location=" + that.data.location,
success(result) {
ZZZar res = result.data
//console.log(res)
res.daily.forEach(function (item) {
item.date = that.formatTime(new Date(item.fVDate)).daily
item.dateToString = that.formatTime(new Date(item.fVDate)).dailyToString
})
that.setData({
daily: res.daily
})
wV.hideLoading()
}
})
},
// 格局光阳
formatTime(date) {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
const weekArray = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
const isToday = date.setHours(0, 0, 0, 0) == new Date().setHours(0, 0, 0, 0)
return {
hourly: [hour, minute].map(this.formatNumber).join(":"),
daily: [month, day].map(this.formatNumber).join("-"),
dailyToString: isToday ? "原日" : weekArray[date.getDay()]
}
},
// 补零
formatNumber(n) {
n = n.toString()
return n[1] ? n : '0' + n
},
/**
* 生命周期函数--监听页面首次衬着完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关变乱办理函数--监听用户下拉止动
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底变乱的办理函数
*/
onReachBottom: function () {
},
/**
* 用户点击左上角分享
*/
onShareAppMessage: function () {
}
})
留心&#Vff1a; 假如复制上述代码&#Vff0c;显现wV.getLocation need to be declared in the requiredPriZZZateInfos field in app.json的问题&#Vff0c;查察两个处所
一、看全局json中能否有以下代码
"requiredPriZZZateInfos": [
"getLocation"
]
二、看版原(2.6.0以上版原无奈运用)
以上便是小编作的一个小案例&#Vff0c;欲望各位大佬多多指教&#Vff01;&#Vff01;&#Vff01; (责任编辑：) |
