Learning WeChat Mini Program day01-Basic understanding of WeChat Mini Program

---

1. Introduction to WeChat Mini Programs

---

        Mini program is a new open capability that allows developers to quickly develop a mini program. Mini programs can be easily accessed and disseminated within WeChat, while providing an excellent user experience. WeChat Mini Program, a type of mini program, the English name is Wechat Mini Program, is an application that does not require downloading and installation. It realizes the dream of having applications "at your fingertips". Users can just scan or search. Open the app.

2. Create the first mini program project

---

2.1 Open the WeChat developer tools - select the mini program




2.2 Select the template
        At the beginning, just try it with js.

2.3 Initial template of the mini program

3. Basic structure of directory

---

3.1 File function

file name	meaning
pages	Page used to store all mini programs (mainly)
utils	Modules used to store tool properties (for example: custom modules for formatting time)
app.js	Entry file of the mini program project (main)
app.json	Global configuration file of the mini program project (main)
app.wxss	Global style files for mini program projects
project.config.json	Project configuration file
sitemap.json	Used to configure whether the mini program and its pages are allowed to be indexed by WeChat

3.2 Get to know Page

file name	meaning
.js	The script file of the page stores the data of the page, event processing functions, etc.
.json	File (configuration file for the current page, configuration window appearance, performance, etc.)
.wxml	File (template structure file of the page)
.wxss	file (the stylesheet CSS file for the current page)

The red boxes are the two pages respectively.

4. Understand the JSON configuration file in the mini program

---

4.1 Introduction to JSON configuration

There are 4 types of JSON configuration files in the mini program project, namely:

1. app.jsonConfiguration file in the project root directory
2. project.config.json Configuration file in the project root directory
3. sitemap.jsonConfiguration file in the project root directory
4. .jsonConfiguration file in each page folder

4.2 app.json

        app.json is the global configuration of the current mini program, including all page paths, window appearance, interface performance, and bottom of the mini program tab etc.
        The app.json configuration content in the Demo project is as follows:

{
    
    
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    
    
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

Briefly understand the functions of these four configuration items

1. pages: used to record the paths of all pages of the current applet
2. window: Globally define the background color, text color, etc. of all pages of the mini program
3. style: Globally define the style version used by the applet component
4. sitemapLocation: used to specify the location of sitemap.json

4.3 project.config.json

---

project.config.json is the project configuration file, which is used to record the personalized configuration we have made for the mini program development tools, for example:

• settingsaved in编译相关的配置
• projectnamesaved in项目名称
• appidWhat is saved in is the applet账号ID

{
    
    
    "description": "项目配置文件",
    "packOptions": {
    
    
        "ignore": [],
        "include": []
    },
    "setting": {
    
    
        "bundle": false,
        "userConfirmedBundleSwitch": false,
        "urlCheck": true,
        "scopeDataCheck": false,
        "coverView": true,
        "es6": true,
        "postcss": true,
        "compileHotReLoad": false,
        "lazyloadPlaceholderEnable": false,
        "preloadBackgroundData": false,
        "minified": true,
        "autoAudits": false,
        "newFeature": false,
        "uglifyFileName": false,
        "uploadWithSourceMap": true,
        "useIsolateContext": true,
        "nodeModules": false,
        "enhance": true,
        "useMultiFrameRuntime": true,
        "useApiHook": true,
        "useApiHostProcess": true,
        "showShadowRootInWxmlPanel": true,
        "packNpmManually": false,
        "enableEngineNative": false,
        "packNpmRelationList": [],
        "minifyWXSS": true,
        "showES6CompileOption": false,
        "minifyWXML": true,
        "babelSetting": {
    
    
            "ignore": [],
            "disablePlugins": [],
            "outputPath": ""
        }
    },
    "compileType": "miniprogram",
    "libVersion": "2.19.4",
    "appid": "wxbafd23482e0b976c",
    "projectname": "miniprogram-92",
    "condition": {
    
    },
    "editorSetting": {
    
    
        "tabIndent": "auto",
        "tabSize": 4
    }
}

4.4 sitemap.json

---

        WeChat is now open小程序内搜索, and the effect is similar to the SEO of PC web pages. The sitemap.json file is used配置小程序页面是否允许 微信索引. When the developer allows WeChat to index, WeChat will index the page content of the mini program in the form of a crawler. When the user's search keywords successfully match the page's index, the mini program's page will likely be displayed in the search results.

{
    
    
  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
    
    
  "action": "allow",
  "page": "*"
  }]
}

