Use of WXML and WXSS

WXML is HTML, WXSS is CSS. In WXML, a view is the equivalent of a DIV tag in HTML.

Attribute: Added to the start tag

View is a block-level label that occupies a single line

The text tag is the equivalent of the SPAN tag in HTML, the inline element

Label classification: single label, double label

A single tag: image

Double label: the view, the text

The default width and height of the image component are 300px and 225px.

Element selector:

  1. Label selectors: We can format them directly using tags like View or text
  2. Class selector: Define a class name for an element. Set the element using the. Class name method
  3. Id selector: Define an ID name for an element. Set this element by using the #id name method
  4. Nth-child (n) : is the child element selection of the parent element
  5. Descendant selector > : child element selector; Select the specified child element of the specified parent element Parent element > child element {}
  6. Descendant element selector: selects the specified descendant element of the specified element syntax: ancestor element descendant element {}

Example:

Label selector:

view{
  width: 100px;
  height: 100px;
}
Copy the code

All view block elements are 100px by 100px

Class selector:

In WXML

<view class='header'>
Copy the code

In WXSS

.header{
  display: flex;  / * diaplay: flex elastic * /
  justify-content: center;
  background-color: #D43C33;
  height: 30px
}
Copy the code

Id selector:

In WXML

<view id='header'>
Copy the code

In WXSS

.header{
  display: flex;  / * diaplay: flex elastic * /
  justify-content: center;
  background-color: #D43C33;
  height: 30px
}
Copy the code

NTH – child (n) :

In the second view of class O, set the background color to Blanchedalmond and color to Red

The view background color of even digits in class O is set to Palegreen

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

Descendant selector > :

Select a subclass of class O, View

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

Descendant selector:

Set all descendant views of class O

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

 

Tabbar bottom navigation bar

The bottom navigation bar allows you to switch between different pages, usually written in app.json.

tabBar

If the applet is a multi-tab application (there is a TAB bar at the bottom or top of the client window to switch pages), you can use the tabBar configuration item to specify the appearance of the TAB bar and the corresponding page to be displayed when the TAB is switched.

The official documentation

In app.json, there are only pages pages and Window formats to start with

"pages": [ "pages/index/index", "pages/logs/logs", "pages/demo/demo" ], "window": { "backgroundTextStyle": "Light", "navigationBarBackgroundColor" : "# 966 BFF", "navigationBarTitleText" : "WeChat interface", "navigationBarTextStyle" : "black", "backgroundColor":"#FFF86B" },Copy the code

We can put a tabbar tag at the end, which is root pages, which is dictionary format like window.

Note: Tabbar requires icon support. In tabbar’s List array, a navigation icon requires two different colored ICONS.

Ali icon vector library

attribute type mandatory The default value describe
color HexColor is   Default text color on TAB. Only hexadecimal color is supported
selectedColor HexColor is   The color of the text on TAB. Only hexadecimal colors are supported
backgroundColor HexColor is   The background color of TAB. Only hexadecimal color is supported
borderStyle string no black The color of the border on the tabbar is supported onlyblack / white
list Array is   For a list of tabs, seelistProperty description: A minimum of two to a maximum of five tabs
position string no bottom The location of tabBar is supported onlybottom / top
custom boolean no false Custom tabBar

Example:

We can create a new resource folder in the project directory and put the six ICONS we downloaded into it.

The tabbar code is as follows:

"tabBar": { "color": "#A3A3A3", "selectedColor": "#F89E58", "backgroundColor": "#fff", "borderStyle": "black", "list": [{"pagePath": "pages/index/index", "text": "home ", "iconPath": "resource/home1.png", "selectedIconPath": PNG "},{"pagePath": "pages/index/index", "text": "shopping cart ", "iconPath": "resource/shopcar1.png", "selectedIconPath": "resource/shopcar2.png" }, { "pagePath": "pages/demo/demo", "text": "SelectedIconPath ": "resource/my1.png", "selectedIconPath": "resource/my2.png"}]},Copy the code

And then you get the effect

 

Work1:

To create a mock Google icon, just use WXML and WXSS

 

The WXML code is as follows:

<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>
Copy the code

The WXSS code is as follows:

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

Operation effect:

 

 

 

Learn together and make progress together. If there are any mistakes, please comment