聊一聊小程序换肤吧

聊一聊小程序换肤吧

2021-08-17 799
下载不了?请联系网站客服提交链接错误!
增值服务:
聊一聊小程序换肤吧
最近更新 2021年08月17日
资源编号 105667

聊一聊小程序换肤吧

2021-08-17 小程序教程 0 799 百度已收录
限时活动VIP只需20元
增值服务:
¥ 0 钻石 开通VIP尊享优惠特权
立即下载 升级会员
详情介绍

前言

有这么一句老话说得好“人靠衣装佛靠金装”,应用的UI风格的重要性犹如一个人的装扮风格。一个应用经过UI设计师们的精心“打扮”同样能为App赚很高的“回头率”。

就像女人的衣柜里永远少一件衣服一样,一个应用可能也少一套皮肤,这里就涉及到换肤了。说起换肤,对于前端来说不算常见,却也肯定不陌生。所谓的换肤,无非就是颜色值的更换,在一般的前端项目中,实现的方法有很多种。但是大家有考虑过小程序端的换肤吗?!!

可以看看 Elementui 换肤 Demo。

换肤需求

一般来说换肤需求分两种:

  • 一种是静态换肤,提供几种可选择的颜色/主题样式,进行选择切换,一般可供选择的主题样式不会太多;
  • 另一种是动态换肤,可自定义色值,可通过取色板取色或者后端接口下发,可选择的范围比较大;

传统前端换肤方案

在聊小程序的换肤方案之前,我们大概看一下一般前端项目常见的换肤方案以及优缺点:

1、class 命名空间

