国庆七天乐，写博也快乐之小程序个人中心精美样式分享(登录、天气功能、天气动态背景变换、iconfont阿里巴巴、个人中心代码演示)

本文分享了微信小程序个人中心的精美样式设计，包括登录功能、天气展示及动态背景变换。利用阿里icon-font库实现图标展示，通过wxml、wcss和js代码实现页面布局和交互。文章提供部分代码演示，适合学习小程序开发的读者参考。

摘要由CSDN通过智能技术生成

在这里插入图片描述

hello，大家国庆快乐~今天是国庆节第三天啦，你有好好学习吗？😏😏本来今天决定更新websocket系统的，但是在我国庆节第一天发布的这篇文章：
国庆七天乐，写博也快乐之微信小程序天气预报+根据天气自动变换背景图实战（使用和风天气API）
有朋友私信我说这个个人中心的样式设计特别好看，想知道怎么做的，那么今天就让我水一篇博客吧🤭🤭🤭，分享一下做法，其实看起来很简单实则也是有一些小技巧在里面的，欢迎收藏、点赞和评论噢😎😎
这篇博文要结合上一篇的一起来噢，因为这里有天气预报、背景颜色变换的功能，要结合一起😏😏😏不然会有点懵，好啦，喜欢这个样式效果的朋友就拿去吧~

样式效果🤘

偷了上篇博文的图😏😏😏😏

在这里插入图片描述

来个今夜吧~💙💙💙

在这里插入图片描述

天气🌅

天气的页面和样式效果都在这里：💡💡💡
国庆七天乐，写博也快乐之微信小程序天气预报+根据天气自动变换背景图实战（使用和风天气API）

开整🤠

icon-font阿里图标⭐

这里使用的那些可爱的小图标是来自阿里巴巴icon-font库里的，如果在小程序中还不会使用这个库的朋友，可以去搜一下，很简单的，这里不附上教程了，我隐约的记得我之前的文章里好像有写，但是我现在也忘记了😶‍🌫️😶‍🌫️😶‍🌫️

在这里插入图片描述

页面🐠

wxml 🤸‍♀️

<!-- ”我的“页面顶部 -->
<view class="userInfo {
    {bgColor == 'sunny' ? 'sunny' : bgColor == 'cloudy' ? 'cloudy' : bgColor == 'overcast' ? 'overcast' : bgColor == 'rainny' ? 'rainny' : 'night'}}  {
    {textColor =='white' ? 'white' : 'black'}}">
    <!-- 用户背景信息开始 -->
    <view class="user_info_bg" >
      <view class="user_info_wrap">
        <image src="{
    {userInfo.avatarUrl}}"></image>
        <view class="user_name">{
  {userInfo.nickName}} </view>
        <block wx:if="{
    {conditionWeather==true}}">
          <image class="icon-weather" src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/weather_custom/{
    {nowWeather.icon}}.png"></image>
            <text>{
  {nowWeather.temp}}℃</text>
            <text>{
  {nowWeather.text}}</text>
          </block>
           <van-tag  round type="primary">天气</van-tag>  
        <view class="user_status">{
  {status_content}}</view>
      </view>
  </view>
  <!-- 用户背景信息结束 -->

<!-- ”我的“页面导航 -->
<view class="my-navigator-list">
  <navigator class="my-navigator-item" open-type="switchTab" url="/pages/schedule/schedule">
    <view class="my-icon">
     <iconfont name="nanhai" size="20" />
    </view>
    <text>历史求助</text>
  </navigator>