当前位置：主页 > javascript教程 >

微信小程序实现换肤功能

  • 更新时间：2023-01-24 13:50:33
  • 编辑：融博裕

pc或者移动端实现换肤功能还是比较简单的，大致就是需要换肤的css，还有正常的css；把当前皮肤类型存入本地；然后通过js读取并判断当前应该加载哪套css。

由于微信小程序没有操作wxss的api，所以实现的方式有点不一样，大致如下：

　　1.需要换肤的wxss，正常的wxss。

　　2.每个页面都引入换肤的wxss（因为换肤每个页面都需要改变）。

　　3.在app.js的globalData里设置默认的皮肤类型。

　　4.每个页面onload的时候，读取storage里的数据并设置当前皮肤类型的值。

例子：

第一步：结构

<view class='page' id='{{SkinStyle}}'>
 <view class='header'>
  <view class='h-skin iconfont {{SkinStyle!=="normal"?"icon-moon":"icon-sun"}}' bindtap='bgBtn'></view>  
 </view>
</view>

备注：由于不能直接操作微信小程序的根节点page，要实现全屏背景色的修改，只能模仿一个高度宽度都是100%的div（view）。上面就是class为page的这个div（view）。

　　　id='{{SkinStyle}}'，设置id是为了根据当前皮肤类型，让皮肤的wxss样式的权重大于正常wxss样式的权重，这样有时候就没必要加上！important了。

　　　根节点page需要在wxss中设置width:100%;height:100%。然后设置class为page的div（view）宽高都是100%。这样就相当于有个能操作的根节点page了。

　　　{{SkinStyle!=="normal"?"icon-moon":"icon-sun"}}这句是判断当前的皮肤类型，如果是normal就是icon-sun，否则就是icon-moon。 

第二步：样式wxss

皮肤wxss：

#dark {
 background: #333;
}
#dark .header .h-skin{
 color: white;
}

正常wxss：

.page .header .h-skin {
 color: #060505;
 padding: 0 32rpx;
 font-size: 40rpx;
}

 公用wxss：

page {
 height: 100%;
 width: 100%;
}
.page {
 width: 100%;
 height: 100%;
}

备注：这分别是三个文件。皮肤是theme.wxss，正常是index.wxss，公用是com.wxss

　　　因为换肤是所有页面都变化，所以我建议把皮肤的wxss文件 @import "../theme-bg/theme";  加载到com.wxss文件中。然后每个页面的wxss都@import这个公用的com.wxss文件。

第三步：js

首先：在app.js的文件中，Page里的globalData中设置：skin:"normal";即默认为normal皮肤

然后：在切换皮肤按钮的页面，添加切换按钮的点击事件bgBtn：

var app=getApp();
Page({
 data:{
   SkinStyle:"normal"  //这里其实可以不要
 }, 
 bgBtn:function(){
  if (this.data.SkinStyle==="normal"){
   app.globalData.skin = "dark"; //设置app（）中皮肤的类型
   this.setData({
    SkinStyle: app.globalData.skin //设置SkinStyle的值
   })
   wx.setStorage({   //设置storage
  　　 　　key: 'skins',
  　　 　　data: app.globalData.skin,
  　　 })
  }else{
   app.globalData.skin="normal";
   this.setData({
    SkinStyle: "normal"
   })
   wx.setStorage({
  　　 　　key: 'skins',
  　　 　　data: app.globalData.skin,
  　　 })   
  }  
 }
})

最后：在每个页面，包括切换皮肤的页面的Page中的onLoad事件里，读取storage并设置SkinStyle的值：

onLoad: function (options) { 
 var that=this;
 wx.getStorage({
 key: 'skins',
 success: function(res) {
  that.setData({
   SkinStyle: res.data
  })
 },
 })
}

这样每次启动都能自动设置上一次设置的皮肤了。

最终效果图：

微信小程序实现换肤功能

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农之家。