这个应该是最简单的换肤方案,利用class 名称准备两个主题:

  1. .red-theme {
  2. color: red
  3. .blue-theme {
  4. color: blue

根据所选皮肤,给标签添加对应的类:

  1. <body class=\"red-theme\">
  2. <p>红色主题 </p>
  3. ...
  4. </body>
优缺点:
  • 优点: 简单,好理解,好实现
  • 缺点: CSS中需多写主题的class,代码容易混乱;需手动编写
2. 生成多套CSS皮肤

利用CSS预处理语言(如:Less,stylus 或 sass)以及 Webpack、gulp等工具输出多套主题样式。

  1. /** default-theme.css **/
  2. .text {
  3. color: #333;
  4. }
  5. /** red-theme.css **/
  6. .text {
  7. color: red;
  8. }
  9. /** blue-theme.css **/
  10. .text {
  11. color: blue;
  12. }

页面加载后,根据用户需求通过js动态的link对应的皮肤样式。

  1. // js动态处理
  2. var theme = /\\bt=(\\w+)/.exec(location.search);
  3. theme = theme ? theme[1] : \"light\";
  4. changeTheme(theme);
  5. function changeTheme(theme) {
  6. var head = document.getElementsByTagName(\"head\")[0];
  7. var link = document.createElement(\"link\");
  8. link.dataset.type = \"theme\";
  9. link.href = \"assets/css/theme-\" + theme + \"/pages/home/home.css\";
  10. link.rel = \"stylesheet\";
  11. link.type = \"text/css\";
  12. head.appendChild(link);
  13. }

如果需要保存用户使用的主题,可以通过如下方式:

  • 利用路由标记
  • 利用cookie标记
  • 利用localstorage
  • 保存到后端服务器
优缺点:
  • 优点: 简单,好理解,好实现
  • 缺点: 需要手写两份以上CSS配色样式; 切换样式需要下载CSS的时间

Tips: 动态加载CSS文件可能需求一定的等待时间,可根据HTML 的 rel 属性下的 alternate配合 link 的 disabled 实现一定优化。

3. CSS变量换肤

利用CSS变量设置颜色, 用js动态修改CSS变量,进而换色。如果不考虑兼容性,这是最佳换肤方案。

  1. // variable.less
  2. :root {
  3. --fill-1: #fff;
  4. --text: #3c3c3c;
  5. --text-1: #757575;
  6. --text-2: #222;
  7. --font-size-large: 18px;
  8. --font-size-large-x: 22px;
  9. --font-size-medium: 14px;
  10. --font-size-medium-x: 16px;
  11. --font-size-small-s: 10px;
  12. --font-size-small: 12px;
  13. }

在页面对css变量做引入使用:

  1. // 页面使用
  2. @import \"../../assets/less/variable.less\";
  3. .header {
  4. position: relative;
  5. height: 70px;
  6. text-align: center;
  7. font-size: 0;
  8. .text {
  9. display: inline-block;
  10. vertical-align: top;
  11. line-height: 70px;
  12. font-size: var(--font-size-large);
  13. color: var(--text-2);
  14. }
  15. }

然后在页面中可以直接通过JavaScript修改变量的值

  1. function changeColor(color = \'blue\') {
  2. document.documentElement.style.setProperty(\"--theme-color\",color);
  3. }
优缺点:
  • 优点:只需一套CSS文件; 换肤不需要延迟等候;对浏览器性能要求低;可自动适配多种主题色;
  • 缺点: 不支持IE, 2016年前的chrome,safari; 兼容性参见 Can I Use CSS Variables

CSS变量兼容性

4. Less 在线编译

使用 modifyVars()方法, 基于 less 在浏览器中的编译来实现。在引入less文件的时候需要通过link方式引入,然后基于less.js中的方法来进行修改less变量:

  1. less.modifyVars({
  2. \'@themeColor\': \'blue\'
  3. });

link方式引入主题色文件:

  1. <link rel=\"stylesheet/less\" type=\"text/css\" href=\"./src/less/public.less\" />

小程序换肤方案

本文方案均以 less、gulp 为基本框架。

背景

在开发小程序的时候,尤其是开发第三方小程序,我们作为开发者,只需要开发一套模板即可,但是个别客户的小程序需要做定制化配色方案,也就是说,不同的小程序个体需要对页面的元素(比如:按钮,字体等)进行不同的配色设置。

方案以及问题

由于小程序它自身的技术特点,传统方案的 CSS变量以及Less 在线编译 换肤方案无法使用,所以小程序换肤方案主要是:

  1. 如果没有线上存在多套皮肤的需求,可以抽取颜色变量通过线下编译修改主题色。
  2. 如果有线上多套皮肤的需求,则采用传统前端的多套CSS皮肤方案加更改类名的方式。
  3. 针对动态换肤,后端接口返回色值字段,前端通过 内联 方式对页面元素进行色值设置。

这几种方案都有一些问题无法避免:

  • 方案1、2 比较死板,每次更改主题样式都需要发版小程序,如果主题样式变动不大,可以考虑这种;
  • 方案3 对于前端的改动非常的大,内联也就是通过 style 的方式内嵌到 wxml 代码中,代码的阅读性会变差,但是可以解决主题样式变动不用发版小程序的问题。
方案一

针对方案一,我们只需要抽取相关的变量色值到独立的文件中,约定项目在使用色值的地方统一引用该文件的变量。当需要修改主题色的时候修改对应变量即可。

  1. /** variable.less **/
  2. @theme-color: #FD7622;
  3. @txt-default: #333;
  4. @txt-body: #666;
  5. @txt-info: #999;
  6. @txt-muted: #ccc;
  7. @txt-warning: #FF0500;
  8. @txt-highlight: @theme-color;
  9. @txt-link: #00a5e0;
  10. @txt-feeds: #314c83;
  11. @txt-white: #fff;

在编译阶段,通过 gulp-less的 modifyVars属性修改相关变量即可:

  1. // gulpfile.js
  2. var gulp = require(\'gulp\');
  3. var less = require(\'gulp-less\');
  4. var rename = require(\'gulp-rename\');
  5. function lessTask() {
  6. return gulp.src(\'./less/**/*.less\')
  7. .pipe(less({
  8. modifyVars: {
  9. \'@theme-color\': \'#757575\',
  10. \'@txt-default\': \'#212121\',
  11. }
  12. }))
  13. .pipe(rename(function(path) {
  14. path.extname = \'.wxss\'
  15. }))
  16. .pipe(gulp.dest(\'./wxss\'))
  17. }
  18. function autosTask() {
  19. gulp.watch(\'./less/**/*.less\', lessTask)
  20. }
  21. exports.default = gulp.series(gulp.parallel(lessTask, autosTask))
方案二

这个方案我们需要定制多套主题变量,并编译出多套皮肤样式。

主题色变量配置文件

  1. /** variable.less **/
  2. #theme() {
  3. .colors(dark) {
  4. @theme-color: #000;
  5. }
  6. .colors(light) {
  7. @theme-color: #fff;
  8. }
  9. }

页面样式文件

  1. @import \'variable.less\'
  2. .dark {
  3. @colors: #theme.colors(dark);
  4. .btn {
  5. .btnMixin;
  6. }
  7. }
  8. .light {
  9. @colors: #theme.colors(light);
  10. .btn {
  11. .btnMixin;
  12. }
  13. }
  14. .btnMixin() {
  15. background: @colors[@theme-color];
  16. }
  17. /** 输出
  18. .dark .btn {
  19. background: #000;
  20. }
  21. .light .btn {
  22. background: #fff;
  23. }
  24. **/

页面中使用的方式

  1. 页面的 wxml 引入主题变量 theme

    1. <view class=\"index-layout {{theme}}\">
    2. <button class=\"btn\">按钮</button>
    3. </view>
  2. 通过页面中的 this.data.theme 来控制主题

    1. page({
    2. data: {
    3. theme: \'\'
    4. },
    5. themeChange(e) {
    6. const { theme } = e.target.dataset
    7. this.setData({ theme })
    8. }
    9. })

上面两个方案到目前为止也只是解决了在less文件中的换色问题,而实际的项目中我们很多时候并不能避免一些色值是内联写在 wxml 上以及写死在 javascript 文件中的。

比如,下面的 radio 组件:

  1. <radio value=\"light\" checked=\"true\" color=\"#fd7622\" />

这种情况下同样抽取出一个颜色变量的wxs文件在wxml 使用,如:

  1. // variable.wxs
  2. var themeColor = {
  3. dark: {
  4. \'@theme-color\': \'#333\',
  5. },
  6. light: {
  7. \'@theme-color\': \'#fd7622\',
  8. },
  9. };
  10. function getVariable(theme) {
  11. return themeColor[theme]
  12. }
  13. module.exports = getVariable;
  1. <!--index.wxml-->
  2. <wxs src=\"@wxsVar\" module=\"getVariable\" />
  3. <radio value=\"light\" checked=\"true\" color=\"{{getVariable(theme)[\'@theme-color\']}}\" />

js 文件同理,这里不再复诉。

方案三

小程序中要实现动态换肤,目前能想到的办法就是在涉及到颜色设置时通过 内联(设置 style 方式对页面元素进行色值设置。这种方法目前来说成本较高,对于已经成型的项目来说风险过大。

wxml设置颜色时我们同样可以通过wxs来实现。

  1. function getStyle(style, theme) {
  2. return style + \':\' + theme;
  3. }
  4. function setStyle(styles = [], theme) {
  5. if (!styles || !styles.length) return \'\';
  6. var styleArr = []
  7. styles.forEach(function(style) {
  8. styleArr.push(getStyle(style, theme))
  9. })
  10. return styleArr.join(\';\');
  11. }
  12. module.exports = setStyle;

wxml 中使用

  1. <wxs src=\"@dynamic\" module=\"setStyle\" />
  2. <view class=\"container\">
  3. <view class=\"box\" style=\"{{ setStyle([\'color\', \'border-color\'], theme) }}\">
  4. setStyle([\'color\', \'border-color\'])
  5. </view>
  6. <input type=\"text\" placeholder=\"输入一个色值\" style=\"{{ setStyle([\'border-color\'], theme) }}\" bindconfirm=\"onChange\"/>
  7. </view>
  1. Page({
  2. data: {
  3. theme: \'#222\',
  4. },
  5. onChange(e:{detail: {value: string}}) {
  6. this.setData({
  7. theme: e.detail.value,
  8. })
  9. }
  10. })
示例

这里给一个简单的示例。

也可以通过小程序代码片段体验,点 这里。

最后

由于小程序的特殊性,在换肤这种需求中局限性还是很大的。以上只是给大家提供一下一些解决思路,如果大家有更好的方案的话欢迎留言。

资源下载此资源仅限注册用户下载,请先

1、本站赞助VIP,仅需【128】元即可 ! ! ! (赞助后永久享受整站资源全部免费下载)
2、站内资源均可通过签到等任务进行免费兑换。(鼓励大家签到)
3、站内资源均来源于网络公开发表文件或网友投稿发布,如侵犯您的权益,请联系管理员处理。
4、本站所分享的源码、模板、软件工具等其他资源,都不包含技术服务,请大家谅解!
5、所有资源均收集于互联网仅供学习、参考和研究,请理解这个概念,所以不能保证每个细节都符合你的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所以不支持任何理由的退款兑现(特殊情况可退积分),请熟知后再赞助下载!收取的费用只为能长期与大家分享学习,本站为非商业性网站,纯属个人爱好!

K4资源 小程序教程 聊一聊小程序换肤吧 https://www.k4sc.com/105667.html

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务