“Introduction and Practice of WeChat Mini Program Development”

Original link: https://blog.frytea.com/archives/679/

75

Introduction and Practice of WeChat Mini Program Development Lei Lei
53 notes

◆ Preface

There is no DOM in the applet, please give up the thinking of “obtain the DOM first, and then operate the DOM”

An alternative to DOM manipulation is “data binding”. Controlling the display and hiding of components, switching CSS styles, and controlling scroll bars is easy to use DOM thinking. Common functions are all realized through “data binding” in applets

The applet runs in a JSCore, which itself does not support window and DOM objects in the Web

A book can never replace official API documentation.

◆ Chapter 1 Introduction to WeChat Mini Programs

In addition to games and live broadcasts, WeChat officials have not clearly restricted what types of mini programs you can’t do.

MINA is the internal development code of the official applet, and it is also an alias for the running framework of the applet

◆ Chapter 3 starts the mini program journey from the first simple “Welcome” page

There are 3 files under the root directory: app.js, app.json and app.wxss. A small program project must have these 3 files describing the App, and they must be placed in the root directory of the application

There are 2 pages under the pages folder, namely the index page and the logs page

Each page can be composed of 4 files, namely: .js, .wxml, .wxss and .json files

The difference is that the label elements in the wxml file cannot use HTML tags, only some components encapsulated by the applet itself can be used

In fact, the style writing language of the applet is CSS, just replace the .css file with a .wxss file

Compared with the 3 application-level files, the 4 page-level files of the applet have one more wxml page tag file

To display the welcome page, the MINA framework of the applet must know the “existence” of this page and the specific location (file path) of this page

The MINA framework will automatically find the page path and integrate the 4 files of the page.json, .js, .wxml and .wxss

Even if there is no JavaScript code in our welcome page, we still need to actively call the Page() method in welcome.js

The welcome.json file cannot be empty, even if you don’t want to configure any properties in the .json file, you need to add an empty {}

The official layout method recommended by the Mini Program: Flex Layout

The size of the applet cannot exceed 1MB, otherwise the project cannot be run and published on the real machine

[illustration]

Local resources are unavailable in wxss

In the early days, mainstream browsers did not fully support Flex layout, which resulted in many developers not knowing the existence of this layout or using it very rarely. We are still accustomed to using traditional position and float attributes for layout.

Flex, also known as “elastic layout”, mainly acts on the container

Use display: flex to turn this view into a flexible box

Use the flex-direction attribute to specify the arrangement direction of elements in the view

First of all, we must understand a very important concept of Flex layout: axis.

The attribute align-items: center in the .container style can center the three elements horizontally

In the applet, the length unit can be rpx or px

rpx can make components adapt to the height and width of the screen

It is recommended to use the iPhone 6 width of 750 physical pixels as a standard for design drawings

Maintaining the distribution between page elements can maintain a “certain proportional relationship”, in which case rpx should be used.

If the border changes dynamically, it will become thicker on phones with larger screen sizes, which is not what we want

Under the simulator selection item of the applet, the resolution of each model is given. It should be emphasized that the resolution here refers to the logical resolution pt, not the physical resolution

Outside the container view, the applet also has a default container element: page.

The window configuration item is used to set the status bar, navigation bar, title and window background color of the applet

The vast majority of books are used to get started and share ideas, it should not replace the official API documentation

◆ Chapter 4 Article List Page

Data binding is the most important concept in applets, and it is the biggest difference compared with traditional web page programming

The image component of the applet provides 4 scaling modes and 9 cropping modes

It is mandatory in the applet to only allow up to five layers of parent-child pages

It is recommended that the page should not exceed 3 layers at most.

redirectTo does not have this problem, because after jumping to another page, the previous page is forcibly uninstalled.

◆ Chapter 5 Modules, Templates and Cache

You also need to use module.exports to expose an interface to the outside.

The applet also provides a technology called template to support the encapsulation of wxml components, but this encapsulation is only a code fragment of wxml

It is necessary to eliminate the template’s dependence on external variable names. You can use the expansion operator “…” to expand the incoming object variables to eliminate this problem

Import needs to introduce the template first, and then use the template; but include does not need to be introduced in advance, just import the template directly where it is needed.

The include mode is very simple, it is a simple code replacement, there is no scope, and it cannot use data to pass variables like import

If the template is only static wxml and does not involve data transfer, you can use include. But if the template involves data binding, it is recommended to use import

The syntax for referencing style files is @import “src”.

In the JS file of the page, we use Page(object) to register the page, and specify the life cycle function of the page in the object. Similarly, you can use App(object) in the app.js file to register the applet, and specify the life cycle function of the applet in the object, etc.

The best time to initialize the database is at application startup

The local cache of the applet has an upper limit, and the maximum is not allowed to exceed 10MB

When dealing with cache-related issues, developers must keep a clear head, otherwise sometimes a small cache is not updated, and developers will waste a lot of time

It is not that there is no object-oriented in JavaScript, but it uses the prototype chain to implement the inheritance mechanism of objects

◆ Chapter 6 article details page

It is not valid to register events on the template

This article is transferred from: https://blog.frytea.com/archives/679/
This site is only for collection, and the copyright belongs to the original author.