Tip:
The index prompt of sitemap is默认开启. If you need to turn off the index prompt of sitemap, you can configure it in the mini program project configuration file is’s configuration fieldproject.config.json’ssettingcheckSiteMapfalse

4.5 Page .json configuration

---

Each page in the applet can be matched with .json 文件 to 本页面的窗口外观进行配置, 页面中的配置项会覆盖 app.json的window中相同的配置项.

5. Create a new page

---

Create page process:

• Open the root directoryapp.json
• Find the pages configuration item
• Page creation

Tip:
        pages is an array configuration item. The syntax for creating a page is:"pages/文件夹名称/页面文件名称". According to the development specifications, 文件夹名称and页面文件名 are best kept consistent. For example: "pages/test/test". 默认排在第一位的页面是首页. After refreshing, the creation is completed. A folder containing 4个 files will be generated in the pages file, namely 样式文件 and 模板文件 , 数据文件, 页面配置JSON文件.

6. wxml and wxss in the page directory

---

6.1 wxml

       WXML (WeiXin Markup Language) is a set of small program framework design标签语言，用来构建小程序页面的结构, its function is similar to HTML in web development. The vernacular is a development template.

The difference between WXML and HTML:

1. Tag names are different:

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

2. The attribute nodes are different:

<a href="#">超链接</a>
<navigator url=" /pages/ home/home"></navigator>

3. Provides template syntax similar to Vue:

• data binding
• List rendering
• Conditional rendering

---

6.2 wxss

       WXSS (weixin Style Sheets) is a set of样式语言 used to describe WXML component styles, similar to CSS for web development.

The difference between WXSS and CSS

1. Added rpx size unit

   • In CSS, pixel unit conversion needs to be performed manually, such as: rem;
   • WXSS supports the new size unit rpx at the bottom layer, and the applet will automatically perform conversions on screens of different sizes.

2. Provides global styles and local styles

   • app.wxss in the project root directory will be used for all mini program pages
   • The .wxss style of the local page only takes effect on the current page

3. WXSS仅支持部分CSS选择器

.class和#id

element

并集选择器、后代选择器

::after和::before等伪类选择器

7. Classification of mini program js

---

Three major categories:

1. app.js

   is整个小程序项目的入口文件, start the entire applet by callingApp()函数

2. The .js file of the page

   is the entry file of page, by calling the Page() functionTo create and run the page

3. Ordinary .js file

   Used to encapsulatecommon function module files, used to encapsulatepublic functions or attributes< /span>For page use

8. Host environment of mini program

---

8.1 What is a hosting environment?

宿主The environment refers to程序运行所必须的依赖环境.

WeChat applet宿主环境isWeChat Android APP

8.2 Contents included in the mini program hosting environment

1. communication model
2. Operating mechanism
3. components
4. API

8.3 Communication model of mini program hosting environment

8.3.1 Communication entity

The communication subject of the mini program isrender layerandlogic layer:

• WXML and WXSS styles work inrender layer
• JS works inlogic layer

8.3.2 Communication model

The communication model in the mini program is divided into two parts:

1. render layerandlogic layercommunication between
   • There is a WeChat client for forwarding
2. logic layerandthird party servercommunication between
   • Forwarded by WeChat client

8.4 Mini program operating mechanism

8.4.1 Mini program startup process

1. Download the mini program code package locally
2. Parse app.js global configuration file
3. Execute the app.js applet entry file,Call App() to create an applet instance
4. Rendering applet home page
5. Mini program startup completed

8.4.2 Page rendering process

1. Load the .json configuration file of the parsed page
2. Load the .wxml template and wxss style of the page
3. Execute the .js file of the page,Call Page() to create a page instance
4. Page completes rendering

