小程序动态换肤

背景

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

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

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

开发详解

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

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