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


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代码示例
Feb 15 Javascript
JavaScript 计算图片加载数量的代码
Jan 01 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 Javascript
jquery事件与函数的使用介绍
Sep 29 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
Vue源码解析之Template转化为AST的实现方法
Dec 14 Javascript
vue中axios实现数据交互与跨域问题
May 12 Javascript
fastadmin中调用js的方法
May 14 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
vue实现div单选多选功能
Jul 16 Javascript
JavaScript实现轮播图效果
Oct 30 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中调用其他系统http接口的方法说明
2014/02/28 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
PHP常用处理静态操作类
2015/04/03 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
python 截取 取出一部分的字符串方法
2017/03/01 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
python使用matplotlib绘制热图
2018/11/07 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
投资协议书范本
2014/04/21 职场文书
党员目标管理责任书
2014/07/25 职场文书
就业导师推荐信范文
2015/03/27 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
详解TS数字分隔符和更严格的类属性检查
2021/05/06 Javascript
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js