9. Components

---

WeChat Mini Program official website component documentation: https://developers.weixin.qq.com/miniprogram/dev/component/button.html

9.1 Component classification

---

Mini program components are provided by the host environment, with a total of9 categories:

1. 视图容器
2. 基础内容
3. 表单组件
4. 导航组件
5. media component
6. map map component
7. canvas canvas component
8. Open functions
9. Accessibility

Tip: The first four components are more commonly used!

9.2 Commonly used view components

---

9.2.1 view

• Normal view area
• Similar to the div box in HTML, it is a block-level element
• Commonly used to achieve page layout effects

view - basic usage

To achieve the flex horizontal layout effect:

<!--pages/list/list.wxml-->
<view class="container1">
	<view>A</view>
	<view>B</view>
	<view>C</view>
</view>

/*WXSS样式文件代码*/
/* 父容器-视图容器 */
.container1{
    
    
	display: flex;
	justify-content: space-around;
}
.container1 view{
    
    
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
}
/* 3个子元素盒子 */
.container1 view:nth-child(1){
    
    
	background-color: lightgreen;
}
.container1 view:nth-child(2){
    
    
	background-color: lightskyblue;
}
.container1 view:nth-child(3){
    
    
	background-color: lightcoral;
}

9.2.2 scroll-view - visual scrolling

• Scrollable view area
• Commonly used to achieve scrolling list effects

scroll-view - basic usage

Vertical scroll - scroll-y

<!--pages/list/list.wxml-->
// scroll-y="true" 开启允许纵向滚动
<scroll-view class="container1" scroll-y="true">
	<view>A</view>
	<view>B</view>
	<view>C</view>
</scroll-view>

/* 父容器-视图容器 */
.container1{
    
    
	/* display: flex;
	justify-content: space-around; */
	border:1px solid red;
	/* 给scroll-view 固定高度 */
	height: 120px;
	width: 100px;
}
.container1 view{
    
    
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
}
/* 3个子元素盒子 */
.container1 view:nth-child(1){
    
    
	background-color: lightgreen;
}
.container1 view:nth-child(2){
    
    
	background-color: lightskyblue;
}
.container1 view:nth-child(3){
    
    
	background-color: lightcoral;
}

9.2.3 swiper and swiper-item carousel

---

• 轮播图容器组件and轮播图item组件

<!-- 轮播图区域 -->
<!-- indicator-dots属性：显示面板指示点 -->
<swiper class="swiper-container" indicator-dots="true">

<!-- 第一项 -->
<swiper-item>
	<view class="item">A</view>
</swiper-item>
<!-- 第二项 -->
<swiper-item>
	<view class="item">B</view>
</swiper-item>
<!-- 第三项 -->
<swiper-item>
	<view class="item">C</view>
</swiper-item>

</swiper>

/* 父容器-视图容器 */

.swiper-container{
    
    
	/* 轮播图容器的高度 */
	height: 150px;
}

.item{
    
    
	height: 100%;
	line-height: 150px;
	text-align: center;
}

/* 3个子元素盒子 */
.swiper-item:nth-child(1).item{
    
    
	background-color: lightgreen;
}

.swiper-item:nth-child(2).item{
    
    
	background-color: lightskyblue;
}

.swiper-item:nth-child(3).item{
    
    
	background-color: rgb(250, 135, 141);
}

swiper common properties

---

Attributes	type	default value	illustrate
indicator-dots	boolean	false	Whether to display panel indicator points
indicator-color	color	rgba(0,0,0,.3)	Pointer color
indicator-active-color	boolean	#000000	The color of the currently selected indicator point
interval	number	5000	Automatic switching interval milliseconds
autoplay	boolean	false	Whether to switch automatically
circular	Boolean	false	Whether to use connection sliding

