微信小程序开发入门与实践
上QQ阅读APP看书,第一时间看更新

3.7 全局样式文件app.wxss

到目前为止,welcome欢迎页面和实际图相比还有一些不一样的地方,比如字体。设计图里的字体使用的是微软雅黑,而目前的字体还是小程序默认的字体。

最简单的更改字体的方法是在wxss页面中加入如下代码:

代码会将welcome页面中的所有text组件的字体更改为微软雅黑。那我们思考一个问题,假如现在有100个页面,而100个页面里几乎所有的字体都应该是微软雅黑。在100个页面里重复设置字体这并不是一个很好的解决方案。

所以,我们需要有一个全局样式表,可以为所有页面设置“默认”样式。小程序为我们提供了一个这样的样式表文件,就是前面提到过的app.wxss文件。

我们将代码清单3-10的代码,复制到项目根目录下的app.wxss文件中。虽然这段代码不在welcome.wxss页面样式表中,但依然可以使welcome页面的text组件字体更改为“微软雅黑”。还可以在这里设置一些其他的公共样式,比如字体大小font-size、字体颜色color等。

如果不想在某个页面中使用全局默认样式,那么只需要在相应页面的wxss文件中重新定义这个样式即可。小程序会优先选择页面的wxss文件,而不是app.wxss文件。