三,初始化全局样式
我们在小程序里需要多处用到一些公共的,相同的颜色或者字体大小。我们如果每个地方都写上一个颜色值,后期如果需要更换主题颜色时,要修改很多地方,所以我们要把颜色定义一个全局的变量,来供需要使用到颜色的地方使用。这样后期主题颜色有变化时,我们只需要单独改变这个全局的颜色,其他地方使用到这个全局颜色的地方就方便了。所谓前人栽树后人乘凉。
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即可,如下
这样我们就可以把整体的字体大小设置为32rpx了。