Basic understanding of mini programs

1. The difference between mini programs and web pages

1. Different operating environment

The applet runs in the WeChat environment and the
web page runs in the browser environment

2. Different API

The DOM and BOM APIs cannot be called in the applet,
but the applet can call various APIs provided by the WeChat environment,
such as geolocation
, code scanning
and payment.

3. The development mode is different. The
web page is a browser plus a code editor.
The applet is to apply for an account for applet development.
Install applet development tools.
Create and configure applet projects.

Two, AppID

After registering a small program development account, you need to use this AppID to create a new small program

Third, the directory structure of the applet

'/' means the root directory path

1.pages

Used to store pages

2.utils folder

Tool function folder,

3.app.js

Entry file of applet

4.app.json

The global configuration file of the applet project
includes the path of all pages of the applet, window appearance, interface performance, bottom tab, etc.

{
    
    
 "pages":[

],
//用来记录当前小程序所有的页面路径
"window":{
    
    

}
//全局定义小程序所有页面的背景色，文字颜色等，
},
"style":"v2"
//全局定义小程序组件所使用的样式版本，v2表示最新的，不要最新的删除这个style节点即可。

"sitemapLocation":"sitemap.json"
//指明sitemap.json的文件位置，这么写是平级

5.app.wxss

Global style file for applet project

6.project.config.json

It is also the configuration file of the project, which is the personalized configuration of the small program development tool.

{
    
    
 "description":"项目配置文件",
 //这个文件的描述
  "packOptions":{
    
    
        "ignore":[]
},
  "setting":{
    
    
    
} 
//这里是个性化配置,和小程序的本地配置互相影响。本地配置是可视化的setting节点。
  "projectname":"ss"
      //这个不是小程序名称,是当前项目的名称，小程序的名称在后台配置。
"appid":"sssss"
//要把appid改成自己的id才能使用这个配置文件作为自己的。
"checkSiteMap":"false"
//关闭索引提示
      

}

7.sitemap.json

It is used to configure whether the applet and its pages are allowed to be indexed by WeChat.
Similar to the SEO of PC web pages,
Baidu's search result ranking is caused by SEO optimization.
After indexing is allowed, WeChat will index the pages of the Mini Program by crawling. When the keywords searched by the user and the index of the page are matched successfully, the Mini Program pages will be displayed in the search results.

{
    
    
 "desc":""
 "rules":[
      {
    
    
    "action":"allow",
    //disallow是不被索引
    "page":"*"
    //表示所有页面都能被索引
}
]

}

The index prompt of setting is turned on by default. To turn it off, go to the setting field of project.config.json to configure
checkSiteMap: false

Fourth, the components of the Mini Program page

Each page of the applet is composed of a folder, which is stored in the pages folder for easy management. Each page folder has the same format and has 4 files. These 4 files make up a page.
For example, the login folder of the login page

1.login.js

The script file of the page, the stored data and functions, that is, the business logic

2.login.json

Configure the appearance and performance of the current page.
The configuration here will overwrite the same style in the window of the global app.json.
The configuration here will only be used by the current page.

3.login.wxml

Page template structure file

4.login.wxss

Style sheet file

Five, the role of json files

Json is a format, whether it is a web page or a small program, the json file appears as a configuration file. The applet configures the project through the json file.

6. New Mini Program Page

Just add the path of the page in the pages field of the app.json file, and the applet development tool will automatically create a corresponding folder for us, which contains 4 files

{
    
    
 "page":{
    
    
      "pages/list/list"
      //要写到list文件夹里的list这一层
}
}

Seven, modify the homepage of the Mini Program project

You only need to modify the order of the paths in the page field in app.json, whoever is the first one is the homepage.

Eight, wxml template

WeChat ML is a tag language of the applet framework, which is specially used to build the structure of the applet page, similar to
the difference between html and html

1. Different label names

Wxml general tag is
view corresponding to div
text corresponding to span
image corresponding to image
navigator corresponding to a tag

2. Different attribute nodes

<navigator url="指定跳转的页面"></navigator>

3. Provides type and template syntax in vue

Data binding
List rendering
Conditional rendering

Nine, WXSS

It is a style language, which is different from CSS

1. Add rpx unit

PC requires manual unit conversion. Use rem
wxss to add rpx, which will automatically convert on screens of different sizes.

2. Provide global style and local style

The app.wxss in the project root directory will act on all
pages. The .wxss in the partial page will only act on the current page.

3. Only some cs selectors are supported

.class and #id
element
union selectors and descendant selectors
::after and ::before pseudo-class selectors, etc. are supported

Ten.js file

1.app.js

It is the entry file of the entire small program project, and the entire directory is started through the APP() function.

2. The js file of the page

It is the library file of the page, and the corresponding page can be created and run through the Page() function.

3. Ordinary js file

It is used to encapsulate public functions for all pages to use.

