hello,大家好,这里是X大魔王,先提前祝各位国庆节快乐😽😽
这里还是继续带来微信小程序的一些内容,是我之前做项目的一个内容,这里给各位分享一下,我觉得还蛮不错的~🍊🍊🍊
效果图🏙️
图比较多,我这里就直接全部弄一起了😎可以看到背景是变了但是头像下方的字全是“晴”,当时是为了得到效果,因为这个字是要你当前的城市真正的天气而得到的,比如:“晴”、“阴”这种,由于现在我要给各位看一下背景图,这个字各位可以先不用管,这里效果比较多,图片我就只放了部分哈,毕竟这个天气太多了😶🌫️😶🌫️😶🌫️
这里只是背景颜色的变换,不是下面的小程序的全部噢注意一下~下面的是我当时写项目的个人中心截图,这篇博文只是分享背景颜色的变换,不过喜欢的朋友可以评论留言,我后续可以出教程🐶🐶
当时我所在的城市是阴天,刚好就截了这张图~~
夜晚的都是统一的噢,不管是下雨还是下雪,夜晚都是一个背景颜色,细心的朋友可能发现了,这个背景是变了,并且这个“字体颜色”也变了噢🐶🐶
和风天气开发者😏
打住!!可能有朋友看到这里就撤退了!但是这一部分真的非常非常简单!
各位不妨继续往下看😏😏
玩过高德地图开发者或者腾讯地图开发者的朋友肯定就很有经验,因为流程都是一样的😏
注册或者登录好之后,进入控制台:
创建应用->选择免费开发版本->应用名称随便填->类型选择Web API,创建好之后就可以得到key
这样和风天气这一块我们就搞定了,接下来的难点就在小程序上了,就是要调用和风天气的API😏😏😏
小程序开发🐶
app.wcss ⭐
我们先对天气背景颜色进行全局的配置
/* 全局变量定义 设置主题颜色,字体大小等 */
page{
/* 主题颜色 */
--themeColor:#FF5700;
/* 字体大小 rpx自适应大小 */
font-size: 28rpx;
--sunny:-webkit-linear-gradient(top,#1c92d2,#b3f5e1,#f2fcfe);
--cloudy: -webkit-linear-gradient(top,#c1e3f8,#eef2f3);
--overcast: -webkit-linear-gradient(top,#8e9eab,#eef2f3);
--rainny: -webkit-linear-gradient(top,#1f2429,#bdc3c7);
--night: -webkit-linear-gradient(top,#bdc3c7,#2c3e50);
--white: #fff;
--blick: #000;
}
天气预报⛅🌤️
注意事项🍐
天气预报这一块不全是我做的,我是参考了别人的😏😏😏做样式这一块我是真的不太行🥸🥸我是在它的基础之上增删改查,望见谅😶🌫️😶🌫️
在河源 源城旁边的那个绿色logo是我从icon-font下来的,如果你们复制代码过去之后是看不见的,你们可以自行修改
在js文件里,你们将APIKEY换成刚刚你们申请的key即可,一般将这个key值保存在constants里
wxml
<view class="header-modular" wx:if="{
{now}}">
<image class="bg-wave" src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/bg_wave.gif"></image>
<view class="row">
<view class="row location-wrap" bindtap="selectLocation">
<iconfont name="22location" size="30" style="margin-right: 10rpx;" />
<view class="title">{
{City}} {
{County}}</view>
</view>
</view>
<view class="row">
<view class="tmp">{
{now.temp}}°</view>
<image class="icon-weather" src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/weather_custom/{
{now.icon}}.png"></image>
</view>
<view class="tips-wrap">
<view class="tips ">{
{now.windDir}} {
{now.windScale}}级</view>
<view class="tips ">湿度 {
{now.humidity}}%</view>
<view class="tips ">气压 {
{now.pressure}}Pa</view>
</view>
</view>
<view class="card-modular " wx:if="{
{hourly}}">
<view class="title">24小时预报</view>
<view class="card-wrap">
<block wx:for="{
{hourly}}" wx:key="index">
<view class="item hourly">
<view class="text-gray">{
{item.time}}</view>
<image class="icon" src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/weather_custom/{
{item.icon}}.png"></image>
<view class="text-primary mb-32">{
{item.temp}}°</view>
<view>{
{item.windDir}}</view>
<view class