Home WeChat Applet WeChat Development Introduction to WeChat Development (2) WeChat Mini Program Development Tool Usage and Design Specifications

Introduction to WeChat Development (2) WeChat Mini Program Development Tool Usage and Design Specifications

May 23, 2017 pm 03:21 PM

In this article you can learn:

  1. ##How to use mini program development tools to write a Hello World

  2. WeChat mini program Design Specifications

  3. WeChat Mini Program Project Structure

》》》

WeChat Mini Program Development Tool Usage

    • Download and install the applet

      Download: WeChat web developer tool

      Download: Official DEMO source code

      This series of tutorials uses the mac version developer tools.

    • After the installation is complete, open the WeChat web developer tool

1. Scan the QR code to log in and bind your personal WeChat

2. After scanning the QR code to log in, create a new or import an existing project (use the official DEMO source code quickstart here)

3. Create a new project and import the quickstart project you just downloaded



Since only companies or individuals that have received invitations to internal testing have AppIDs, be sure to select "No AppID"

4. The new creation is successful, let’s see the true face of the development tools



Is it very similar to the chrome developer mode? . .

5. Introduction to development tools [Debugging]



The "Debugging" module mainly includes selecting the debugging model, selecting the network type, console output, network resources, and view positioning , breakpoints, etc.

6. Introduction to development tools [Edit]



The red box on the left is the project structure directory, and the right is the code editing area. After each change is saved, Click "Compile" to view the modified page effect.

7. Create a new folder or file



Place the mouse on the folder, a "+" icon will appear on the right, click to add a folder or file

》》》

Mini Program Design Specifications (Excerpted from WeChat Mini Program Design Guide)

  1. Friendly and polite

    In order to avoid users being When using mini program services on WeChat, your attention is distracted by the complex surrounding environment. When designing mini programs, you should pay attention to reducing the interference of irrelevant design elements on user goals, politely show users the services provided by the program, and guide users to operate in a friendly manner. .

  2. Key points

    Each page should have a clear focus, so that users can quickly understand the content of the page every time they enter a new page. After determining the focus, Under the premise, you should try to avoid other distracting items on the page that affect the user's decision-making and operations.

  3. Clear and clear

    Once a user enters our mini program page, we have the responsibility and obligation to clearly and clearly inform the user where they are and where they can go, ensuring Users can move freely through the page without getting lost, so as to provide users with a safe and pleasant experience.

》》》

WeChat Mini Program Project Structure

  1. File structure



  2. The framework program contains an app that describes the overall program and multiple pages that describe their respective pages. The main part of a framework program consists of three files, which must be placed in the root directory of the project.

##app.jsApplet ( Global) logicapp. Mini program (global) public settings, determine the path of the page file, window performance, and set network timeout Time, setting multiple tabs, etc.app.Mini program public (global) style sheet
File Function
json
wxss

  1. A frame page consists of four files:

File type FunctionjsPage logicwxmlPage structure, a set of tag languages ​​designed by the framework, combined with basic components and event systems, can build the structure of the page. wxss is a style language used to describe WXML component styles. Used to determine how WXML components should be displayed. jsonPage configuration
According to the principle of "convention over configuration", a frame page must have at least Contains three file types: js, wxml, and wxss. The file names must be the same, such as homepage index.js, index.wxml, and index.wxss, and they must be placed in the same folder. When registering a page, there is no need to write a file suffix in the file name, because the framework will automatically look for the four files in the path .json, .js, .wxml, and .wxss for integration.

》》》

Summary

The above introduces the preparation work for the development of WeChat mini programs from three aspects: development tools, design specifications, and project directories. It will be updated later; at the same time, through Import the official DEMO and display the Hello World applet page. Generally speaking, the mini program development tools are streamlined, the project structure is clear, the documentation is complete, and the entry barrier is not high; the WeChat team has packaged different operating systems and models, and developers only need to call the corresponding

API is enough. Of course, if you want to understand the entire framework, you need to deeply study the working principles of Redux, state mode, one-way and two-way data binding, JS calling Android/IOS native UI components, etc.

If you have any questions, you can also follow my WeChat public account "ITNotes" to communicate and learn together.


【Related recommendations】

1.

WeChat public account platform source code download

2.

WeChat voting source code

3.

WeChat LaLa Takeaway 2.2.4 Decrypted Open Source Version of WeChat Rubik’s Cube Source Code

