小程序.我还是不知道起什么名字
全局配置
加个字体
代码会将welcome页面中的所有text组件的字体更改为微软雅黑。那我们思考一个问题,假如现在有100个页面,而100个页面里几乎所有的字体都应该是微软雅黑。在100个页面里重复设置字体这并不是一个很好的解决方案。
所以,我们需要有一个全局样式表,可以为所有页面设置“默认”样式。小程序为我们提供了一个这样的样式表文件,就是前面提到过的app.wxss文件。
抱歉,写错地方了
如果不想在某个页面中使用全局默认样式,那么只需要在相应页面的wxss文件中重新定义这个样式即可。小程序会优先选择页面的wxss文件,而不是app.wxss文件。
这个也是css的内容,样式选择器的优先级。
到目前为止,我们的welcome页面已经像那么回事儿了。但页面的样式和设计图还不太一样,设计图中整个页面呈现的是橘红色,而现在的页面还是白色。那么,来修改一下页面的背景颜色吧。
要修改页面整体的背景色,需要寻找一个包裹所有页面元素的容器,并设置这个容器的背景色。那么,首先尝试给页面最外层view(class="container"的这个view)一个背景色。在welcome.wxss文件中的.container样式里新增属性background-color: #ECC0A8。
并不是整个页面都呈现出橘红色,只是有元素占据的地方才呈现出橘红色。原因是因为最外层的container view没有固定的高度,它的高度由其内部子元素决定,所以橘红色部分的下边刚好和按钮的下边重合。
如何解决这个问题呢?
可以通过给container view一个固定的高度来解决这个问题,但这并不是最好的办法。因为在不同的机型上,屏幕的尺寸是不一样的,固定的高度无法去适配不同的机型,可能出现滚动条,也可能橘红色无法覆盖整个页面。
当然,用我们前面学到的rpx是可以解决这个问题的,将container view的高度单位设置为rpx,就可以让它随着不同的机型进行自适应调整。但这看起来很蠢,高度具体设置多少,还需要我们了解iPhone 6的屏幕分辨率。所以,这依然不是一个很好的解决方案。
查看一下页面结构
注意到 container外面还有page页面
page代表着整个页面的容器,如果想对页面整体做样式或者属性设置,那么应该考虑page这个页面的根元素。
话说好像电量是我的电脑电量
很遗憾这个导航栏不可以隐藏或者取消,它必须存在。我们之所以说小程序无论从开发还是设计上都比较简单,有很大一部分原因是因为小程序做了很多这样的“强制性约束”,不给开发者很大的自由度,自然简单。这固然是因为小程序设计初衷就是用来快速开发轻量级应用的,但也有一部分原因是因为小程序目前还处于生态的早期阶段,官方没有那么多精力支持非常丰富的组件接口。
既然这个导航栏无法取消,如何让整个页面只有一种颜色呢?下面我们考虑将导航栏的颜色和页面的背景色设置成同一个颜色
。
在前面 我使用了app.json的一个配置项pages,用来注册小程序页面文件.
window配置可项用来设置小程序的状态栏、导航栏、标题和窗口的背景色。我先来学习window配置项下能够更改导航栏颜色的属性:navigationBarBackgroundColor。在app.json文件中加入一个window配置项,并设置window的属性navigationBarBackgroundColor值为#ECC0A8。更改后的app.json文件代码如下:
嘻嘻,浑然一体嗷
现在,我们的欢迎页面是不是很像各类iOS和Android App的启动页面?
当然,window这个选项下并不是只有navigationBarbackgroundColor这一个属性,它还有以下几种属性:
· navigationBarTextStyle 配置导航栏文字颜色,只支持black/white。
· navigationBarTitleText 配置导航栏文字内容。
· backgroundColor 配置窗口颜色。
· backgroundTextStyle 下拉背景字体,仅支持dark/light。
· enablePullDownRefresh 是否开启下拉刷新。