微信小程序app.wxss文件

经过我们上一章的介绍 app.js 文件之后我们知道了这个文件可以监听小程序的生命周期与存放一个全局的使用数据,那么接下来我们在来看关于微信小程序的全局的文件 app.wxss (全局样式文件)。

app.wxss

要演示这个全局样式首先我们要有多个页面,创建一个 log 页面:

image-20230402173151139

然后发现我们创建完毕页面之后微信小程序自动为我们注册到了小程序当中,并且在注册的时候呢,他会把我们创建的页面放到数组的最后,写在 pages 数组当中的页面前面的会被先加载,写在后面的会被后加载,那么我们新建的 log 页面,什么时候加载,是在我们要用到的时候才会进行加载,这是个注意点。那么我们想看我们刚刚新建的日志页面该如何进行查看呢,那么就是调整数组的顺序。

image-20230402173621025

那么除了这种方式那么还有没有别的方式呢,答:当然是有的啦,我们先将顺序调整回来,这个时候我们最开始显示的是首页,这个时候我们就想看日志,不想查看首页该如何弄呢

找到我们小程序开发工具的编译下拉框,选择添加编译模式:

image-20230402173848632

配置下下图当中的两个选项即可:

image-20230402174005626

点击确定按钮之后你会发现之前我们的调试器显示的是首页,现在立马就变成了我们的日志页面了。

首先来看一个特性那么就是各个页面之间的样式都是各个页面独立的样式(当前页面的样式不会影响到其它的页面),我们在index页面添加了一个title的类样式,我们再去日志页面添加一个容器并且运用这个title类样式,会发现没有效果:

image-20230402181627360

好这样我们这个知识点就了解完毕,进行下一步查看全局样式,我们在 app.wxss 当中添加一个类样式 title:

.title {
  color: #f0f;
}

日志页面:

image-20230402182612659

首页:

image-20230402182642332

样式都变了,好了到此为止内容介绍完毕。

posted @ 2023-04-02 18:28  BNTang  阅读(399)  评论(0)    收藏  举报