微信小程序开发（二）——元素选择器、tabbar底部导航栏

关于WXML和WXSS的使用

WXML就相当于HTML，WXSS就相当于CSS。在WXML中，view相当于HTML中的div标签。

属性：加在开始标签里

view是一个块级标签，独占一行

text标签相当于HTML中的span标签，行内元素

标签的分类:单标签,双标签

单标签:image

双标签:view,text

其中image组件默认宽度300px、高度225px。

元素选择器:

标签选择器：我们可以直接使用view或者text等标签去直接设置格式
类选择器：给元素定义一个class命名，通过.class名的方法去设置这个元素
id选择器：给元素定义一个id名，通过#id名的方法去设置这个元素
nth-child(n) ：是父元素的子孙元素选择
子孙选择器> ：子元素选择器；选中指定父元素的指定子元素父元素>子元素{}
后代选择器：后代元素选择器：选中指定元素的指定后代元素语法：祖先元素后代元素{}

例子：

标签选择器：

view{
  width: 100px;
  height: 100px;
}

所有的view块元素的大小都为100px*100px

类选择器：

在wxml中

<view class='header'>

在wxss中

.header{
  display: flex;  /*diaplay:flex 弹性*/
  justify-content: center;
  background-color: #D43C33;
  height: 30px
}

id选择器：

在wxml中

<view id='header'>

在wxss中

.header{
  display: flex;  /*diaplay:flex 弹性*/
  justify-content: center;
  background-color: #D43C33;
  height: 30px
}

nth-child(n) ：

o类中第二个view中背景颜色设置为blanchedalmond，color设置为red

o类中偶数位的view背景颜色设置为palegreen

.o view:nth-child(2){
  background-color: blanchedalmond;
  color: red;
}
.o view:nth-child(2n){
  background-color: palegreen;
}

子孙选择器> ：

选择o类的子类view

.o>view{
  background-color: blanchedalmond;
  color: red;
}

后代选择器:

设置所有o类的后代view

.o view{
  background-color: blanchedalmond;
  color: red;
}

tabbar底部导航栏

底部导航栏能够实现不同页面的切换，一般是写在app.json中的。

tabBar

如果小程序是一个多 tab应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

官方文档

在app.json中一开始只有pages页面和window格式

"pages": [
    
    "pages/index/index",
    "pages/logs/logs",
    "pages/demo/demo"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#966BFF",
    "navigationBarTitleText": "微信接口",
    "navigationBarTextStyle": "black",
    "backgroundColor":"#FFF86B"
  },

我们可以在后面写上tabbar标签，格式是根pages和window一样都是字典格式。

注意：tabbar需要图标的支持，在tabbar的list数组中，一个导航图标需要两张不同颜色的图标来完成。

阿里图标矢量库

属性	类型	必填	默认值	描述
color	HexColor	是		tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	HexColor	是		tab 的背景色，仅支持十六进制颜色
borderStyle	string	否	black	tabbar 上边框的颜色，仅支持 `black` / `white`
list	Array	是		tab 的列表，详见 `list` 属性说明，最少 2 个、最多 5 个 tab
position	string	否	bottom	tabBar 的位置，仅支持 `bottom` / `top`
custom	boolean	否	false	自定义 tabBar

例子：

像这样拥有首页，购物车，人物的底部导航栏需要六张图片的支持，我们可以在项目目录中新建一个resource资源文件夹，将下载下来的六张图标放入。

接下来tabbar的代码如下：

"tabBar": {
    "color": "#A3A3A3",
    "selectedColor": "#F89E58",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "resource/home1.png",
      "selectedIconPath": "resource/home2.png"
    },{
      "pagePath": "pages/index/index",
      "text": "购物车",
      "iconPath": "resource/shopcar1.png",
      "selectedIconPath": "resource/shopcar2.png"
    },
    {
      "pagePath": "pages/demo/demo",
      "text": "人物",
      "iconPath": "resource/my1.png",
      "selectedIconPath": "resource/my2.png"
    }]
  },

最后就能得到效果了

work1：

去模仿建立一个Google的图标，只需要使用wxml和wxss就能够完成

wxml代码如下：

<view class='m'>
  <text style='color:blue'>G</text>
  <text style='color:red'>o</text>
  <text style='color:yellow'>o</text>
  <text style='color:blue'>g</text>
  <text style='color:green'>l</text>
  <text style='color:red;'>e</text>
</view>

wxss代码如下：

.m{
  text-align: center;
  font-size: 80px;
  font-weight: bold;
}

运行效果：

一起学习，一起进步 -.- ，如有错误，可以发评论