为微信小程序增加换肤功能

起源

之前，我做了一个展示类的微信小程序，本来都快要完结的了，可是突然，我才听说还要给小程序增加一个换肤功能，这个换肤功能可不是简单的写两套不同的样式表就行了，因为他要可以在后台动态替换背景，底图，文案，一些展示图，以及字体边框的颜色的替换，也就是说不能把这些写在小程序本地，这些图片和文案，字体颜色全部需要从后台获取，我听的差点当场去世。不过说归说，还是要做的，所以，想个方案呗。

方案和问题

我百度翻看了一些资料，发现换肤的方案都差不多，开发好不同皮肤的wxss样式，然后根据不同的皮肤标志，切换样式类，就ok了。基本上换肤差不多是这个流程吧，不过这对于我这个场景来说好像不太够，因为他不仅仅是样式的变化，还有图片的替换，那么主要呢，就是以下几个问题：

1. 小程序中无法动态加载wxss样式文件，没有外部样式这一说，所以你想要把一些字体颜色，背景颜色通过后台来配置，我想到的只能通过把样式放在style属性中作为内联样式进行加载，那么，每一处需要动态设置样式的地方，都需要写成内联样式，极大的增加工作量。
2. 在这个小程序的业务场景需求中，用户无法控制皮肤的更换，仅后台才可以控制这些，而且，客户是根据不同的节日进行不同的活动才切换这些图片，所以皮肤的配置不会频繁的进行更换，那么就需要一定的缓存功能。

基本上，最大的问题就是以上两点，换皮肤，说白了就是拿到不同的样式和图片配置，动态的覆盖默认的样式及图片，pc端还好，根据不同的皮肤选择不同的样式文件即可，可是小程序就麻烦了，需要一个一个的写在内联样式中，太可怕了，那么换肤方案没什么好说的了，就是从服务器获取皮肤配置，然后我再把样式编写到wxml的内联样式中就可以了，没什么好说的，都是些死方法，那么我只好从其他方面进行改进，以编写提高效率了。

优化

使用缓存，防止重复从服务器请求皮肤配置文件

缓存配置文件，防止重复从服务器请求皮肤配置文件

我们发现啊，在每个页面都需要获取到皮肤配置文件，那么我需要在每个页面都请求一次服务器，来获取皮肤配置文件吗？这样想想就觉得不行，太没有效率了，明明一个配置文件请求一次就好了，却需要每进入一次页面就请求一次，这不能忍，那么我们可以在app.js中请求配置文件，并且将配置信息缓存起来，后续的页面直接使用这个配置信息即可。具体怎么做呢，我是这样做的：

在app.js中增加一个getSkinConfig方法，用于获取皮肤配置，他接受一个回调函数作为参数，

1. 当app.js中的skinConfig变量为null时，则说明未从服务器中获取到皮肤，则，
   1. 将这个方法接收的回调函数放入一个queue的数组中，这个queue用于存放回调队列。然后根据isLoadingSkinConfig这个标记来判断是否正在从服务器请求配置文件，如果否，则调用接口加载皮肤配置，如果是，则表明正在请求服务器配置，则不需要做其他操作。等待接口返回即可。
   2. 当接口从服务器加载完配置文件时，重置isLoadingSkinConfig标记，并且依次遍历执行queue队列中的回调函数，并将加载到的配置文件作为参数传递给回调函数。
   3. 当无法从服务器加载配置文件时，比如接口请求出错了，则同样重置isLoadingSkinConfig标记，也同样遍历quequ队列，将错误信息传递出去，让调用getSkinConfig方法的页面自己进行处理。
2. 当app.js中的skinConfig对象有值时，那么直接执行回调函数即可。

为什么使用一个queue队列呢？其实这里不用也可以，如果skinConfig为null时直接调用接口请求服务器配置即可，这里主要是为了防止在极端情况下，在接口未返回结果时，又有页面调用getSkinConfig方法导致接口重复调用的情况，当然了，理论上来说不太可能，不过为了以防万一而已。

提一嘴，不要在app.js的onload方法中进行加载，因为这样你无法通知页面，皮肤配置加载完毕了，而页面在一开始也不能直接依赖app.js中已经获取到皮肤配置文件了，这样是不行的。

提取重复代码

上面我们将从服务器获取的配置文件进行缓存起来，以供页面进行使用，但是，我们又发现了，好像每一个页面，都会需要这一个皮肤配置文件，那么我们难道每一个页面都要写一遍请求app.skinConfig()方法？这太无语了。我们需要提取重复代码，但是改怎么提取呢？写成模块？那不行，普通js模块的调用无法绑定页面的this上下文，那么就无法设置data对象，直接传递this参数或者使用call，a