10 recommended articles about wxss

I use vscode directly as the editor (the same applies to other editors, and I still use WeChat development tools for preview). For syntax highlighting, set wxml to html and wxss to css "files.associations": { "*.wxss": "css", "*.wxml": "html" } You can also install mini program-related plug-ins to start writing code. First, you need to read the WeChat mini program documentation (framework, components and API) completely, so that you can find it when you use it later. The view component corresponds to ptext in html and spanwxss. The selector only supports element, #id, .className, ::after, ::before. Create new components in the public component project directory and end it in a directory similar to pages

1. Summarize an example of the WeChat development process

##Introduction: I use the editor directly vscode (the same applies to other editors, we still use WeChat development tools for preview), set wxml to html for syntax highlighting, and set wxss to css

2. WeChat development Detailed introduction to WXML, WXSS and JS

##Introduction: This article mainly introduces the WeChat applet WXML , WXSS and JS introduction and detailed information, friends who need it can refer to

3.

Introduction to WeChat Development (7) How to use weui.wxss

Introduction: What is WeUI? WeUI is tailored for mini programs by the official design team in compliance with WeChat visual design specifications Customized base style library. We put WeUI in the basics here because WeUI is an official product, and after the IDE update on October 28, the IDE cannot recognize and reference css, and it also blocks the acquisition of style files from the network, drawing a clear line with css.

4.

Flex layout mode is indispensable for small program development

Introduction: Compared with the traditional float layout, Flex layout is simple, fast and convenient. Mastering the flex layout can reduce the wxss code when making WeChat mini programs, and it also meets the document requirements for WeChat mini program development. This code involves four Flex layout methods, each using different attributes of different flex. It is recommended to read the learning reference at the end of this article to learn related attributes

5.

Introducing a WeChat mini program third-party development tool (WEPT)

Introduction: WeChat applet development tool third-party development tool WEPT, WEPT main functions: real-time updates, support wxml wxss javascript json more stable, Unlike official tools, there are no restrictions on frequent errors, no need to connect to the Internet, no need to configure CORS on the backend, and supports mobile browsing.

6.

Detailed explanation of wxml and wxss files in WeChat applet

Introduction: WXML WXML (WeiXin Markup Language) is a set of tag languages ​​for WeChat. Combined with basic components and event systems, it can build the structure of the page. (Little Anna: It seems very powerful. What are the basic components and event system? It feels even more powerful because they must be combined.) The basic components are similar to tags in HTML, and the event system is an event in JavaScript that can handle logical reactions. to the interface; wxml is just a file format. If there are no components and events, it is of no use. And if you put components and events...

7.

Teach you how to make one Open source small program calculator

Introduction: This is a small program novice practice project (based on the WeChat quick demo), making a calculator. It has a basic UI, basic jumps and simple js logic, making it very suitable for beginners to read. Reading other people's code is to consolidate your own programming skills. Knowledge related to WeChat applet development: 1. CSS Flexbox layout 2. Event binding, page jump 3. Page, window, App global settings 4. How to use wxml, wxsss, js, json files 5. view, text,. ..

##8. Basics of Mini Program Development: Index Page Analysis (5)

Introduction: The previous tutorial talked about some technical issues that have nothing to do with the development of WeChat applet itself. Now let’s return to the topic. This tutorial mainly explains the index page generated by default. As written in the previous tutorial, each page contains three files: .js (processing logic), .wxml (describing page content), and .wxss (configuring page style). The same is true for the index page. Before explaining, the index page in the picture above does not have much content. There is only a user avatar, user name, and "Hello World". First, let's take a look at the index....

9. Structure Overview of the Basics of WeChat Mini Program Development (2)

##Introduction: WeChat Mini Program Development Tutorial (Basics) 1 First Introduction to WeChat Mini Programs At the end of the previous tutorial, we generated a mini program similar to "Hello World" without writing a single line of code in the process. After creating a new project, the WeChat applet will generate a default program framework, and subsequent program development work will be carried out on this framework. This default framework contains the following parts: app.xx Each WeChat applet will contain three files: app.js, app.json, and app.wxss. The app.js file...

10.

Detailed explanation of the drawer menu example of WeChat applet development

Introduction: Drawer Menu is a common menu design method on apps. A typical drawer menu is as shown in the figure below. The following shows how to implement a drawer menu based on the WeChat applet. The final effect is as shown in the figure below: The page contains a home page and a drawer menu page. In order to achieve the sliding effect, The page uses absolute layout, the code is as follows index.wxml index.wxss The program binds the touch event and tap event of the homepage, and uses catchtouchmove to prevent the transfer of the move event, because in the real machine environment the page will automatically respond to the slide...

[Related Q&A Recommendations]:

node.js - When testing the WeChat applet on a real machine, the wx.request request did not return a result

The above is the detailed content of 10 recommended articles about wxss. For more information, please follow other related articles on the PHP Chinese website!