• 本系列课程所有实例均以企业展示为基础。
• 本系列课程之起因：虽然超级页面已经很强大了，但是每个人的需求是千变万化的。若要尽可能的实现自已的碎片化需求，那么在超级页面的基础之上进行简单基础的编辑，也是很有必要的。
• 本系列课程适用于：本地修改小程序基础较为薄弱的用户。
• 本系列课程的目的：让基础薄弱的用户拥有在本地编辑小程序基本静态内容的能力。
• 学习本课程的高效方法建议：下载一个小程序，一边对照教程一边实践。
• 更改过任何代码后，请记得Ctrl+S保存一下；如果文章中的GIF和图片感觉看不清的话：右键 - 在新标签页中打开图片。

夺冠魔方代理商本地编辑小程序系列课

第3课：如何自定义小程序全站配色？

实话实说，本节课对于新手来说，有一点点难度，需要多动手

如果说上节课的标题栏及tabBar的自定义本色还满足不了你的话，那么本节是更加骚气的全站（即所有页面）颜色自定义解决方案。

我是小白，我可以随意配色吗？

因为是面向基础薄弱的用户，所以还是不能随心所欲、要节制一下的。注意一下选色要点：

上面图中的前两个新颜色都可以，第三个就太淡了，根本看不清！

• 新颜色的选取不宜太亮太谈，饱和度和亮度以原来的颜色为参考，除非你不是新手。
• 举个栗子：你想要一个红色，那么这个红色不论是白色背景红色文字还是红色背景白色文字都要很好的识别，这是选取新颜色的前提。

如果对CSS和HTML比较了解的话，那就是想怎么改就怎么改了。不过基础用户学完这篇，应该已经很厉害了。

只要3个步骤就可以改头换面了

1、准备好原颜色值和新颜色值

我们先设定一个新颜色值

假如我需要使用的新颜色值为：#ff3333

然后再找到小程序的默认主色

如何找到小程序默认的主色值？一般情况下

tabBar配置项中的selectedColor的值

或者

标题栏window配置项中的navigationBarBackgroundColor的值

就是小程序的主色值。

如果不知道tabBar或者标题栏的配置代码在哪里的话，请看第一课

"tabBar": {
    "color": "#666666",
    "selectedColor": "#09bb07"
    ]
  },

或者

"window": {
    "navigationBarBackgroundColor": "#09bb07"
  },

本案例使用的是企业展示的绿色版，通过查找，我们发现小程序的默认主色值是：#09bb07

那么特殊情况下怎么办呢？

操作思路：先在页面中确定一处为主色的区域，然后用调试器选中该元素，可以查看到该元素的color或者background属性的值，就是颜色值。

操作方法如下：

如果选择的元素有多个颜色值，我怎么知道哪个是主色值？

点击下图中的位置，会自动跳转到.wxss文件中对应的位置，通过颜色值前面的小色块来判断。

2、最关键的一步

查找全部颜色值：

1. 点击文件资源目录上方的搜索图标，打开全局查找
2. 输入小程序的原主色值，如：#09bb07
3. 点击查找按钮

4. 然后你将会看到如下界面：

替换颜色值：

然后双击第一个红框里的内容，将会打开该文件，在文件文件里执行如下操作：

按下Ctrl+F后，先输入小程序原主色值，再输入将要替换的新色值，点击替换即可。

然后，重复上面的步骤：双击打开 > Ctrl+F > 替换...

没办法，微信开发者工具不支持全局替换，只能查找

你一定要做到：

• 以上步骤要一直到把所有文件替换完成。
• 你还要把原主色值和新主色值都转换成rgb再替换一次（不哭）。

使用rgb替换时需要注意一下：比如 #f33 的rgb值是 rgb(255, 51, 51)，那么你去搜索和替换时，只搜索替换255,51,51即可，注意中间不要留空格。

基础弱，想要实现较多的效果改动，有点累也是正常的。

3、审查

替换完成后，还要在模拟器里检查一遍，看看哪里还有问题。（有些地方应用了渐变色或者其它辅助色和主色不匹配时）

再针对问题进行调整。

最后：你肯定想知道全局替换怎么实现

虽然微信开发者工具不支持，但也有很多编辑器是支持的。比如我用的vscode，免费轻量，推荐大家使用。

全局替换请查看下方的GIF操作流程：

看完后是不是感觉爽歪歪？

不过有几点需要说明：

• 替换完成后你会发现，还有绿色没有被替换掉，对于这些特殊颜色需要单独进行替换
• 类似tabBar的颜色，请自行设计后进行替换即可
• 要注意的是：并不上面第三步就没用了，用于查找定位是非常好用的。只不过是缺少了全局替换

本节完。