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

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

时间：2019-08-12 08:54:49

WXSS模板样式

WXSS模板样式-rpx

rpx(responsive pixel)是微信小程序独有的，用来解决屏适配的尺寸单位

实现原理‘

鉴于不同设备的屏幕大小不同，为了实现屏幕的自动适配，rpx把所有社保的屏幕，在宽度上等分为7500份（即当前屏幕的总宽度为750px）

小程序·在不同设备运行时，会自动把rpx的样式单位换算成对应的像素单位px来渲染，从而实现屏幕适配

WXSS模板样式 - 样式导入

使用wxss提供的@import语法，可以导入外联的样式表

@import的语法格式

@import后跟需要导入的外联的样式表的相对路径，用;表示语句结束

@import "commm.wxss" ;

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

全局样式

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

常用的配置项：

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

全局配置 - window

小程序窗口的组成部分

了解window节点常用的配置项

全局配置 - tabBar

tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换。

小程序中通常将其分为：

底部tabBar顶部tabBar

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

tabBar的6个组成部分background: tabBar的背景色selectedIconPath:选中时的图片路径3.borderStyle: tabBar上边框的颜色iconPath: 未选中时的图片路径selectedColor: tab上的文字选中时的颜色color: tab上文字的默认（未选中）颜色

tabBar节点的配置项

每个tab项的配置选项

简单配置tabBar

在项目的统计目录下创建images文件夹，里面存放你需要的图片资源

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

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

创建与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是实际的效果，内容是之前的填充，没有删除