微信小程序换肤功能实现代码(思路详解)


Posted in Javascript onAugust 25, 2020

微信小程序换肤功能实现代码(思路详解)

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

实现功能

要实现如上更换皮肤的效果,有几个思路:
1.准备皮肤相关的wxss,引入到app.wxss中,方便每个页面使用;
2.设置皮肤时,动态改变wxml中元素的类名或id,使页面应用对应的皮肤;
3.将选中皮肤的值保存在小程序本地缓存中,保证其他页面及下一次打开小程序时,页面展示正确的皮肤;
下面介绍一些实现的细节

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;
}
#red-skin .bColor{
 background: #f9e5ee;
 color: #8e5a54;
}
#red-skin .borderColor{
 border-color:#8e5a54;
}
/* 橘黄 */
#yellow-skin{
 background: #f6e1c9;
}
#yellow-skin .bColor{
 background: #f6e1c9;
 color: #8c6031;
}
#yellow-skin .borderColor{
 border-color:#8c6031;
}

写好皮肤对应的颜色样式,直接放入app.wxss中即可,如果样式过多,可以使用单独的wxss文件,方便管理。

@import "style/skin/dark.wxss";

js

存储选中的皮肤值

//wxml
//<view bindtap="setSkin" data-flag='yellow'>橘黄</view> 
//bindtap事件函数
 setSkin:function(e){
  var skin = e.target.dataset.flag;
 
  this.setData({
   skin: skin + '-skin',
   openSet:false
  })
 
  wx.setStorage({
   key: "skin",
   data: skin + '-skin'
  })
  app.setSkin(this);
 }

这里使用setData使页面立即切换id,使用wx.setStorage存储值,app.setSkin是定义在app.js上的公共方法,下面会有介绍

//app.js
App({
 data: {
 },
 setSkin:function(that){
  wx.getStorage({
   key: 'skin',
   success: function(res) {
    if(res){
     that.setData({
     skin: res.data
    })
     var fcolor = res.data == 'dark-skin' ? '#ffffff' : '#000000',
       obj = {
        'normal-skin':{
         color:'#000000',
         background:'#f6f6f6'
        },
        'dark-skin': {
         color: '#ffffff',
         background: '#000000'
        },
        'red-skin': {
         color: '#8e5a54',
         background: '#f9e5ee'
        },
        'yellow-skin': {
         color: '#8c6031',
         background: '#f6e1c9'
        },
        'green-skin': {
         color: '#5d6021',
         background: '#e3eabb'
        },
        'cyan-skin': {
         color: '#417036',
         background: '#d1e9cd'
        },
        'blue-skin': {
         color: '#2e6167',
         background: '#bbe4e3'
        }
       },
      item = obj[res.data],
      tcolor = item.color,
      bcolor = item.background;
 
     wx.setNavigationBarColor({
      frontColor: fcolor,
      backgroundColor: bcolor,
     })
 
     wx.setTabBarStyle({
      color: tcolor,
      backgroundColor: bcolor,
     })
    }
   }
  })
  }
})

app.setSkin提供给所有页面调用,并通过已有的皮肤颜色,设置头部和导航区域的背景及文字颜色。

打开一个普通wxml页面,并设置皮肤

const app = getApp();
 
Page({
 data: {
  skin: 'normal-skin',
 },
 onLoad: function() {
  app.setSkin(this); 
 },
 onShow:function(){
  app.setSkin(this); 
 }
})

在onLoad及onShow触发时设置皮肤,这里的onShow是为了避免重新设置皮肤时,页面还显示上一次的皮肤,由于首次加载会设置两次,onLoad里的app.setSkin其实可以去掉。

至此,一个精美的设置皮肤功能就实现了,小伙伴们快去试一试吧!

总结

到此这篇关于微信小程序换肤功能实现代码(思路详解)的文章就介绍到这了,更多相关微信小程序换肤内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
图片上传即时显示缩略图的js代码
May 27 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
May 16 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
prettier自动格式化去换行的实现代码
Aug 25 #Javascript
Vue中 axios delete请求参数操作
Aug 25 #Javascript
React实现轮播效果
Aug 25 #Javascript
React实现全选功能
Aug 25 #Javascript
react实现复选框全选和反选组件效果
Aug 25 #Javascript
js实现数字跳动到指定数字
Aug 25 #Javascript
js实现点击选项置顶动画效果
Aug 25 #Javascript
You might like
php采集时被封ip的解决方法
2010/08/29 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
一些mootools的学习资源
2010/02/07 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
Python实现pdf文档转txt的方法示例
2018/01/19 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
Python lambda表达式用法实例分析
2018/12/25 Python
在PyCharm导航区中打开多个Project的关闭方法
2019/01/17 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
python中的协程深入理解
2019/06/10 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
Python类及获取对象属性方法解析
2020/06/15 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
小学生国庆演讲稿
2014/09/05 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
2016春节家属慰问信
2015/03/25 职场文书
学生检讨书怎么写
2015/05/07 职场文书
2015年重阳节主持词
2015/07/04 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL
python使用shell脚本创建kafka连接器
2022/04/29 Python