微信小程序app.wxss文件

合集 - 微信小程序(60)

1.小程序开发概述2023-04-022.创建第一个小程序2023-04-023.微信小程序app.json文件2023-04-024.微信小程序-sitemap.json文件2023-04-025.微信小程序app.js文件2023-04-02

6.微信小程序app.wxss文件2023-04-02

7.微信小程序-project.config.json文件2023-04-068.微信小程序-页面.json文件2023-04-059.微信小程序-页面.js文件2023-04-0510.微信小程序-组件创建和使用2023-04-0611.微信小程序-组件-.json文件2023-04-0612.微信小程序-组件-.js文件2023-04-0613.微信小程序-WXSS学什么2023-04-0714.微信小程序-WXSS的书写格式2023-04-0715.微信小程序-新增RPX响应式单位2023-04-0716.微信小程序-什么是WXML2023-04-0917.微信小程序-WXML数据绑定2023-04-0918.微信小程序-WXML条件渲染2023-04-0919.微信小程序-WXML的hidden属性2023-04-0820.微信小程序-WXML列表渲染2023-04-0921.微信小程序-WXML列表渲染Key2023-04-0922.微信小程序-WXML包装元素2023-04-0923.微信小程序-WXS的作用和使用2023-04-1424.微信小程序-WXS独立文件2023-04-1425.微信小程序-WXS支持的语法2023-04-1426.微信小程序-小程序事件绑定2023-04-1627.微信小程序-小程序事件冒泡和事件捕获2023-04-1628.微信小程序-事件传递数据2023-04-1629.微信小程序-data和mark2023-04-2030.微信小程序-touches和changedTouches2023-04-2131.微信小程序-案例练习2023-04-2132.微信小程序-view组件2023-04-2233.微信小程序-text组件2023-04-2234.微信小程序-icon组件2023-04-2235.微信小程序-button组件2023-04-2236.微信小程序-image组件2023-04-2437.微信小程序-scrollview2023-05-1338.微信小程序-image组件-选择相册资源案例2023-04-2439.微信小程序-自定义组件2023-05-1340.微信小程序-自定义组件样式隔离2023-05-1441.微信小程序-自定义组件外部样式2023-05-1442.微信小程序-传递数据父传子2023-05-1443.微信小程序-传递数据子传父2023-05-1444.微信小程序-页面访问组件数据和方法2023-05-1445.微信小程序-组件通讯练习2023-05-1446.微信小程序-单个插槽2023-05-1547.微信小程序-多个插槽-具名插槽2023-05-1648.微信小程序-behaviors2023-05-1749.微信小程序-双线程渲染模型2023-05-1850.微信小程序-页面生命周期2023-05-2051.微信小程序-页面生命周期方法2023-05-2152.微信小程序-组件生命周期方法2023-05-2153.微信小程序-应用程序生命周期方法2023-05-2154.微信小程序-页面跳转Tabbar2023-05-2155.微信小程序-页面跳转navigator组件2023-05-2156.微信小程序-页面跳转wxAPI2023-05-2157.微信小程序-页面跳转数据传递2023-05-2158.微信小程序-常用弹窗2023-05-2159.微信小程序-Storage2023-05-2160.微信小程序-获取用户位置2023-05-21

收起

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

app.wxss

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

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

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

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

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

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

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

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

.title {
  color: #f0f;
}

日志页面：

首页：

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