【WeChat applet】WXML WXSS JS

Hits: 0

Table of contents

🍓 Composition of applet code – WXML template

1. What is WXML

2. Difference between WXML and HTML

🍇 Composition of applet code – WXSS style

1. What is WXSS

2. Difference between WXSS and CSS

🍒The composition of applet code – JS logic interaction

1. The .js file in the applet

2. Classification of .js files in Mini Programs

🍓 Composition of applet code – WXML template

1. What is WXML

WXML (WeiXin Markup Language) is a set of markup language designed by the applet framework . It is used to construct the structure of the applet page , and its function is similar to HTML in web page development.

2. Difference between WXML and HTML

①The label name is different HTML (div, span, img, a) WXML(view, text, image, navigator) ②The attribute nodes are different   Hyperlink ③ Provides a template syntax similar to that in Vue data binding List rendering conditional rendering

<view>aaa</view>
<view>aaa</view>
<div>aaa</div>
<div>aaa</div>

The div tag cannot wrap in the applet

🍇 Composition of applet code – WXSS style

1. What is WXSS

WXSS (WeiXin Style Sheets) is a style language used to describe component styles in WXML, similar to CSS in web development.

2. Difference between WXSS and CSS

①Added rpx size unit   Pixel unit conversion needs to be done manually in CSS, such as rem   WXSS supports a new size unit rpx at the bottom, and the applet will automatically convert it on screens of different sizes ②Provides global styles and local styles   app.wxss in the project root directory will work on all applet pages   The .wxss style of the partial page only takes effect on the current page ③ WXSS only supports some CSS selectors   .class and #id   element union selector, descendant selector   Pseudo-class selectors like ::after and ::before

HTML (into WXML): 

<!--pages/tsj/tsj.wxml-->

<button class="c-button c-button--gooey"> Hover me
  <div class="c-button__blobs">
  <div></div>
  <div></div>
  <div></div>
  </div>
</button>
<svg style="display: block; height: 0; width: 0;" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="goo">
      <feGaussianBlur result="blur" stdDeviation="10" in="SourceGraphic"></feGaussianBlur>
      <feColorMatrix result="goo" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" mode="matrix" in="blur"></feColorMatrix>
      <=in2feBlend "goo" in="SourceGraphic"></feBlend>
    </filter>
  </defs>
</svg>

CSS (into WXSS):

/* pages/tsj/tsj.wxss */
/* From www.lingdaima.com */
.c-button {

  color: #000;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  padding: 0.9em 1.6em;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  z-index: 1;
 }

 .c-button--gooey {
  color: #06c8d9;
  text-transform: uppercase;
  letter-spacing: 2px;
  border: 4px solid #06c8d9;
  border-radius: 0;
  position: relative;
  transition: all 700ms ease;
 }

 .c-button--gooey .c-button__blobs {
  height: 100%;
  filter: url(#goo);
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  bottom: -3px;
  right: -1px;
  z-index: -1;
 }

 .c-button--gooey .c-button__blobs div {
  background-color: #06c8d9;
  width: 34%;
  height: 100%;
  border-radius: 100%;
  position: absolute;
  transform: scale(1.4) translateY(125%) translateZ(0);
  transition: all 700ms ease;
 }

 .c-button--gooey .c-button__blobs div:nth-child(1) {
  left: -5%;
 }

 .c-button--gooey .c-button__blobs div:nth-child(2) {
  left: 30%;
  transition-delay: 60ms;
 }

 .c-button--gooey .c-button__blobs div:nth-child(3) {
  left: 66%;
  transition-delay: 25ms;
 }

 .c-button--gooey:hover {
  color: #fff;
 }

 .c-button--gooey:hover .c-button__blobs div {
  transform: scale(1.4) translateY(0) translateZ(0);
 }

🍒The composition of applet code – JS logic interaction

1. The .js file in the applet

It is not enough for a project to provide interface display. In the applet, we handle user operations through .js files. For example: responding to the user’s click, getting the user’s location, etc.

2. Classification of .js files in Mini Programs

The JS files in the applet are divided into three categories, namely: ① app.js It is the entry file of the entire applet project, and the entire applet is started by calling the App() function ②.js file of the page   It is the entry file of the page , by calling the Page() function to create and run the page ③Ordinary .js file It is a common function module file , used to encapsulate public functions or properties for page use

You may also like...

Leave a Reply

Your email address will not be published.