分享

小程序.我还是不知道起什么名字

 云深无际 2021-11-03

全局配置

加个字体

代码会将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 是否开启下拉刷新。

    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多