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

最新推荐文章于 2024-06-16 09:33:39 发布

言顶

最新推荐文章于 2024-06-16 09:33:39 发布

阅读量1.4k

点赞数 2

分类专栏：微信小程序文章标签：微信小程序小程序 javascript

本文链接：https://blog.csdn.net/qq_46066548/article/details/126947285

版权

微信小程序专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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节点常用的配置项

属性名	类型	默认值	说明
navigationBarTitleText	String	字符串	导航栏标题文字内容
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持black/white
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉lading的样式，仅支持dark/light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件出发时距页面底部距离，单位为px

全局配置 - tabBar

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

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

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

属性	类型	必填	默认值	描述
position	String	否	bottom	tabBar的位置，仅支持bottom/top
borderStyle	String	否	black	tabBar上边框的颜色，仅支持black/white
color	HexColor	否		tab上文字的默认（未选中）颜色
selectedColor	HexColor	否		tab上文字选中时的颜色
backgroundColor	HexColor	否		tabBar的背景色
list	Array	是		tab页签的列表，最少2个，最多5个

每个tab项的配置选项

属性	类型	必填	默认值
pagePath	String	是	页面路径，页面必须在pages中预先定义
text	String	是	tab上显示的文字
iconPath	String	否	未选中时的图标路径；当postion为top时，不显示icon
selectedIconPath	String	否	选中时的图标路径；当postion为top时，不显示icon

简单配置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"
        }
      ]
    },