Quick start of wechat applet -- project introduction

The basic composition of the applet project

① pages The page used to store all applets
② utils For storage Module of tool nature （ for example ： Custom module for formatting time ）
③ app.js The entry file of the applet project
④ app.json Applet project Global profile
⑤ app.wxss Applet project Global style file
⑥ project.config.json The configuration file for the project
⑦ sitemap.json Used to configure the applet and its pages Whether it is allowed to be indexed by wechat

json The role of

JSON Is a data format , In actual development ,JSON Always in the form of a configuration file . Applet projects are no exception ： Through different .json The configuration file , Applet projects can be configured at different levels .
There are... In the applet project 4 Kind of json The configuration file , Namely ：
① In the project root directory app.json The configuration file
② In the project root directory project.config.json The configuration file
③ In the project root directory sitemap.json The configuration file
④ In each page folder .json The configuration file

app.json The configuration 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. .
Demo In the project app.json The configuration is as follows ：

Let's take a brief look at this 4 Functions of configuration items ：
① 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 , for example ：
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 .
Be careful ：sitemap The index prompt for is on by default , If you need to close sitemap Index tips for , Can be found in the applet project configuration file
project.config.json Of setting Configuration fields in checkSiteMap by false

Page json file

Every page in the applet , have access to .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 page

Only need app.json -》pages Add the storage path of the page in .

Modify the project home page

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 .

What is? wxml?

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.
WXML and HTML The difference between
① Different label names
HTML （div, span, img, a）
WXML（view, text, image, navigator）
② Attribute nodes are different
Hyperlinks

③ Similar to Vue Template syntax in
Data binding
The list of rendering
Conditions apply colours to a drawing

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 and CSS The difference between
① 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

Applet js file

It is not enough for a project to only provide interface display , 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 .

.js classification
① app.js
It is the entry file of the whole applet project , By calling App() function To start the whole 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

Applet hosting environment

Host environment （host environment） It refers to what is necessary for the program to run Depend on the environment . for example ：Android Systems and iOS The system is two different host environments . Android version of wechat App No iOS Operating in the environment , therefore ,Android It is the host environment of Android Software , Software that leaves the host environment is meaningless . Mobile wechat is the host environment of small programs .
Applets take advantage of the capabilities provided by the host environment , It can complete many functions that ordinary web pages can't , for example ：
Wechat code scanning 、 Wechat payment 、 Wechat login 、 Geographical location 、etc……
What the applet hosting environment contains
① Communication model
② Operating mechanism
③ Components
④ API

Communication model

The main body of communication in applet is rendering layer and logic layer , among ：
① WXML Templates and WXSS Styles work in the render layer
② JS Scripts work at the logical level
The communication model in the applet is divided into two parts ：
① Render layer and logic layer Communication between
Forwarded by wechat client
② Logical layer and third-party server Communication between
Forwarded by wechat client

Operating mechanism

The process of starting an applet
① Download the code package of the applet to the local
② analysis app.json Global profile
③ perform app.js Applet entry file , call App() Create an instance of the applet
④ Rendering applet home page
⑤ Applet startup completed

The process of page rendering

① Load the of the parsing page .json The configuration file
② To load a page .wxml Templates and .wxss style
③ Execute the .js file , call Page() Create page instances
④ Page rendering complete

Component classification of applets

Components in the hosting environment are also provided by , Developers can quickly build a beautiful page structure based on components . The official group of small programs
Parts are divided into 9 Categories: , Namely ：
① View container
② Basic content
③ Form components
④ Navigation components
⑤ Media components
⑥ map Map components
⑦ canvas Canvas components
⑧ Opening ability
⑨ Accessibility

Common view container class components

① view
Normal view area
Be similar to HTML Medium div, Is a block level element
Commonly used to achieve the layout effect of the page

② scroll-view
Scrollable view area
It is often used to achieve the effect of scrolling lists
③ swiper and swiper-item
Carousel map container assembly and Shuffling figure item Components

| attribute | type | The default value is | explain |
indicator-dots boolean false Display panel indicator
indicator-color color rgba(0, 0, 0, .3) Indicate the color
indicator-active-color color #000000 The currently selected indicator color
autoplay boolean false Auto switch or not
interval number 5000 Auto switch interval
circular boolean false Whether to adopt the joint sliding

① text
Text component
Be similar to HTML Medium span label , It's an in-line element
② rich-text
Rich text component
Support HTML The string is rendered as WXML structure

① button
Button components
Functional ratio HTML Medium button Rich buttons
adopt open-type Attribute can call various functions provided by wechat （ Customer service 、 forward 、 Get user authorization 、 Access to user information, etc ）
② image
Picture components
image The default width of the component is about 300px、 The height is about 240px
③ navigator（ Later courses will be devoted to ）

Page navigation component
Be similar to HTML Medium a link

Applet API

Small program official API It is divided into the following 3 Categories: ：
① Event monitoring API
characteristic ： With on start , Used to monitor the trigger of some events
give an example ：wx.onWindowResize(function callback) Listen for window size changes
② Sync API
characteristic 1： With Sync At the end of the API It's all synchronous API
characteristic 2： Sync API The results of the implementation of , You can get directly through the return value of the function , If the execution fails, an exception will be thrown
give an example ：wx.setStorageSync(‘key’, ‘value’) Write content to local storage
③ asynchronous API
characteristic ： Be similar to jQuery Medium $.ajax(options) function , Need to pass through success、fail、complete Receive the result of the call
give an example ：wx.request() Initiate a network data request , adopt success The callback function receives data