[graduation season · advanced technology Er] what is a wechat applet, which will help you open the door of the applet

Active address ： Graduation season · The technique of attack er

author ： Half body wind and snow
brief introduction ： This course , I will lead you to learn about wechat apps , Through the development of small programs , development environment , development tool , Project structure, etc , Make a detailed explanation .

the other day , I also wrote an article about graduation season , Long time , Remember 2019 The graduation season in , I am new to wechat apps , This article , I no longer remember , No longer motivates , I will graduate this season , A gift to all graduates and students .
This graduation season , I decided to put what I had learned about wechat apps 、 income 、 All the feelings are summed up , Give you a hand .

---

One 、 What are applets

Applet It's a new kind of openness , Developers can quickly develop a small program . Small programs can be easily obtained and spread in wechat , At the same time, it has an excellent use experience .

2016 year 9 month 21 Beta version of the applet released on the th .2017 year 1 month 9 Day of launch . Applet base library update log

Two 、 Applet development tools

No matter what language we use for development , All need development tools , You can click Download tool , Install development tools .

In use , We need to log in first , To enter the development interface .

We choose to create a new one called HelloWord Small program , Path or something , Just choose for yourself , ad locum , We found that AppID It's empty. , This is what we need , So we need to register one APPID, Just click register Button , Enter the registration page .

2-1. Access to the process

1. Applet registration — Register the app on wechat public platform , After the completion of registration, information can be improved and developed synchronously .
2. Small program information perfect — Fill in the basic information of the applet , Include the name 、 Head portrait 、 Introduction and service scope, etc .
3. Developing small programs — Complete applet developer binding 、 After developing information configuration , Developers can download developer tools 、 Refer to the development documentation for applet development and debugging .
4. Submit for review and release — After completing the development of the applet , Submit the code to wechat team for review , It can be released after approval （ It can't be released during the public beta ）.

2-2.AppID

AppID — Development --》 Development settings , find APPID

Add project members — management --》 Member management , Only administrators can add members here .

Now we add APPID, And create one called HelloWord Project , Then click OK .

2-3. Introduce development tools

As shown in the figure above , We created a small program project directly , Introduction to the interface , We can development tool Go to the official website to learn , No more details here .

3、 ... and 、 Applet structure

Applet development tools currently provide 5 Editing of kinds of files ：wxml、wxss、js、json、wxs And a preview of the image file .

3-1. New page code

File operations , There are two ways ：

1. Right click on the directory tree , Choose new Page, Will automatically generate what the page needs wxml、wxss、js、json.
2. stay app.json Of pages Field , Add the path to the new page , The files required for this page will be automatically generated .

3-2. To configure

JSON The documents are all wrapped in braces {}, adopt key-value How to express data .JSON Of Key Must be wrapped in a double quotation mark .

Be careful ：json In file , You can't write notes .

• project.config.json — Project profile .
  • Usually when you use a tool , They will make some personalized configurations according to their preferences , For example, interface color 、 Compile configuration, etc , When you change to another computer and re install the tools , You have to reconfigure .
  • With that in mind , The applet developer tool generates a project.config.json, Any configuration you make on the tool will be written to this file , When you re install tools or change your computer to work , You just load the code package of the same project , The developer tool will automatically help you recover to the personalized configuration when you developed the project , It will include the editor's color 、 A series of options such as automatic compression when uploading code .
• sitemap To configure — Search in applet , When developers allow wechat indexing , Wechat will take the form of a crawler , Index the page content of the applet .
• app.json — Global configuration .
• Configuration page — Configuration of each applet page , You can only configure window attribute .

3-3.WXML

WXML（WeiXin Markup Language） Is the framework design of a set of tag language . Similar to Android layout file .

3-4.WXSS

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

3-5.JS

It is equivalent to an zhuozhong java, Execute lifecycle functions and processing logic .

3-6.wxs

WXS（WeiXin Script） Is a scripting language for small programs , combination WXML, You can build the structure of the page .

Four 、 Minimalist applet

In the process of our development , Many times we need a blank project , To build your own framework , Directly enter the project file , Delete the blue part of the file in the picture below .

Delete the finished item style

Now let's build a new app.json file

{
    
  "pages": [
    "home"
  ]
}

Create a new one home.wxml file

<!--home.wxml-->
<view>Hello World</view>

Create a new one home.js file

Page({
    

})

Click on the compilation , The operation results are as follows ：

summary

Actually, in my opinion , Wechat applet should be regarded as a very simple development language , If you like , Please support , I am going to write a series of articles , Thank you for your support

Active address ： Graduation season · The technique of attack er