小程序学习day06-wx：for续、WXSS模版样式、rpx尺寸单位、@import、全局样式与局部样式、全局配置

25、wx：for续

（5）手动指定索引和当前项的变量名

        1）使用wx:for-index可以指定当前循环项的索引变量名

        2）使用wx:for-item可以指定当前项的变量名

（6）wx:key的使用

类似于Vue列表渲染中的:key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定一个唯一的key值，从而提高渲染的效率

26、WXSS模版样式

（1）概念：一套样式语言

（2）作用：美化WXML的组件样式，类似于网页开发者的CSS

（3）WXSS和CSS的关系

        1）相同点：

都有通用的选择器、通用的样式规则

        2）不同点

        ①CSS具有选择器样式规则

        ②WXSS具有rpx尺寸单位，@import样式导入

27、rpx尺寸单位

（1）作用：用来解决平时配的尺寸单位

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

        1）在较小的设备上，1px所代表的宽度较小

        2）在较大的设备上，1px代表的宽度较大

（3）rpx与px单位换算（开发小程序时，设计师可以用iPhone6作为视觉稿的标准）

        iPhone5：1rpx=0.42px

        iPhone6：1rpx=0.5px

        iPhone7：1rpx=0.552px

28、@import

（1）作用：使用@import，可以导入外联的样式表

（2）语法：@import后跟导入样式的路径，并以分号结尾

（3）示例：

        1）代码准备：

        2）在需要地方的wxss文件中导入

        3）渲染

29、全局样式与局部样式

（1）全局样式

        1）概念：定义在app.wxss中的样式，作用于所有页面

        2）示例：

在list页面

在index页面

（2）局部样式

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

        2）示例：

（在list.wxss页面中修改字体颜色，不会作用到index页面）

（3）注：

1）当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式

2）当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局样式

30、全局配置

（1）全局配置文件：小程序根目录下的app.json文件

（2）常见配置项（可在app.json的window中找到）：

        1）pages（记录当前小程序所有页面的存放路径）

        2）window（全局设置小程序窗口的外观）

初始：

        ①navigationBarTitleText（String）：默认值字符串，导航栏标题文字内容

        ②navigationBarBackgroundColor（HexColor）：默认值#000000，导航栏背景颜色

        ③navigationBarTexrStyle（String）：默认值white，导航栏标题颜色，仅支持black/white

        ④backgroundColor（HexColor）：默认值#ffffff，窗口的背景色（下拉刷新时可以看见）

⑤backgroundTextStyle（String）：默认值dark，下拉loading样式（小圆点），仅支持dark/light

⑥enablePullDownRefresh（Boolean）：默认值false,，是否开启全局下拉刷新

⑦onReachBottomDistance（Number）：默认值50，页面上拉触底事件触发时距底 部的距离，单位为px（无特殊需求，不建议修改）

3）tabBar（设置小程序底部的tabBar效果）（tabBar标签路径在pages中的最前面）

        ①作用：用于实现多页面的快速切换

        ②分类：顶部tabBar和底部tabBar

        ③注：

                tabBar中配置最少2个，最多5个；

                当渲染顶部rabBar时，不显示icon，只显示文本

④tabBar节点的配置项

Position（tabBar的位置，仅支持bottom/top）：String类型，非必选项，默认值为bottom；

borderStyle（tabBar上边框的颜色，仅支持black/white）：String类型，非必选项，默认值为black；

color（tab上文字未选中时的颜色）：HexColor类型，非必选项；

selectedColor（tab上文字选中时的颜色）：HexColor类型，非必选项；

backgroundColor（tabBar的背景色）：HexColor类型，非必选项；

list（tab页的列表）：Array类型，必选项（最少2个，最多5个tab）

⑤tabBar的6个组成部分

        backgroundColor：tabBar的背景颜色

        selectedIconPath：选中时的图片路径

        borderStyle：tabBar上边框的颜色

        iconPath：未选中时的图片路径

        selectedColor：tab上的文字被选中时的颜色

        color：tab上文字未选中（默认）的颜色

⑥每个tab的配置选项

        pagePath（页面路径，页面必须在pages中定义）：String类型，必选项；

        text（tab上显示的文字）：String类型，必选项；

        iconPath（未选中时的图标路径，当position为top时，不显示icon）：String类型，非必选项；

        selectedIconPath（选中时的图标路径，当position为top时，不显示icon）：String类型，非必选项；

4）style（是否启用新版的组件样式）