Table of contents
Chapter 1 Features of Mini Programs
1.1 Overview of Mini Program Features
1.2 Mini Program Configuration
Global configuration: app.json
Page configuration: page name.json
sitemap configuration: sitemap.json
1.3 Mini Program Framework Interface
Pass parameters to the event object
Import data into templates and use data
Corresponding stage description
Official website icon description
Chapter 4 Mini Program Key Knowledge Summary
4.1 Mini Program Local Storage
Official website corresponding address
4.2 Front-end and back-end interactions of mini programs
Official website corresponding address
4.3 Mini Program Page Communication
Message Subscription Publishing
4.4 Mini Program Custom Components
4.5 Small programs use npm packages
4.6 Mini Program Obtains Basic User Information
4.7 The applet obtains the user's unique ID (openId)
4.8 Small program subcontracting process
Official website corresponding address
4.9 Mini Program Forwarding and Sharing
Chapter 1 Features of Mini Programs
1.1 Overview of Mini Program Features
1.
No
DOM
2.
Component-based development: a collection of codes with specific functional effects
3.
The volume is small, and the volume of a single compressed package cannot be greater than
2M
, otherwise it cannot be online
4.
Four important files of the applet
a) *.js
b) *.wxml ---> view
structure
----> html
c) *.wxss ---> view
style
-----> css
d) *.json ----> view
data
-----> json
file
5.
Small program adaptation scheme
: rpx (responsive pixel
responsive pixel unit
)
a)
Small program adaptation unit:
rpx
b)
Specifies that the bottom width of any screen is
750rpx
c)
The applet will automatically calculate
the size of the
rpx value according to the width of the screen
d) Under
Iphone6 :
1rpx = 1
physical pixel
= 0.5px
1.2 Mini Program Configuration
Global configuration: app.json
1.
Function: Used to set options for the entire application
3. With pictures :
Page configuration : page name.json
1.
Function
:
used to configure the specified page
3.
Note
:
The priority of the page configuration is higher than that of the global configuration
4.
With pictures
:
sitemap configuration : sitemap.json
1.
Function: Used to be crawled by WeChat search
3.
With pictures
:
1.3 Mini Program Framework Interface
App
1.
Execute App() in
the global
app.js
2.
Generate the instance object of the current application
3. getApp()
to get the global application instance
Page
1.
Execute Page() in
page.js
2.
Generate an instance of the current page
3.
Get the page instance
through
getCurrentPages
Chapter 2 wxml Syntax _
2.1 Data Binding
Initialization data
In the data option of the
page.js
use data
1.
Use double braces
{
{message}} in the template structure
2.
Points to note
:
In the applet, it is a single data flow
model ---> view
change the data
2.2 Event Binding
Event Classification
1)
Bubble event
a)
Definition: Bubble event: When an event on a component is triggered, the event will be passed to the parent node.
b)
List of bubbling events:
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html
2)
Non-bubbling events
a)
Definition: When an event on a component is triggered, the event will not be passed to the parent node.
b)
Non-bubbling events: Form events and custom events are usually non-bubbling events
bind event
1.
bind
binding:
event binding does not prevent bubbling events from bubbling up
<view bindtap="handleTap" class='start_container'>
<text class='start'>开启小程序之旅</text>
</view>
2.
catch
binding
:
event binding can prevent bubbling events from bubbling up
<view catchtap="handleTap" class='start_container'>
<text class='start'>开启小程序之旅</text>
</view>Pass parameters to the event object
1.
Grammar:
data-key=value
2. 获取: event.target.dataset.key || event.currentTarget.dataset.key
3. The difference between Event.target and event.currentTarget
a) Event.target is the object that triggers the event, but it is not the same as the object that binds the event, such as: event delegation, bubbling
b)
The object of the currentTarget trigger time must be the object bound to the event, there is no event delegation
2.3 list rendering
Grammar Description
1. wx:for=’{
{arr}}’
2. wx:key='{
{
unique value
}}'
Precautions
1.
The default individual
: item
2.
Default subscript
: index
3. Customize individual variable name: wx:for-item='myItem'
4. Custom subscript variable name: wx:for-index='myIndex'
2.4 Conditional rendering
Grammar Description
1. wx:if='
condition
'
2. wx:elif='
condition
'
3. wx:else
wx:if VS hidden
1. hidden
用法
: <view hidden=’{
{true}}’ ></view>
2.
Difference: w x : If is displayed when true, hidden is displayed when false. w x : if does not render when hidden, and hidden still renders when hidden, just not rendered.
2.5 Template usage
define template
import template
1.
Import template structure
: <import src='
template structure relative path
' />
2.
Import template style
: @Import '
template style path
'
use template
Import data into templates and use data
2.6 Life cycle
Corresponding stage description
1. onLoad(Object query)
a)
Triggered when the page loads. A page will only be called once, and can
be opened in the parameters of
onLoad
Parameters in the path of the current page.
b)
parameters:
Name Type Description
query Object Open the parameters in the path of the current page
2. onShow()
a)
Triggered when
the page is displayed
/ cut to the foreground
b)
will be executed multiple times
3. onReady()
a)
Triggered when the initial rendering of the page is completed. A page will only be called once, which means that the page is ready.
Can interact with the view layer.
4. onHide()
a) Triggered when
the page hides
/
cuts into the background.
Such as
wx.navigateTo
or the bottom
tab
to switch to other pages, and the applet to switch to the background, etc.
5. onUnload()
a)
Triggered when the page is unloaded. Such as
wx.redirectTo
or
wx.navigateBack
to other pages.
Official website icon description
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle. html
Chapter 3 Mini Program API
3.1 API instructions
1.
The applet provides many practical methods for developers to use
2.
The global object of the applet is
: wx
3.
All
APIs
are stored in the
wx
object
3.2 Common APIs
1.
Interface interaction
a)
Display message prompt box
: wx.showToast()
b)
Display message loading box
: wx.showLoading()
c)
Close the message prompt box
: wx.hideToast()
d)
Close the message loading box
: wx.hideLoading()
2.
Routing jump
a) wx.navigateTo()
b) wx.redirectTo()
c) wx.switchTab()
3.
Network request
a) wx.request()
4.
Local storage
a) wx.setStorage()
b) wx.setStorageSync()
c) wx.getStorage()
d) wx.getStorageSync()
5.
Media
a) wx.getBackgroundAudioManager()
b) wx.playVoice()
3.3 Quick Find Skills
1.
Beginners of Mini Programs may have no clue about the many contents of the official website of Mini Programs, and do not know where to start.
to find what you want
2.
When you want to achieve a certain layout in the applet, check: component
3.
When you want to implement a certain function in the applet, check
: API
4.
When you want to perform a certain configuration or a certain page syntax in the applet, check
:
framework
+
guide
5. Be careful when viewing the official website of the Mini Program. It is best to
read the relevant content of the API
to be used completely, because
the API
More configuration and restrictions
Chapter 4 Mini Program Key Knowledge Summary
4.1 Mini Program Local Storage
Grammar Description
1.
Store data
a) wx.setStorage()
is asynchronous
b) wx.setStorageSync()
synchronization
2.
Read data
a) wx.getStorage()
is asynchronous
b) wx.getStorageSync()
synchronization
3.
Delete data
a) wx.removeStorage()
is asynchronous
b) wx.removeStroageSync()
synchronization
4.
Clear data
a) wx.clearStorage()
is asynchronous
b) wx.clearStorageSync()
synchronization
Precautions
1.
Unless the user actively deletes or is cleared by the system due to storage space reasons, the data is always available
2.
The maximum data length allowed for
a single
key is
1MB
3.
All data storage is limited to
10MB
Official website corresponding address
https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorage.html
4.2 Front-end and back-end interaction of small programs
Grammar Description
1. wx.request()
related configuration
1.
Each WeChat applet needs to set the communication domain name in advance, and the applet can only communicate with the specified domain name
2. Please configure the server domain name in "Mini Program Background
-
Development
-
Development Settings
- Server Domain Name"
3.
Both the default timeout and the maximum timeout are
60s
4.
The timeout period can
be configured through networktimeout in
app.json
Precautions
1.
For security reasons, the applet only supports
Https
requests
2.
The maximum concurrency limit of wx.request
is
10
Official website corresponding address
https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorage.html
4.3 Mini Program Page Communication
Routing parameters
1.
Pass parameter method
a)
In the routing address
+ query
to pass parameters
b)
Example:
url?a=123
2.
Get parameters
a)
Obtained from the options parameter in the onLoad function
of the jump target page
Message Subscription Publishing
1.
Use a third-party library
: pubsub-js
2.
Installation
: npm install pubsub-js
3.
Use:
a) Import PubSub from ‘pubsub-js’
b)
Subscribe message
: PubSub.subscribe('eventName', callback)
c)
Publish message
: PubSub.publish('eventName', data)
d)
Unsubscribe
: PubSub.unsubscribe('eventName')
eventChannel event channel
1.
Subscribe to events
a) When wx.navigateTo()
jumps,
define the event name and the callback corresponding to the event in the
events option
2.
Get the event bus object
a)
Passed in the target page
:
instance.getOpenerEventChannel
()
b)
Example
: const eventChannel = this.getOpenerEventChannel()
3.
Trigger events
a) eventChannel.emit('
event name
', data)
4.4 Mini Program Custom Components
Create components
1.
Right-click to create a new component in the development tool
2.
Set in the json file
corresponding to the component
: component: true
use components
1. Register the component in the
json file
of the page
using the component
4.5 Small programs use npm packages
Initialize package.json
npm init
Check to allow the use of npm
The latest version of WeChat developer tools does not require
download npm package
npm install packageName
build npm
1.
Development tools
--->
tools
--->
build
npm
2.
The package in node_modules
will be packaged
into miniprogram_npm
4.6 Mini Program Obtaining Basic User Information
1.
Set the
open-type
attribute of the Button component to
getUserInfo
2. <button open-type=’getUserInfo’></button>
3.
After the first login after setting, click
the button
to pop up the authorization window
4.
Note: The authorization action only happens once, unless the cache is cleared, click
butotn
once to authorize and then click
Invalid, no authorization window will pop up
5.
Official website corresponding address
https://developers.weixin.qq.com/miniprogram/dev/component/button.html
Obtain after authorization
1. wx.getUserInfo()
2.
Official website corresponding address
: https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUse rInfo.html
4.7 The applet obtains the user's unique ID ( openId )
Official website diagram
Get the process
1. wx.login()
2. Send the code to the server
3. The server sends a request with parameters (code, appSecret, appId) to the WeChat server to obtain the openId
a)
Interface address
:
4. appSecret and
appId
are obtained on the homepage of the mini program
5. After the server obtains the openId , it encrypts and returns it to the front end
Get interface address
Request method:
GET
https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECR
ET&js_code=JSCODE&grant_type=authorization_code
4.8 Small program subcontracting process
Why subcontract
1.
The small program requires that the size of the compressed package should not exceed
2M
, otherwise it cannot be released
2.
If the size of the small program in the actual development is larger than
2M
, you need to use the subcontracting mechanism to publish and upload
3.
After subcontracting,
the 2M
limit can be solved, and the content can be subcontracted and loaded to improve performance
4.
After subcontracting, the volume of a single package cannot exceed
2M
5.
After subcontracting, the volume of all packages cannot exceed
16M
Subcontract form
1.
Conventional subcontracting
2.
Independent subcontracting
3.
Subpackage pre-download
conventional subcontracting
1. The developer
declares the project subpackage structure
in the
app.json subpackages field
2.
Features:
a)
When loading the applet, the main package is loaded first, and the content of the subpackage is only loaded when the page of the subpackage needs to be accessed
b)
Subpackage pages can access resources such as files, data, and pictures in the main package
c)
Main package:
i.
Source of main package: All content except subpackages will be packaged into the main package
ii.
Usually place the startup page
/tabBar
page
independent subcontracting
1.
Set
independent
to
true
2.
Features
:
a)
The independent subpackage can access the content of the subpackage independently, without downloading the main package
b)
Independent subpackages cannot depend on the contents of the main package or other packages
3.
Usage scenarios
a)
Generally, some pages can be subcontracted independently when they are not closely related to other pages of the current applet
b)
Such as: Advertisement page temporarily added
||
event page
Subpackage pre-download
1.
Configuration
a)
Set the
preloadRule
option in app.json
b) key (
page path
): {packages: [
pre-downloaded package name
||
root path of pre-downloaded package
])}
2.
Features
:
a)
When loading the current package, you can set to pre-download other packages
b)
Shorten user waiting time and improve user experience
Official website corresponding address
https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html
4.9 Small program forwarding and sharing
share realization
1. Button
component set
open-type
to
share
2. <button open-type=’share’ ></button>
Customize shared content
1. Set custom content in the return object
in the onShareAppMessage callback
in
the lifecycle callback
Set experience permissions
1.
During the development stage, share it with WeChat friends. By default, there is no experience permission, and the sharing applet cannot be opened. It needs to be developed
page settings
2.
Add up to
15
WeChat friends