相关教程

  • 微信小程序录音文件格式silk遇到的问题及解决方法

    为网友们分享了关于微信小程序的教程，录音文件为silk格式，说是silk其实是base64加密后的webm格式，只需将其转为webm格式即可。但是在处理过程中遇到各种坑，下面小编给大家带来了微信小程序录音文件格式silk遇到的问题及解决方法

    发布时间：2022-11-24

  • 微信小程序首页的分类功能和搜索功能的实现思路及代码详解

    微信小程序首页的分类功能和搜索功能的实现思路及代码详解

    给网友朋友们带来一篇关于微信 小程序的教程，这篇文章主要介绍了微信小程序首页的分类功能和搜索功能的实现思路及代码详解,微信宣布了微信小程序开发者工具新增“云开发”功能，现在无需服务器即可实现小程序的快速迭代，感兴趣

    发布时间：2022-11-24

  • 微信小程序利用swiper+css实现购物车商品删除功能

    微信小程序利用swiper+css实现购物车商品删除功能

    为网友们分享了关于微信小程序的教程，这篇文章主要介绍了微信小程序利用swiper+css实现购物车商品删除功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起

    发布时间：2022-07-07

  • 微信小程序修改swiper默认指示器样式示例效果

    这篇文章主要介绍了微信小程序修改swiper默认指示器样式的实例代码,代码块是从微信开发文档中心复制的代码块，在此基础上修改官方swiper样式，需要的朋友可以参考下

    发布时间：2020-02-10

  • 微信小程序通过gitee进行版本管理的实例

    这篇文章主要介绍了微信小程序使用gitee进行版本管理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    发布时间：2020-04-26

  • 微信小程序：如何实现tabbar图标和颜色

    这篇文章主要介绍了微信小程序开发之tabbar图标和颜色的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    发布时间：2020-02-27

  • 微信小程序自定义弹窗wcPop插件详解

    平时在开发小程序的时候，弹窗应用场景还是蛮广泛的，但是微信官方提供的弹窗比较有局限性，不能自定义修改。下面通过本文给大家带来了微信小程序自定义弹窗wcPop插件，感兴趣的朋友跟

    发布时间：2020-01-25

  • 微信小程序如何实现即时通信聊天功能

    这篇文章主要介绍了微信小程序实现即时通信聊天功能的实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

    发布时间：2020-01-15

  • 微信小程序用户授权、位置授权及获取微信绑定手机号的实例分享

    这篇文章主要介绍了信小程序用户授权、位置授权及获取微信绑定手机号,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

    发布时间：2020-03-30

  • 微信小程序实现动态显示和隐藏某个控件功能示例

    微信小程序实现动态显示和隐藏某个控件功能示例

    给网友朋友们带来一篇关于微信小程序的教程，这篇文章主要介绍了微信小程序实现动态显示和隐藏某个控件功能,涉及微信小程序事件响应及样式动态操作相关实现技巧,需要的朋友可以参考下

    发布时间：2023-01-18

  • 小程序 巧应用：微信小程序开发实战

    小程序 巧应用：微信小程序开发实战

    《小程序，巧应用：微信小程序开发实战》 系统全面地讲解微信小程序的开发技术。开篇创建一个小程序项目并解析体验，介绍如何由零开始创建一个小程序，全面体验小程序的开发工具、界

    大小：79.9 MB小程序电子书

  • 《小程序，巧应用：微信小程序开发实战》案例源码

    《小程序，巧应用：微信小程序开发实战》案例源码

    本书全面介绍小程序的开发技术、案例与优化，涉及小程序开发的方方面面。主要内容包括：小程序基础开发技术，包括入口、界面、后台、目录结构、配置、逻辑层、API、视图层、组件等，小程序高级开发技术，包括UI与视觉特性设计与开发、应用功能开发、排错、相关工具与文档等，经典案例分析，小程序优化与演进。本书内容丰富、讲解细腻、实用性强，可帮助读者快速入门小程序开发，并提高产品质量。 封面图 目录 序一 序二 前言 第1章创建自

    大小：5.16 MB小程序开发配套资源

  • 微信小程序使用：vant Dialog组件的正确方式

    大小：61 KB微信小程序

  • 《微信小程序开发图解案例教程（附精讲视频）（第2版）》图解案例资源

    《微信小程序开发图解案例教程（附精讲视频）（第2版）》图解案例资源

    编辑推荐 小程序可以实现App软件的原生交互操作效果，无需安装卸载，解放用户手机内存。商家使用小程序也可以被更多用户找到自己的产品，成为有利的宣传。 《小程序开发图解案例教程》助你3步学会小程序设计：Step1图、文、代码、视频快速理解小程序基本原理和应用方法； Step2海量案例，边练边学；Step3综合实战，感受真实商业项目制作过程； 平台支撑，免费赠送资源 1.全部案例源代码、素材、*终文件2.全书电子教案 3.全书配套1399分钟高清精讲

    大小：73.54 MB微信小程序配套资源

  • 微信小程序开发零基础入门

    微信小程序开发零基础入门

    ★从易到难、由浅入深，更轻轻松松地把握小程序开发设计的各种各样专业知识。 ★普遍涉及到、重中之重凸出，更全方位系统化学习培训小程序定制开发的各种各样方式 。 ★基础理论相结

    大小：273.6 MB小程序开发电子书

用户留言

发布评论

最新更新

热门推荐