[wechat applet] do you know about applet development?

Hello everyone ！ Today, I will update the wechat applet column , Welcome to join us to learn ！

---

Before learning applet , Let's discuss a topic , Why use wechat applet ？

Wechat applet development can reduce users' development costs , Considering the compatibility of different platforms , Wechat applet can meet the need of no use , It reduces the development cost of the program and saves the time cycle , Let enterprises take advantage of wechat to promote and simplify the corresponding processes , As long as it can be completed by scanning the QR code .

---

Learning objectives of this section ：

Understand what an applet is
Understand the development of applets
Learn to create the first simple applet
Master the code structure of the applet
Understand the host environment

---

---

1. Introduction to applets

1.1 Official profile

1️⃣ Applet It's a new kind of openness , Developers can apace Develop a small program . Applets can It is conveniently Access and dissemination , At the same time, it has an excellent use experience .

1.2 Baidu Encyclopedia

2️⃣ Wechat applet is a kind of You can use it without downloading Application , It's also an innovation , After nearly six years of development , A new wechat applet development environment and developer ecology has been constructed <. Wechat applet 、 Wechat subscription number 、 Wechat service number 、 Wechat enterprise number is a parallel system .

1.3 The development of small programs

2016 year 9 month 21 Japan , Wechat applet officially opened internal test .

2017 year 1 month 9 Japan 0 spot , The first batch of wechat apps were officially launched .

2018 year 3 month , Wechat officially announced the launch of the wechat applet advertising component for internal testing .

2019 year 8 month 9 Japan , WeChat PC In the new version , Support to open wechat applet shared in chat .

️2021 In, the daily life of wechat applet exceeded 4.5 Billion , Compared with the average daily use 2020 An increase of 32%, Active applets have grown 41%.

1.4 What is the difference between small programs and ordinary web page development

1. The operating environment is different ： Web pages run in a browser environment , The applet runs in the wechat environment .
2. API Different ： Applet cannot call DOM and BOM Of API, Wechat environment provides its own API. Such as ： Sweep code .
3. The development model is different ： Web pages are developed using browsers and code editors , Small programs have their own set of development standards .

️ Wechat applet development process ：

• Apply for applet development account
• Install the applet developer tool
• Create and configure applet projects

2. The first little program

2.1 Register applet development account

Before developing wechat applet, we need to register the applet development account on wechat public platform .https://mp.weixin.qq.com/

️ Registration process ： Enter wechat public platform -> Select register applet -> Fill in the account information -> Activate mailbox -> Select the personal subject type -> Subject information registration -> Get the APPID( Use later ).

2.2 Install the applet developer tool

Wechat developer tool is a small program development tool officially recommended ：

• Quickly create applet projects
• Code viewing and editing
• Function debugging
• Preview and publish

️ download ： Also download applet development tools on wechat public platform , It is recommended to download the latest stable version ：

️ install ：

2.3 Create and configure applet projects

Finish the above preparations , We can log in to the developer tool to create and configure the project .

️ technological process ： Click on + Button No -> Fill in project information -> Project creation complete -> Check the effect on the simulator -> Preview the project effect in wechat environment .

️ Wechat developer tools display ：

3. Composition of applet code

3.1 Project structure

