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


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 相关文章推荐
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
Vue header组件开发详解
Jan 26 Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
少女风vue组件库的制作全过程
May 15 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 Javascript
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极大的增强功能和性能
2006/10/09 PHP
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
PHP如何将XML转成数组
2016/04/04 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
react配置antd按需加载的使用
2019/02/11 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
简单了解Django模板的使用
2017/12/20 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
linux下进程间通信的方式
2013/01/23 面试题
药剂专业学生求职信范文
2013/12/28 职场文书
工作推荐信范文
2014/05/10 职场文书
党员干部一句话承诺
2014/05/30 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS