云开发版的微信商城小程序第三章

三，初始化全局样式

我们在小程序里需要多处用到一些公共的，相同的颜色或者字体大小。我们如果每个地方都写上一个颜色值，后期如果需要更换主题颜色时，要修改很多地方，所以我们要把颜色定义一个全局的变量，来供需要使用到颜色的地方使用。这样后期主题颜色有变化时，我们只需要单独改变这个全局的颜色，其他地方使用到这个全局颜色的地方就方便了。所谓前人栽树后人乘凉。

3-1，在app.wxss定义全局颜色

我这里先定义一个全局的主题颜色如下：

这里要记住，我们themeColor前面的 - - 是固定写法。只有这样定义的全局变量，才能使用。

3-2，使用全局颜色变量

这里以首页里的一个文字，来给大家演示全局颜色变量的使用。 我们在home.wxml里定义一个demo的选择器

然后在home.wxss里使用

使用全局样式变量的语法也是固定的。必须是var()包裹着变量名。 这样我们就可以在任何需要统一颜色的地方，使用我们定义好的颜色变量了。

3-3，改变navigationBar顶部栏样式。

可以看出我们默认的顶部栏是白色背景，黑色文字。

对应代码是app.json里的window

那我我们如果想变成下面这样的

就要把window里的几个值做下改变。

这样我们顶部的导航栏和我们底部的tabBar主题颜色就可以保持统一了。

3-4，全局字体大小保持统一

字体大小统一，就比较容易了，我们只需要在app.wxss的page里设置font-size即可，如下