module.exports = {
    
    
      方法名
}

To expose this module object

Reference use

require('文件路径即可')

Obtained is the module object
module object. The method name calls this method

11. Host environment

The host environment (host enviroment)
depends on the environment necessary for the program to run.
The host environment of the applet is WeChat, and many functions can be completed with the help of WeChat.
WeChat provides some functions to the applet

1. Communication model

The communication model is divided into two parts

1. Communication between the rendering layer and the logic layer

That is, the data communication between wxml and wxss and js script is forwarded by the WeChat client

2. Communication between the logic layer and the third-party server

It is also forwarded by the WeChat client. This ability obtains data from the server and returns it to the js script for processing.

Forwarded by WeChat client

2. Operating mechanism

The operating mechanism is divided into the startup process and the rendering process of the applet

1. The Mini Program Startup Process

①Download the code package to the local ②Analyze the app.json global configuration file ③Execute the
app.js program entry file, call APP() to create the applet instance ④Render the
applet homepage
⑤The applet start is completed

2. Page rendering process

①Load the .json configuration file of the analysis page ②Load
the .wxml template and .wxss style of the
page ③Execute the .js file of the page, call Page() to create a page instance
④The page rendering is complete

3. Components

Components are also provided by the host environment and can be divided into 9 categories

1. View container

①View
ordinary view container, equivalent to div
is a block-level element,
commonly used to achieve page layout effect

②scrol-view
scrollable view container
can be used to realize the menu bar
scroll-y means vertical scrolling
scroll-x means horizontal scrolling

③Container components of swip and swiper-item
carousel diagrams
common attributes

Attributes	Types of	Defaults	Description
indicator-dots	boolean	false	Whether to show the small dots on the handle
indicator-color	color	rgba (0,0,0, .3)	Point color
indicator-active-color	color	#000000	The color of the currently selected indicator point
autopaly	boolean	false	Whether to switch automatically
interval	number	5000	Automatic switching time interval
circular	boolean	false	Whether to use continuous sliding, that is, to the last one, it will automatically go to the first one

2. Basic content components

①Text tag is
equivalent to span, which
is an inline element.
Common attributes

Attributes	Types of	Defaults	Description
selectable	boolean	false	Long press to select the text content, only the text component supports long press to select, and it can only be previewed by the real machine

②rich-text tag
rich text component
supports rendering html strings into ui structure corresponding to wxml

Attributes	Types of	Defaults	Description
nodes	String	no	Convert the html text written here into the corresponding wxml component, you can convert some html tags returned by the server

3. Form components

1.button component
ratio of more html button function
may pass through the open-type variety of micro-channel attribute function call (call forwarding, obtaining user authorization, user information acquisition, etc.)

2. Image component The
default component has a width and height, 300px wide and 240px high.
mode value to specify the cropping and zooming of the image, it will enlarge the image component, use it carefully

mode value	Description
scaleTofill	The default value, zoom mode, does not maintain the aspect ratio to zoom the image, the width and height of the image are fully stretched to fill the image element
aspecFit	Zoom mode. Keep the aspect ratio and zoom the picture so that the long side of the picture can be fully displayed,
aspectFill	Zoom mode. Keep the aspect ratio and zoom the picture, and only ensure that the short side of the picture can be fully displayed, that is, the picture is only complete in the horizontal or vertical direction, and interception will occur in the other direction
widthFix	Zoom mode, the width remains the same, the height automatically changes, keeping the original image aspect ratio unchanged
heightFix	Zoom mode. The height does not change, the width changes automatically, keeping the original image aspect ratio unchanged

3. The
navigator component is
similar to the navigation component, similar to the a tag of html

4. Navigation component
5. Media component
6. Map component
7. Canvas canvas component
8. Development ability
9. Accessibility

4.API

Through the API, user information can be obtained and WeChat functions can be called

1. Event monitoring API

Start with on, listen to the trigger of certain events.
wx is the top-level object of the applet, which is equivalent to the window object
wx.onWindowResize(function(){}) of the web page on the PC side , which monitors the event of window size change

2. Synchronous API

1. Sync API API are synchronized ending
execution result 2. The synchronization API, may be obtained by the function returns a value, execution error will be thrown
example

wx.serStorageSync('key','value')//向本地存储中写入内容

3. Asynchronous API

Similar to the $.ajax(options) function in jq, the result of the call is received through success, fail, and complete.
Example
wx.request() initiates a network request and receives data through the success callback function.

12. Mini Program Release

1. Click the upload button
2. View the uploaded version in the background, the uploaded version belongs to the development version
3. Submit to Tencent for review to ensure quality and specifications
4. After passing, click the publish button in the version behind,
5. You can publish to on-line.
6. Promote Mini Programs, which are divided into ordinary QR codes and Mini Program QR codes.
7. In Settings-Basic Settings-Basic Information-Download the QR code of the Mini Program.