Notes on understanding applets 2022/7/3

Understand the basic structure of the applet project

problem ：

1. What constitutes the page of a small program ？
2. project.config.json What is the function of documents ？
3. sitemap.json What is the function of documents ？

• pages： be-all ** Applet page ,** Each page is marked with Separate folders exist
  • index：index Page folder , The folder contains 4 individual Basic page file , this Four documents together index page
    • index.js：.js file – Script file of the page , Store the data of the page 、 Event handler 、 Life cycle, etc
    • index.json：.json file – The configuration file of the current page , The appearance of the page 、 Performance, etc.
    • index.wxml：.wxml file – The template structure file of the page
    • index.wxss：.wxss file – The style sheet file of the current page
  • logs
    • …
• utils： Tools folder
  • utils.js
• app.js： Applet project Logical file , be used for Register applet instance , Bind lifecycle callback function 、 Error listening and page does not exist listening function etc. .（https://www.cnblogs.com/e0yu/p/8488133.html）
• app.json： Applet public configuration file , Determine the path of the page file 、 Window representation 、 Set network timeout 、 More settings tab etc. .
• app.wxss： Applet public style sheet
• project.config.json： It's a project configuration file , Used to record our personalized configuration of applet development tools
  • setting It's preserved in Compile related configuration
  • projectname What is preserved in is Project name
  • appid What is preserved in is The account number of the applet ID
• sitemap.json： Configure whether the applet and its page can be indexed by wechat
  • rules The configuration of the index rule list is saved in
  • rules In the rules ,action Indicates whether the page can be indexed (allow,disallow),page Indicates the effective page

answer ：

1. What constitutes the page of a small program ？
   1. The page of the applet is created by 4 Files make up
   2. also this 4 File Should be put into pages Under folder In the same folder
2. project.config.json What is the function of documents ？
   1. Project profile , Used to record our personalized configuration of applet development tools
3. sitemap.json What is the function of documents ？
   1. Configure whether the applet and its page can be indexed by wechat

wxml VS html

problem ：

1. Can I wxml In file , write in div label ？ And say why ！

1. What is? WXML

   WXML（WeiXin Markup Language） Is the framework design of a set of tag language （ Components ）, The structure used to build applet pages , Its function is similar to that in web page development HTML

2. WXML and HTML The difference between

   • Different label names

     • HTML(div, span, img, a)
     • WXML(view, text, image, navigator)

   • Attribute nodes are different

     • <a href=“#”> Hyperlinks </a>
     • <navigator url=“/pages/home/home”> Jump to home page </navigator>

   • Provides template syntax for dynamically rendering data

     • Data binding

     • Conditions apply colours to a drawing

     • The list of rendering

answer ：

1. Can I wxml In file , write in div label ？ And say why ！
   1. Can write div label , however Don't Use .div The tag will be parsed as class view Label effect
   2. wxml You need to write Components provided by applet , If the written is Non applet components , It will be parsed as class view Label effect

wxss VS css

problem

1. wxss What size units have been added ？
2. wxss What selectors are recommended in ？

1. What is? WXSS
   • WXSS (WeiXin Style Sheets) It's a style language , Used to describe WXML` Component style
   • Similar to... In web development CSS
   • WXSS have CSS Most of the features
2. Added dimension units – rpx, One rpx Is the width of the page 1 / 750
3. Provides global and local styles .
   1. Global style ： Write to Root directory wxss Style in
   2. Local style ： Write to ** Page wxss ** Style in
4. Besides WXSS Only partial CSS Selectors
   1. .class（ Recommended ） and #id
   2. element
   3. Union selector and descendant selector
   4. ::after and ::before Such as pseudo class selector

answer ：

1. wxss What size units have been added ？
   1. rpx Unit of measure , One rpx Is the width of the page 1 / 750
2. wxss What selectors are recommended in ？
   1. .class Class selectors

.json The configuration file

problem ：

1. In the applet .json What are the two main types of documents ？
2. When the two configuration files have the same configuration , What will happen ？

Small program , There is an extra .json Configuration file for ,.json The document is mainly divided into two ：

1. In the root directory of the project .json file
   1. Modify the basic configuration of the project
      1. home page
      2. navigationBarBackgroundColor
2. On the page .json file
   1. Modify the basic configuration of the page （ High priority ）
      1. navigationBarBackgroundColor

answer ：

1. In the applet .json What are the two main types of documents ？
   1. In the root directory of the project .json file
   2. On the page .json file
2. When the two configuration files have the same configuration , What will happen ？
   1. With Page .json file Mainly

The concept of host and the hosting environment of applet

problem ：

1. What is? Host environment ？
2. Why can wechat applet project call Wechat payment function ？
3. How to divide the running environment of small programs ？

1. The host environment refers to The dependent environment necessary for program operation
   1. web The host environment of the front end is ： browser
   2. android The hosting environment of the software is ：android System
   3. IOS The hosting environment of the software is ：IOS System 1
2. What is the hosting environment of the applet ？
   1. The hosting environment of the applet is ： Mobile wechat
      1. therefore ： Applet can call Mobile wechat Medium
         1. Sweep code
         2. payment
         3. Sign in
         4. Share
         5. And so on.
3. Applet Running environment ：

   1. 

   2. Divide into Render layer and Logic layer

      1. among WXML Templates and WXSS Style works in Render layer
         1. Render layer Our interface uses WebView Rendering
         2. A small program exists Multiple interfaces , So render layers exist ** Multiple WebView** Threads
      2. JS Script works in Logic layer .
         1. Logic layer use JsCore Thread running JS Script

   3. this Communication between two threads Through Wechat client Make a transfer

      1. Logic layer send out Network request Also through Native（ Native system of mobile phone ） forward

answer ：

1. What is? Host environment ？
   1. The host environment refers to The dependent environment necessary for program operation
2. Why can wechat applet project call Wechat payment function ？
   1. because Wechat applet The hosting environment of is Mobile wechat , and Mobile wechat It provides corresponding functions
3. How to divide the running environment of small programs ？
   1. Divide into Render layer and Logic layer

Built in components of applet

1. view
2. scroll-view
3. swiper && swiper-item
4. text && rich-text
5. button
6. image

Summary of this chapter

• Applet account & WeChat developer tools The concept of
• Basic page structure of applet project
• wxml The concept of
• wxss The concept of
• .json Role of profile
• The concept of hosting environment
• Some applet built-in components