微信小程序实现换肤功能


Posted in Javascript onMarch 14, 2018

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
  })
 },
 })
}

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

最终效果图:

微信小程序实现换肤功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 Javascript
用JavaScript实现单继承和多继承的简单方法
Mar 29 Javascript
jquery获取input表单值的代码
Apr 19 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
Feb 14 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
vue实现添加与删除图书功能
Oct 07 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
javascript实现时钟动画
Dec 03 Javascript
Angular4集成ng2-file-upload的上传组件
Mar 14 #Javascript
iview table高度动态设置方法
Mar 14 #Javascript
vue2.0安装style/css loader的方法
Mar 14 #Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 #Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 #Javascript
Vue使用mixins实现压缩图片代码
Mar 14 #Javascript
vue2.0模拟锚点的实例
Mar 14 #Javascript
You might like
建立动态的WML站点(一)
2006/10/09 PHP
一些PHP写的小东西
2006/12/06 PHP
浅谈PHP强制类型转换,慎用!
2013/06/06 PHP
详谈PHP文件目录基础操作
2014/11/11 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
常用的JQuery函数及功能小结
2016/03/24 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
英国假发网站:Hothair
2018/02/23 全球购物
生育关怀行动实施方案
2014/03/26 职场文书
城管大队整治方案
2014/05/06 职场文书
2015元旦标语横幅
2014/12/09 职场文书
学校学期工作总结
2015/08/13 职场文书
人民调解协议书
2016/03/21 职场文书
服务器SVN搭建图文安装过程
2022/06/21 Servers