• pages The page used to store all applets
• utils Modules used to store the nature of tools （ for example ： Custom module for formatting time ）
• app.js The entry file of the applet project
• app.json Global applet configuration file
• app.wxss The global style file of the applet project
• *project.config.json` The configuration file for the project
• sitemap.json It is used to configure whether the applet and its page are allowed to be indexed by wechat

Applet official suggested that all applet pages , All stored in pages Directory , Exist as a separate folder , As shown in the figure ：

among , Each page consists of 4 It consists of three basic files , They are ：

• .js file （ Script file of the page , Store the data of the page 、 Event handling functions, etc ）
• .json file （ The configuration file of the current page , Configure the appearance of the window 、 Performance, etc. ）
• .wxml file （ The template structure file of the page ）
• .wxss file （ The style sheet file of the current page ）

3.2JSON The configuration file

JSON Is a data format , In actual development ,JSON Always with The configuration file In the form of . Applet projects are no exception ： Through different .json The configuration file , Applet projects can be configured at different levels . There are four kinds of applets json The configuration file ：

app.jison file

app.json Is the global configuration of the current applet , Including all the page paths of the applet 、 Window appearance 、 Interface performance 、 Bottom tab etc. .

effect ：

• pages： Used to record the path of all pages of the current applet
• window： Globally define the background color of all pages of the applet 、 Text color, etc
• style： Globally define the style version used by the applet component
• sitemapLocation： Used to indicate sitemap.json The location of

project.config.json file

project.config.json It's a project configuration file , Used to record our personalized configuration of applet development tools .

among ：

• setting The configuration related to compilation is saved in
• projectname The project name is saved in
• appid The account number of the applet is saved in the ID

sitemap.json file

Wechat has now opened the search in the applet , The effect is similar to PC Web page SEO.sitemap.json This file is used to configure whether the applet page allows wechat indexing . When developers allow wechat indexing , Wechat will take the form of a crawler , Index the page content of the applet . When the user's search keyword matches the page successfully , The page of the applet will probably be displayed in the search results .

Page .json The configuration file

Every page in the applet , Sure Use .json File to configure the window appearance of this page , The configuration items in the page will overwrite app.json Of window The same configuration item in .

New applet page Method ： stay app.json -> pages The storage path of the new page in , The applet developer tool can help us automatically create the corresponding page file .

Adjust project Homepage Method ： Just adjust app.json -> pages The sequence of page paths in the array , You can modify the front page of the project . The applet will put the first page , Render as the first page of the project .

3.3 WXML Templates

WXML（WeiXin Markup Language） Is a set of tag language designed for small program framework , The structure used to build applet pages , Its function is similar to that in web page development HTML.

that , What is the difference between the two ？

Different label names

• HTML （div, span, img, a）
• WXML（view, text, image, navigator）

Attribute nodes are different

Similar to Vue Template syntax in

• Data binding
• The list of rendering
• Conditions apply colours to a drawing

3.4 WXSS style

WXSS (WeiXin Style Sheets) It's a style language , Used to describe WXML Component style , Similar to... In web development CSS.

that , What's the difference between the two ？

Added rpx Unit of measure

• CSS Pixel unit conversion needs to be carried out manually in , for example rem
• WXSS Support new units of size at the bottom rpx, On screens of different sizes, the applet will automatically convert

Provides global and local styles

• In the project root directory app.wxss Will work on all applet pages
• Of partial pages .wxss The style is only valid for the current page

WXSS Only partial CSS Selectors

• .class and #id
• element
• Union selector 、 Descendant selector
• ::after and ::before Such as pseudo class selector

3.5 JS Logical interaction

In the applet , We go through .js File to handle user operations . for example ： Respond to user clicks 、 Get the user's location and so on .

In the applet JS Documents fall into three broad categories , Namely ：

• app.js
  It is the entry file of the whole applet project , By calling App() Function to start the entire applet
• Page .js file
  Is the entry file of the page , By calling 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 use by pages

4. The contents of the applet hosting environment

Host environment （host environment） It refers to the dependent environment necessary for the program to run . for example ：Android Systems and iOS The system is two different host environments . Android version of wechat App No iOS Operating in the environment .

Mobile wechat is the host environment of small programs , Applets take advantage of the capabilities provided by the host environment , It can realize many functions that ordinary web pages cannot complete . for example ： The applet calls the... Provided by wechat API Realize code scanning , Payment and other functions .

The content contained in the hosting environment of the applet ：

• Communication model
• Operating mechanism
• Components
• API

---

5. summary

In this section, we learned what a small program is , Why use applets , And the process of applet development , meanwhile , We have made a summary of the code structure of the applet . Next section , We will explain the hosting environment of the applet in detail ！

The learning reference of this column is the wechat applet learning video of dark horse programmer ！