微信小程序实现换肤功能

最新推荐文章于 2024-10-24 20:25:47 发布

遥望星辰_

最新推荐文章于 2024-10-24 20:25:47 发布

阅读量8.6k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：前端微信小程序 javascript

本文链接：https://blog.csdn.net/qq_32262127/article/details/86249924

本文介绍了如何在微信小程序中实现换肤功能，包括准备皮肤相关的wxss，动态改变元素类名，保存皮肤选择到本地缓存，以及具体实现细节。提供了一个简单的wxml、wxss和js代码示例，并分享了实际效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在手机、电脑使用频率如此高的当下，应用可以更换皮肤，以提升美观性，并减轻屏幕对眼睛的刺激，无疑对用户体验有很大的帮助

这里闲话少说，先放码出来

github地址：我的年目标-微信小程序

演示

扫码即可体验，或搜索“我的年目标”

下面为更换皮肤效果图

实现功能

要实现如上更换皮肤的效果，有几个思路：

准备皮肤相关的wxss，引入到app.wxss中，方便每个页面使用；
设置皮肤时，动态改变wxml中元素的类名或id，使页面应用对应的皮肤；
将选中皮肤的值保存在小程序本地缓存中，保证其他页面及下一次打开小程序时，页面展示正确的皮肤；

下面介绍一些实现的细节

wxml

<view class="page" id='{
    
    {skin}}'>  
  <view class="container">
  	...
  </view>
</view>

wxml部分比较简单，只需要动态切换id即可，注意因为page无法动态设置背景色，所以这里的最外层需要width: 100%;height: 100%;，否则将无法使皮肤铺满页面。

wxss

/* app.wxss主题颜色 */

/* 深黑 */
#dark-skin{
   
   
  background: #000;
}
#dark-skin .bColor{
   
   
  background: #333;
  color: #999;
}
#dark-skin .borderColor{
   
   
  border-color:#999;
}
/* 粉红 */
#red-skin{
   
   
  background: #f9e5ee;