（0） Abstract
# Course link
Introduction to actual combat , Tell me about the company's wechat applet 【django+drf+ Applet practice 】_ Bili, Bili _bilibili
# Course content
（1） Introduction to applet _( A little )
（2） Build applet environment
（3） Global configuration
# If there is constancy, why sleep at night and rise at night The most unhelpful thing is to expose yourself to cold for ten days --- teacher
（1） Construction of applet environment
# （1） Build the back-end environment .
See the following figure directly , Required tools and class libraries . Back end environment _ It's very simple ~~~
# （2） Build the front-end applet environment .
1） Go to the link ： WeChat public platform , Sign up for an applet account . It is recommended to register the account number of the enterprise （ But there's a charge ）, Because the enterprise account can have more functions , For example, paid . As shown in the figure below , Select the applet registration entry in the red box to register .
2） After successful registration , We log in , Click development... In the option bar on the left . Find the applet ID , Save up , This is useful in the back .
3） Download developer tools . As shown in the figure below , Back to the home page , Then download the wechat developer tool from the development tool . Of course , I'll give you a through train here ： Stable version Stable Build | Wechat open documents
Then came to the following page , Operate according to the sequence number and description in the figure . When the download is complete , Just install it like a fool .
# （3） First knowledge of small program development tools
1） After opening the tool , We need to log in to the applet .
2） After successful login , We can see this . Click on the big one + Number , You can create a new applet .
3） Click. + After no. , You can see the following page , See the notes inside for specific details . Select here in the template , I recommend JavaScript The basic template is OK .
4） Once created , We can see the following interface .
5） Introduction to the code directory . In fact, they can be deleted , We created it ourselves .
6） Basic use _1
7） Basic use _2
8） Two important labels . Actually, wechat wxml Tags are based on the front end html The label is sealed , So it is html Not exactly . But we only need to remember two important labels , Namely <text> Text </text> and <view></view> . The former is equivalent to html Medium span label , That is, in-line ; The latter is equivalent to div label . You can also add corresponding styles to the corresponding labels just like the front end . Of course, pay attention to wxml and wxss The code of should be written separately in the corresponding file .
wxss Style code under
9） Preview of applet . The premise is that the code file directory , There must be app.js file .
（2） Global configuration
# （1） The learning of small programs depends on the official documents .
Official document link ： Wechat open documents , Mainly see the following global configuration . Be careful , If you want to configure these properties , The format must follow the following figure app.json The content of .（ You can lack , But just order it ）
1） In this section, we only focus on pages and window also tabBar Three attributes . See above , Let's click to go to the detailed global configuration , Go to the detailed configuration item , Then you will see the following interface .
These three attributes , pages Is a list of page paths , Don't go into ;window and tabBar Attribute controls the place shown in the following figure .
# （2）window Use of attributes .
1） First of all window attribute , We click on the detailed configuration item window. You can see the following page , This is only a partial screenshot .
2） Code combat , See the notes below .
# （3）tarBar Use of attributes .
1） Document access . Let's go in tarBar During the detailed configuration of , There are many things that can be configured , Let's not watch , I went straight to the end and found the content shown in the figure below , Pay attention to the... In the red box . in other words tabBar The attribute pair is configured with a list , namely "tabBar" :{"list": [ ] } . It is difficult to understand the document if you read it alone , So let's just practice the red box code .
2）pagePath and text The code of the actual combat . As shown in the figure below , From this example, we can know ,"pagePath" Is the path to our page ,text Is the text of the following option box . Pay attention here , If there are multiple options , Be sure to create a separate page for each option . such as , The second option “ my ”, We created a separate page for it , The path is a pages/mydemo/mydemo .
With the above foundation , Let's see tabBar Other functional properties of . For example, we can set the icon of the option box , You need to use the contents of the orange box in the following figure .iconPath It is the icon when it is not selected ,selectedIconPath Yes when selected , The icon displayed . Let's take an example
3）iconPath and selectedIconPath Code （ This is a list Medium ）, as well as selectedColor and borderStyle Attribute code practice . See figure below .（ Let's talk about it here ,list There are at most 5 individual Property value ;borderStyle Is to control the tabBar The style of option box and page content boundary , Not between boxes . For example, it is white white Words , There is no boundary ）
