收藏
回答

小程序 一键换肤 有什么最佳实践?

在功能完善的基础上,换肤是个锦上添花的功能。但是由于不能通过js操作wxss,或者说动态更换样式文件,导致如果要实现这么一个看似简单的功能,会有巨大的工作量要去弄:

大的方面,包括背景图和颜色,小的方便,包括1px的边框线的颜色调整。希望有个比较友好的方案,不知道有没有什么比较好的思路借鉴呢?

回答关注问题邀请回答
收藏

3 个回答

  • 右耳朵猫(whinc)
    右耳朵猫(whinc)
    发表于小程序端
    2023-11-30

    可以使用css 变量来实现,代码中动态切换不同的class就可以实现一键换肤,具体效果可以看看【傻大妈计算器】,其通过这种方式支持了13种主题

    2023-11-30
    有用
    回复
  • Sam
    Sam
    2020-04-23

    在近期的项目中我们也需要针对不同小程序进行换肤,项目代码我就不贴出来了哈,准备写几篇文章来给大家提供一下思路哈,欢迎大家看看:

    文章地址:https://developers.weixin.qq.com/community/develop/article/doc/0008e250998df0dee23aaec5e51813

    项目地址:https://github.com/csonchen/wxSkin

    2020-04-23
    有用
    回复 1
  • 小白钊
    小白钊
    2020-04-03

    通过{{data}}的形式可以动态修改


    比如:{{"1px"}}, {{"color: #f00"}} 等等

    2020-04-03
    有用
    回复 5
    • 你是人间四月天
      你是人间四月天
      2020-04-03
      如果小打小闹倒是问题不大,把整个项目功能模块换肤,就特别需要一个好的思路来处理。
      2020-04-03
      回复
    • 小白钊
      小白钊
      2020-04-03回复你是人间四月天
      核心就是这个,至于具体实现,是用组件、多页面、还是其他,各有优劣
      2020-04-03
      回复
    • 小白钊
      小白钊
      2020-04-03回复小白钊
      再补充一个,个人的观点。要做换皮的,要不就是有追求的开发者,要不就是有追求的甲方爸爸。不管是哪种,都是比较麻烦的事,特别是后期更新版本维护bug的时候。如果决定做换皮就不要怕麻烦
      2020-04-03
      回复
    • 你是人间四月天
      你是人间四月天
      2020-04-03回复小白钊
      如果基于接口返回配置数据,图标,字体颜色,边框线这些,怎么约定比较合理一些呢?(目前想的按照界面,但是会出现重复的问题,A套皮肤有对应的皮肤,主题色,字体色,B套皮肤,按照这个走貌似要合理些?)
      2020-04-03
      回复
    • 台州满天星
      台州满天星
      2020-04-03
      不同的css名,data里写一下,绑定到class
      我就改个字号,太多也烦
      2020-04-03
      回复
登录 后发表内容
问题标签