Common properties

	Attributes	type	default value	Required	illustrate	Minimum version
	indicator-dots	boolean	false	no	Whether to display panel indicator points	1.0.0
	indicator-color	color	rgba(0, 0, 0, .3)	no	Pointer color	1.1.0
	indicator-active-color	color	#000000	no	The color of the currently selected indicator point	1.1.0
	autoplay	boolean	false	no	Whether to switch automatically	1.0.0
	current	number	0	no	The index of the current slider	1.0.0
	interval	number	5000	no	Automatic switching time interval	1.0.0
	duration	number	500	no	Slide animation duration	1.0.0
	circular	boolean	false	no	Whether to use connection sliding	1.0.0
	vertical	boolean	false	no	Whether the sliding direction is portrait	1.0.0
	display-multiple-items	number	1	no	Number of sliders displayed simultaneously	1.9.0
	easing-function	string	“default”	no	Specify swiper to switch the easing animation type	2.6.5
	Legal value description default default easing function linear linear animation easeInCubic ease-in animation easeOutCubic ease-out animation easeInOutCubic ease-in and ease-out animation
	bindchange	eventhandle		no	The change event will be triggered when current changes, event.detail = {current, source}	1.0.0
	bindtransition	eventhandle		no	When the position of swiper-item changes, the transition event will be triggered, event.detail = {dx: dx, dy: dy}. Skyline only supports non-worklet component methods as callbacks.	2.4.3
	bindanimationfinish	eventhandle		no	The animationfinish event will be triggered when the animation ends, event.detail is the same as above. Skyline only supports non-worklet component methods as callbacks.	1.9.0

Skyline unique properties

	Attributes	type	default value	Required	illustrate	Minimum version
	scroll-with-animation	boolean	true	no	Use animated transitions when changing current	2.29.0
	cache-extent	number	0	no	Cache area size, a value of 1 means rendering one screen area above and below in advance (swiper container size)	2.29.0
	worklet:onscrollstart	worklet		no	Triggered when sliding starts, only supports worklet as callback. event.detail = {dx: dx, dy: dy}
	worklet:onscrollupdate	worklet		no	Triggered when the sliding position is updated. Only worklets are supported as callbacks. event.detail = {dx: dx, dy: dy}
	worklet:onscrollend	worklet		no	Triggered when the slide ends. Only worklet is supported as a callback. event.detail = {dx: dx, dy: dy}

WebView specific properties

	Attributes	type	default value	Required	illustrate	Minimum version
	previous-margin	string	"0px"	no	Front margin, can be used to expose a small part of the previous item, accepts px and rpx values	1.9.0
	next-margin	string	"0px"	no	Back margin, can be used to expose a small part of the back item, accepts px and rpx values	1.9.0
	snap-to-edge	boolean	false	no	When the number of swiper-items is greater than or equal to 2, when circular is turned off and previous-margin or next-margin is turned on, you can specify whether this margin should be applied to the first and last elements.	2.12.1

** changeincident source reply**

Starting from1.4.0, change events have addedsource fields , indicating the reason for the change, possible values ​​are as follows:

1. autoplayAutomatic playback causes swiper changes;
2. touchThe user's swipe causes the swiper to change;
3. Other reasons will be represented by an empty string.

Bug & Tip

1. tip: If is used in the event callback function of bindchange to change the value, it may cause to determine whether it is caused by user touch. . field before changing the value of is called constantly, so usually please check the setDatacurrentsetDatacurrentsource
2. tip: On the Mac applet, if the page where the current component is located or the enablePassiveEvent configuration item is enabled globally, the built-in component may behave unexpectedly (for details, please refer to the official page)enablePassiveEvent Documentation

9.2.4 Commonly used basic content components

---

9.2.4.1 text

• text component
• Similar to the span tag in HTML, it is an inline element

Basic usage of text component

Description of abilities: text.

1. Inline text can only use the text component, not the view, such as foo bar
2. Added span component for inline text and images, such as bar

Common properties

	Attributes	type	default value	Required	illustrate	Minimum version
	selectable	boolean	false	no	Whether the text is optional (deprecated)	1.1.0

Skyline unique properties

	Attributes	type	default value	Required	illustrate
	overflow	string	visible	yes	Text overflow handling
	Legal value description clip trim text fade out ellipsis display ellipses visible text is not truncated
	max-lines	number		yes	Limit the maximum number of lines of text

