微信小程序实现换肤功能


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 相关文章推荐
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
vue 解决computed修改data数据的问题
Nov 06 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 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
浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
typecho插件编写教程(一):Hello World
2015/05/28 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
简单的js分页脚本
2009/05/21 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
Python实现的中国剩余定理算法示例
2017/08/05 Python
利用python循环创建多个文件的方法
2018/10/25 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
入党积极分子思想汇报
2014/01/02 职场文书
大学毕业感言200字
2014/03/09 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
大学生实习介绍信
2015/05/05 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
灵能百分百第三季什么时候来?
2022/03/15 日漫
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA
python神经网络Xception模型
2022/05/06 Python