Wechat applet notes

The various file functions that make up the page ：

WXSS File is a style file , This document is mainly to write some css style , These styles will only be used for WXML Files work ; JS File is the main business logic class , Including the implementation of all business logic of this page ;JSON The file is the configuration of this page , If the page is allowed to be pulled up and loaded ; WXML The file is similar to HTML The role of , Of course, it also has some special labels of its own .

WXML: Build page ;

.js: Logic code ;

.wxss： style ;

. json： The configuration file

 

 

white-space:pre-wrap  Keep spaces and carriage returns for text 

 

 

Attribute summary ：

 

 

 

 

 class Multiple can be defined wxss Selector in , But the latter has a higher priority than the former .

 

page{
  background-color: #d2ebb6;
}

/*1、element Selectors , Written in wxss perhaps app.wxss in */

2、 Class selectors class, No examples 

3、 Combination selector 
image,view {

border:1px;

}
/* all image and view Labels have borders */

4、ID Selectors 

#id

5、 Descendant selector 
.card image{

}

ctrl+/  Can comment

One 、 Iconic language ：

1、wxml Linguistic equivalent html Language , But wechat changed some of its contents  

2、wxss Linguistic equivalent css Language

 wxml It is equivalent to the structure and of a program wxss It is equivalent to the decoration of the program , Only when used together can it work .

wxml Language is difficult for me 1、flex The box model ;2、swiper Shuffling figure ;3input Components .

---

flex The box model  

display:flex;  // Define the box model

All defined flex The of the model is a container , Also called flex Containers .

1、flex-direction  Property determines the direction of the spindle （ That is, the arrangement direction of the project ）.

(row | row-reverse | column | column-reverse;)

row（ The default value is ）： The principal axis is horizontal , The starting point is on the left .

row-reverse： The principal axis is horizontal , The starting point is on the right .

column： The principal axis is perpendicular , The starting point is at the top .

column-reverse： The principal axis is perpendicular , Starting edge .

2、flex-wrap  Attribute definitions , If an axis doesn't line up , How to wrap .

no wrap: Don't wrap , squeeze .

warp: Line break , The first row is at the top .

warp reverse: Line break , The first row is at the bottom .

3、flex-flow The attribute is flex-direction Properties and flex-wrap Attribute shorthand , The default value is row nowrap.

4、justify-content Property defines the alignment of the item on the spindle .

flex-start: Align left

flex-end: Right alignment

center: In the middle

space-between: full-justified , The interval between items is equal .

space-around: The spacing between each item is equal . therefore , The spacing between items is twice as large as the spacing between items and the border .

5、align-items Property defines how items are aligned on the cross axis .（ The alignment of the vertical arrangement of sub containers ）

flex-start: Align the vertices of the container

flex-end： Align the bottom of the container

center: In the middle

stretch:   If the height is not set or is auto, Will fill the entire container .

baseline:  Baseline alignment of the first line of text for the project .

6、align-content Property defines the alignment of multiple axes . If the project has only one axis , This property does not work .（ The sub containers are arranged horizontally in multiple rows ）

flex-start： Align with the starting point of the intersecting axis .（ Start from the top of the container and arrange it in sequence ）

flex-end： Align with the end of the cross axis .（ The of the child container fills the bottom of the parent container , Leave the upper space of the parent container ）

center： Align with the midpoint of the intersecting axis .（ In the middle ）

space-between： Align with both ends of the cross axis , The average distribution of spacing between axes .（ full-justified , Average distribution in the middle ）

space-around： The spacing between each axis is equal . therefore , The spacing between the axes is twice as large as the spacing between the axes and the borders .

stretch（ The default value is ）： The axis occupies the entire cross axis .（ The tensile ）

Reference resources ：CSS Color name | Novice tutorial CSS Color name All browsers support color names 147 The color name is defined in HTML and CSS Color specifications (17 A standard color plus 130 Many others ). The following table lists all these , Together with its hexadecimal value . Tips : 17 Standard colors ： Light green , black , Blue , Purplish red , gray , gray , green , lime , Chestnut , The navy , olive , purple , red , silver , Turquoise , White and yellow . Click the name or hexadecimal value of the color , With different color names or values, the background color will change : Sort by color name The list is sorted by hexadecimal values Color Name ..https://www.runoob.com/cssref/css-colornames.htmlCSS（ Cascading style sheets ） | MDN Cascading style sheets (Cascading Style Sheets, Abbreviation for CSS）, It's a kind of Style sheets Language , Used to describe the HTML or XML（ Include SVG、MathML、XHTML And so on. XML Branch language ） Presentation of documents .CSS Described on the screen 、 Paper quality 、 How should elements on other media such as audio be rendered . Cascading style sheets (Cascading Style Sheets, Abbreviation for CSS）, It's a kind of Style sheets Language , Used to describe the HTML or XML（ Include SVG、MathML、XHTML And so on. XML Branch language ） Presentation of documents .CSS Described on the screen 、 Paper quality 、 How should elements on other media such as audio be rendered .https://developer.mozilla.org/zh-CN/docs/Web/CSS

Wechat open documents Wechat Developer Platform documentation https://developers.weixin.qq.com/miniprogram/dev/framework/