WebView specific properties

	Attributes	type	default value	Required	illustrate	Minimum version
	user-select	boolean	false	no	Whether the text is optional, this attribute will cause the text node to be displayed as inline-block	2.12.1
	space	string		no	Show consecutive spaces	1.4.0
	Legal value description ensp Chinese character space half size emsp Chinese character space size nbsp Space size set according to font
	decode	boolean	false	no	Whether to decode	1.4.0

Bug & Tip

1. tip: decode can parse: < > & '    
2. tip: The space standards of various operating systems are not consistent.
3. tip:text Only support within the framework text Enclosure .
4. tip: Nodes other than text nodes cannot be selected by long pressing.

---

9.2.4.2 rich-text - component

• Rich text component
• Supports rendering HTML strings into WXML structures

Description of abilities:Fu Bunbon.

1. Supported since base library version 2.33.0 (except 3.0.0).
2. Following skyline's style and layout rules, html tags are mapped to nodes similar to text/span/view, so there is a text nesting problem.
3. Table layout tags such as td/tr and text layout tags such as bdo/bdi are not supported. It is recommended to completely use layout methods supported by skyline such as flex to create rich text content.
4. An optional compatibility layout mode option is provided mode, but 100% consistent behavior with WebView is not guaranteed.
5. Under the 2.33.0 base library, please avoid using class names starting with wx-rich-text for html tags as much as possible.

<view>
<rich-text nodes="<h1 style='color:red'>标题</h1>"/>
</view>

Common properties

	Attributes	type	default value	Required	illustrate	Minimum version
	nodes	array/string	[]	no	Node list/HTML String	1.4.0
	space	string		no	Show consecutive spaces	2.4.1
	Legal value description ensp Chinese character space half size emsp Chinese character space size nbsp Space size set according to font
	user-select	boolean	false	no	Whether the text is optional, this attribute will cause the node to be displayed as block	2.24.0

Skyline unique properties

	Attributes	type	default value	Required	illustrate
	mode	string	default	no	layout compatibility mode
	Legal value description default completely follows the default behavior of skyline and does not make any changes to the node tree. compat maps tags to the form 的形式。通常最接近 webview 的表现。aggressive所有 tag 均被映射为形如 as much as possible. inline-block Experimental inline-block layout strategy, but cannot achieve line wrapping.

nodes: Now supports two types of nodes, distinguished by type, namely element nodes and text nodes. The default is element nodes, HTML nodes displayed in rich text areas< /span>

Element node: type = node

Attributes	illustrate	type	Required	Remark
name	tag name	string	yes	Support for partially trusted HTML nodes
attrs	Attributes	object	no	Supports partially trusted properties, following Pascal nomenclature
children	List of child nodes	array	no	The structure is consistent with nodes

Text node: type = text

Attributes	illustrate	type	Required	Remark
text	text	string	yes	Support entities

Trusted HTML nodes and attributes

The class and style attributes are supported globally, The id attribute is not supported.

node	Attributes
a
abbr
address
article
aside
b
bdi
bdo	you
big
blockquote
br
caption
center
cite
code
col	span，width
colgroup	span，width
dd
of the
div
dl
dt
in
fieldset
font
footer
h1
h2
h3
h4
h5
h6
header
hr
i
img	alt，src，height，width
ins
label
legend
that
mark
are not
ol	start，type
p
pre
q
rt
ruby
s
section
small
span
strong
sub
sup
table	width
tbody
td	colspan，height，rowspan，width
tfoot
th	colspan，height，rowspan，width
thead
tr	colspan，height，rowspan，width
tt
in
ul

Bug & Tip

1. tip: String type is not recommended for nodes, and performance will be degraded.
2. tip: rich-text Masks events of all nodes in the component.
3. tip: attrs attribute does not support id but supports class.
4. tip: The name attribute is not case sensitive.
5. tip: If an untrusted HTML node is used, the node and all its child nodes will be removed.
6. tip: The img tag only supports online images.
7. tip: If the rich-text component is used in a custom component, only the wxss style of the custom component will take effect for the class in rich-text.