微信小程序开发，简约和风天气app

最新推荐文章于 2025-05-07 14:38:53 发布

浩宇软件开发

最新推荐文章于 2025-05-07 14:38:53 发布

阅读量925

点赞数 12

分类专栏：微信小程序-和风天气app 文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/jky_yihuangxing/article/details/147685880

版权

微信小程序-和风天气app 专栏收录该内容

1 篇文章

订阅专栏

文章目录

1. 项目功能思维导图

在这里插入图片描述

2. 开发环境

开发工具：微信小程序开发工具
开发语言：js

3. 数据来源

和风天气开放平台提供，官网地址：https://dev.qweather.com/

4. 项目运行效果图

在这里插入图片描述

5. 换肤功能实现

编写换肤布局页面skin.wxml

<!--pages/skin/skin.wxml-->
<view class="skin-container">
  <navigation-bar title="个性换肤" back="{{true}}" color="black" background="#FFF"></navigation-bar>

  <view class="skin-list-container">
    <block wx:for="{{skins}}" wx:key="item">
      <view class="skin-item" style="{{item.bg}}" bind:tap="onClickItemHandle" data-item="{{item}}">
        <view class="skin-tips-container" wx:if="{{item.bg ===currentSkin.bg}}">
          <text>当前皮肤</text>
        </view>
      </view>
    </block>
  </view>
</view>

编写样式文件 skin.wxss

/* pages/skin/skin.wxss */

.skin-container{
  display: flex;
  height: 100vh;
  flex-direction: column;
}


.skin-list-container{
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  justify-content: space-between; /* 两端对齐 */
  padding: 20rpx;
  box-sizing: border-box;
}

.skin-list-container .skin-item{
  display: flex;
  height: 300rpx;
  width: 32.333%; /* 留2%的间隙 */
  border-radius:  10rpx;
  margin-bottom: 20rpx;

}
.skin-tips-container{
  width: 100%;
  line-height: 300rpx;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5); /* 50%透明度的黑色 */
  color: #ffffff;
  border-radius:  10rpx;
}

编辑逻辑代码 skin.js

// pages/skin/skin.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    skins: [{
        "bg": "background: linear-gradient(135deg, #FFC371 0%, #FF5F6D 100%)"
      },
      {
        "bg": "background: linear-gradient(to bottom, #D3CCE3 0%, #E9E4F0 100%)"
      },
      {
        "bg": "background: linear-gradient(to bottom, #4b6cb7 0%, #182848 100%)"
      },
      {
        "bg": "background: linear-gradient(to bottom, #a1c4fd 0%, #c2e9fb 100%)"
      },
      {
        bg: "background: linear-gradient(135deg, #FFD700 0%, #FF8C00 100%)"
      },
      {
        bg: "background: linear-gradient(to bottom, #398ffa 0%, #39b7ff 100%)"
      },
      {
        bg: "background: linear-gradient(45deg, #BDC3C7 0%, #F5D76E 50%)"
      },
      {
        bg: "background: linear-gradient(to bottom, #FF5F6D 0%, #6A11CB 100%)"
      },
      {
        bg: "background: linear-gradient(to top, #0F2027 0%, #2C5364 100%)"
      }
    ],
    currentSkin: null
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

    this.setData({
      currentSkin: wx.getStorageSync('skin')
    })
    console.log(this.data.currentSkin)
  },

  /**
   * 点击当前皮肤，并保存
   */
  onClickItemHandle(options) {
    const skin = options.currentTarget.dataset.item
    wx.setStorageSync('skin', skin)
    wx.showToast({
      title: '设置成功',
    })
    this.timer = setInterval(() => {
      wx.navigateBack()
    }, 1000)
  },
  onUnload() {
    // 必须清除定时器！
    clearInterval(this.timer);
  }
})