0. Common components
Swiper Wechat built-in rote map component
WeChat built-in shuffling photo components: developers.weixin.qq.com/miniprogram… Swiper only swiper-Item components can be placed in swiper; otherwise undefined behavior will occur. Each swiper-item is a container for storing images, which can be used as a loop for practical applications. Note: Swiper’s default height is 150px
Navigator navigation component
Navigation components, similar to a label: developers.weixin.qq.com/miniprogram… The URL attribute is not added, but it does not jump
Redirect Mode: Redirects the previous historical page to another page when you click the icon in the upper left corner
Rich-text Indicates a rich text label
The rich text labels: developers.weixin.qq.com/miniprogram… You can parse strings into labels, similar to the V-HTML statement in VUE: Nodes =’ element/text node ‘
nodes
Not recommendedString
Type, performance will be degraded.rich-text
Mask all node events within the component.attrs
Attribute does not support ID, but class.name
The property is case-insensitive.- If you use an untrusted
HTML
Node and all of its children will be removed.img
The label supports only network images.
The button button
Button document open-type=’contact
Open-type =’share’ Triggers user forwarding
Open-type =’getPhoneNumber’ Obtains the user’s mobile phone number
Open-type =’getUserInfo’ To obtain user information
Radio radio buttons
Radio buttons: developers.weixin.qq.com/miniprogram… If the value doesn’t exist, it gets an empty string wrapped around the radio-group and it’s considered a group, it’s mutually exclusive, it can also trigger events
The checkbox boxes,
Boxes: developers.weixin.qq.com/miniprogram… A wrap in a radio-group can trigger an event with the same properties as a checkbox
tabBar
Many applications TAB: developers.weixin.qq.com/miniprogram… Note:
The path that pagePath receives should not be preceded by a slash list. At least two and at most five selectedcolors are placed under the tabBar object
1. Customize components
Custom components: developers.weixin.qq.com/miniprogram… WXML, WXSS, json, js, WXSS, WXSS True, this method is not the same as pages, this recovery is written in a special location like vue, no longer scattered
Use applets
The configuration JSON file on the page declares that the key value represents the component alias and the value represents the component path
Edit component
Slot Indicates a slot, similar to the slot in vUE
In the component’swxss
File to write styles
Note: ID selectors, attribute selectors, and tag name selectors should not be used in component WXSS.
The father the son
The father the son: developers.weixin.qq.com/miniprogram… The parent component passes parameters to the child component as properties
Child the parent
When a custom component fires an event, the triggerEvent method is used to specify the event name and detail object
2. Applets life cycle
App life cycle, define app.js page life cycle, defined in the respective page JS
Application life cycle
Application lifecycle: developers.weixin.qq.com/miniprogram… OnLaunch is triggered only once, and onShow is unlimited. OnLaunch usage scenarios: Obtain the user’s location and authorize the user to use onShow: for example, when the user opens the application again and refreshes the data
OnError Application scenario: Collect exception logs when the network is abnormal
Page life cycle
The application life cycle is triggered when the page declaration cycle is triggered, and the application starts when the page is closed or destroyed
Page({
// Initial data for the page
// Lifecycle function -- listens for page loading
onLoad: function (options) {
// options gets page parameters. Option is an object
// Use scenario: Send network request here
console.log('page onLoad', options)
},
// Lifecycle function -- listens for the page to finish rendering for the first time
onReady: function () {
// Scene: Get the page element
console.log('Page onReady trigger')},// Lifecycle function -- listens for page display
onShow: function () {
console.log('page onShow')},// Lifecycle function -- listens for page hiding
onHide: function () {
console.log('page onHide')},// Lifecycle function -- listens for page unloads
onUnload: function () {
// Scenario: Timer clearing
console.log('page onUnload')}})Copy the code
3. Check whether the component or API is available
Judge small application API, callback, the parameters of components such as whether in the current version available: developers.weixin.qq.com/miniprogram…
4. Initiate a network request
A network request: developers.weixin.qq.com/miniprogram… Not a browser kernel, so don’t use Windows, Ajax, XHM, etc
If the following error is displayed, the requested domain name is not added to the trusted domain name
Method 1: “small program background – development – Development Settings – Server domain name” to configure mp.weixin.qq.com/
Method 2: If you use test numbers, you can ignore checks in the developer Settings
Network request method
The setData function is used to send data from the logical layer to the view layer (asynchronously) and change the corresponding value of this.data (synchronously). Directly modifying this.data without calling this.setData cannot change the state of the page and will cause data inconsistency
wx.request({
url: 'Requested address'.method: 'post'.// The default is get request
success: (res) = > { // Successful callback}})Copy the code