[小程序]样式与配置

一、外部样式导入

? ? ? ? 使用@import加外部样式表的相对路径并以?;?表示语句结束。

@import "common.wxss";

二、全局样式和局部样式

? ? ? ? 全局样式位于app.wxss中，会作用于整个项目中所有页面中。

? ? ? ? 局部样式位于对应的wxss文件中，仅作用于当前页面，当全局样式和局部样式发生冲突时，会根据就近原则使用局部样式覆盖全局样式

三、全局配置与局部配置

? ? ? ? 1.全局配置

? ? ? ? 全局配置位于app.json文件下，常用配置项如下：

? ? ? ? ? ? ? ? pages：所有页面的存放路径

? ? ? ? ? ? ? ? window：窗口外观

? ? ? ? ? ? ? ? tabBar：底边栏的效果

? ? ? ? ? ? ? ? style：是否启用新版组件样式

? ? ? ? 2.window配置

? ? ? ? 小程序页面从上到下分为三个部分：导航栏(navigateBar)、背景(background)和页面主体(wxml)，如下图所示

? ? ? ? ?常见的window节点配置项如下：

? ? ? ? 3.tabBar

? ? ? ? 用于快速切换页面，类似于Panel。在小程序中分为顶部tabBar和底部tabBar。需要注意的是，如果设置了底部tabBar则不会显示对应的图标。

? ? ? ? tabBar最少设置2个标签，至多设置5个标签,。tabBar由6个部分组成，如下图所示：

? ? ? ? 配置方式如下：

  "tabBar": {
    "list": [{
      "pagePath": "pages/homepage/home",
      "text": "主页"
    },
    {
      "pagePath": "pages/index/index",
      "text": "索引"
    }]
  },

?