微信小程序3（WXSS模板样式和全局局部配置）

WXSS模板样式

WXSS模板样式-rpx

rpx(responsive pixel)是微信小程序独有的，用来解决屏适配的尺寸单位
实现原理‘
鉴于不同设备的屏幕大小不同，为了实现屏幕的自动适配，rpx把所有社保的屏幕，在宽度上等分为7500份（即当前屏幕的总宽度为750px）
小程序·在不同设备运行时，会自动把rpx的样式单位换算成对应的像素单位px来渲染，从而实现屏幕适配

WXSS模板样式 - 样式导入

使用wxss提供的@import 语法，可以导入外联的样式表
@import的语法格式
@import后跟需要导入的外联的样式表的相对路径，用;表示语句结束

@import "commm.wxss" ;

WXSS模板样式 - 全局样式和局部样式

全局样式

定义在app.wxss中的样式作为全局样式，作用于每个界面

常用的配置项：

1. pages 记录当前小程序所有页面的存放路径
2. window 全局设置小程序窗口的外观
3. tabBar 设置小程序的tabBar效果
4. style 是否启用新版的组件样式

全局配置 - window

1. 小程序窗口的组成部分
   
2. 了解window节点常用的配置项

全局配置 - tabBar

tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换。
小程序中通常将其分为：

• 底部tabBar
• 顶部tabBar
  注意：
• tabBar中只能配置至少2个、最多5个tab标签
• 当渲染顶部tabBar时，不显示icon,只显示文本
  tabBar的6个组成部分

1. background: tabBar的背景色
2. selectedIconPath:选中时的图片路径
3. 3.borderStyle: tabBar上边框的颜色
4. iconPath: 未选中时的图片路径
5. selectedColor: tab上的文字选中时的颜色
6. color: tab上文字的默认（未选中）颜色
   tabBar节点的配置项

每个tab项的配置选项

简单配置tabBar

1. 在项目的统计目录下创建images文件夹，里面存放你需要的图片资源
   由于无法直接通过编译器创建与pages同级的目录，可以通过右击打开资源管理器，直接创建文件夹,我们需要的图片资源分点击前和点击后，建议在阿里巴巴矢量图标库下载两种颜色的png，便于管理，对其进行有意义的命名（自己能区分就好）
2. 在app.json文件中，创建你需要的分页，分页是为了对应tabBar中有得选

 "pages": [
      "pages/index/index",
      "pages/shangcheng/shangcheng",
      "pages/wode/wode"  
    ],

3. 创建与windows同级的标签"tabBar",并利用上面的表格属性为其创建

"tabBar":{
      "list":[
        {
          "pagePath":"pages/index/index",
          "text":"首页",
          "iconPath": "images/shouye.png",
          "selectedIconPath": "images/shouye1.png"
        },
        {
          "pagePath":"pages/shangcheng/shangcheng",
          "text":"商城",
          "iconPath": "images/shangcheng.png",
          "selectedIconPath": "images/shangcheng1.png"
        },
        {
          "pagePath": "pages/wode/wode" ,
          "text": "我的",
          "iconPath": "images/wode.png",
          "selectedIconPath": "images/wode1.png"
        }
      ]
    },

以上就是所有步骤，下面的gif是实际的效果，内容是之前的填充，没有删除

局部样式

在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面
注意：

1. 当局部样式和全局样式冲突，根据就近原则，局部样式会覆盖全局样式
   
2. 当局部样式的权重大于等于全局样式的权重时，才会覆盖全局的样式
   

页面配置和全局配置的关系

小程序中app.json中的window节点，可以全局配置小程序中每个页面的窗口表现。
如果某些小程序页面想要拥有特殊的窗口表现，此时，”页面级别的.json配置问价“就可以实现这种需求。
注意：当页面配置和全局配置冲突时，根据就近原则，最终的效果是以页面配置为准

页面配置中常用的配置项

和全局配置一样