小程序根据后台API配置进行换肤

背景

最近项目提出新需求，在小程序上根据不同客户进行换肤，换肤可不是先在本地开发好不同皮肤的wxss样式，然后根据不同的皮肤标志，切换样式类就行了；而是要在后台动态替换背景，底图以及css样式。刚接到需求有点蒙，因为小程序是无法从js操作wxss的，无法动态加载wxss样式文件，不能像vue之类的使用外部样式进行换肤。怎么搞？

于是开始技术研究，首先不能使用外部样式已成定局，只能通过style内联样式进行加载，但是这样每个页面都要一个个页面去声明变量，并且动态写在style中，太可怕了；于是我想到vue中Mixin页面混淆的原理，如果可以实现，就无需每个页面都去声明变量，大大提高效率和可维护性。

好了，技术分析完毕。此篇文章重点记录页面混淆和style样式的编写。

开发详解

这里需要感谢网上各位大神编写的mixin库，让我能站在巨人的肩膀上编码。引入mixin.js后，我编写了一个basePageMixin.js对需要皮肤配置的页面进行混淆，代码如下：

提取公用的mixin代码

之后再需要对应的bindPage页面引入basePageMixin.js混淆后，其data将共享，直接在bindPage.wxml中引用即可。

页面混淆

wxml中引入内联样式

这样确实节省了很多工作量，但需要明确每一个页面需要进行换肤的样式、文本、链接等，并且制定好数据格式，达到跟后端api统一，这点非常重要。 

这里还有一个需求，当图片渲染出错时，必须还原初始配置，因此我在basePageMixin.js中写了公用的监听渲染出错函数，并且通过对象键名进行获取，重设初始值。

wxml绑定data-key的用意在此

skinSetting是默认样式类

结语

至此，小程序换肤功能完成，方法还是最简单最无奈的动态修改style；但是引入Mixin的概念确实事半功倍。

在做技术研究的时候，也曾想过使用线上样式表、文件下载解析样式类等方案，但其实都是换汤不换药，在小程序没有提供js操作css样式类的前提下，我确实想不出更好的办法做到后端随时控制小程序换肤的需求。

希望有更好做法的大神留下你们的宝贵意见！

再会