The above is the detailed content of Introduction to WeChat Development (2) WeChat Mini Program Development Tool Usage and Design Specifications. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What are the Go language development tools? What are the Go language development tools? Dec 11, 2023 pm 03:56 PM

go language development tools: 1. GoLand; 2. Visual Studio Code; 3. Sublime Text; 4. Vim; 5. LiteIDE; 6. GoClipse; 7. Delve; 8. GoDoc; 9. GoCodify; 10. GoSublime; 11. Go Playground; 12. GoDocBrowser; 13. Go-Ethereum; 14. LiteIDE X.

Choose the Java development tool that's right for you: Reviews and recommendations Choose the Java development tool that's right for you: Reviews and recommendations Feb 18, 2024 pm 10:18 PM

Java development tool evaluation: Which one is the best choice for you? As one of the most popular programming languages ​​today, Java plays an important role in the field of software development. In the Java development process, it is crucial to choose a development tool that suits you. This article will evaluate several common Java development tools and give suggestions for applicable scenarios. EclipseEclipse is an open source, cross-platform Java integrated development environment (IDE) that is widely used for the development of Java projects. it mentions

Microsoft integrates ChatGPT related AI technology into more development tools Microsoft integrates ChatGPT related AI technology into more development tools Apr 12, 2023 pm 09:43 PM

According to news on March 7, on Monday, local time in the United States, Microsoft announced that it would integrate the AI ​​technology behind the popular chatbot ChatGPT into more development tools such as Power Platform, which allows users to create new applications with little or no coding. Building apps is Microsoft's latest move to integrate AI technology into its products. Microsoft said that new features have been added to a series of business intelligence and application development tools within the Power Platform, such as Power Virtual Agent and AI Builder. Among them, Power Virtual Agent is a tool for enterprises to build chatbots, which can now be connected to internal company resources.

What are the software development tools? What are the software development tools? Oct 20, 2023 am 11:20 AM

Software development tools include coding and programming tools, version control tools, integrated development environments, modeling and design tools, testing and debugging tools, project management tools, deployment and operation and maintenance tools, etc. Detailed introduction: 1. Coding and programming tools for writing, editing and debugging code. For example, Visual Studio, Eclipse, IntelliJ IDEA, PyCharm, etc.; 2. Version control tools, used to track and manage code versions. For example, Git, SVN, Mercurial, etc.; 3. Integrated development environment, etc.

[Compilation and sharing] 8 development tools to improve work efficiency and never be an overtime worker again! [Compilation and sharing] 8 development tools to improve work efficiency and never be an overtime worker again! Sep 15, 2022 am 11:10 AM

Are you still bald because of working overtime and staying up late? Are you still building wheels for strange needs? Then you’ve found the right person! ! This article has personally experienced the pain of programmers. I vomited blood behind the scenes and compiled an article. I hope it will be helpful to everyone. Go, go, go! !

Which Java development tool is easy to use? Which Java development tool is easy to use? Dec 22, 2023 pm 04:16 PM

Useful Java development tools include: 1. Eclipse IDE; 2. IntelliJ IDEA; 3. NetBeans; 4. Visual Studio Code; 5. JDeveloper; 6. BlueJ; 7. Spring Tool Suite (STS); 8. DrJava, etc. Detailed introduction: 1. Eclipse is an open source, powerful integrated development environment that supports multiple programming languages, including Java and so on.

PHP WeChat development: How to implement message encryption and decryption PHP WeChat development: How to implement message encryption and decryption May 13, 2023 am 11:40 AM

PHP is an open source scripting language that is widely used in web development and server-side programming, especially in WeChat development. Today, more and more companies and developers are starting to use PHP for WeChat development because it has become a truly easy-to-learn and easy-to-use development language. In WeChat development, message encryption and decryption are a very important issue because they involve data security. For messages without encryption and decryption methods, hackers can easily obtain the data, posing a threat to users.

What development tools are there? What development tools are there? Aug 02, 2023 pm 04:24 PM

Development tools include: 1. Integrated development environment IDE, common ones include Eclipse, Visual Studio and IntelliJ IDEA; 2. Version control system VCS, common ones include Git and Subversion; 3. Automated build tools, common ones include Maven and Gradle etc.; 4. Testing tools, common ones include JUnit and Selenium, etc.; 5. Code analysis tools, common ones include SonarQube and Checkstyle, etc.

See all articles