subPackages Subpackage loading
Because the main package size of the mini program does not exceed the 2M limit, it is a good choice to use subpackage. The total subpackage size does not exceed 8M. You can add multiple Sub-package, sub-package loading can optimize the download time when the mini program is first started. When you enter the sub-package page and then download, this on-demand loading can extract some large amounts of data and put it into sub-packages (such as the chart)
rpx unit,
The most commonly used adaptation method for mobile terminals is to use rem or vw as the unit for adaptation, so the WeChat applet provides rpx The unit adapts
Authorization pop-up window
wx.getUserInfo interface adjustment. In the past, you could directly call and display the authorization pop-up window. Now you need to use Click to guide the user to authorize. The official version of the wx.getUserInfo interface of the mini program has been adjusted. The trial version and development version can still use the original method.
Native component z-index
The level of the native component is the highest, so no matter what the z-index is set to, other components in the page cannot Covering the native components can be solved by cover-view, but in some specific environments such as swiper or pop-up windows, the native components need to be hidden and hidden. You need to use hidden to use
pseudo-elements
The pseudo-element attributes of the mini program cannot be seen in the WeChat developer tool css attributes, so when some component styles cannot be overridden (such as the border of a button or some line settings), it is because the pseudo-element ::after is set, so pseudo elements must be used to cover
Page stack
An application can only open 5 page stacks at the same time. When 5 have been opened After the page is opened (the current limit is 10 levels), new pages may not be opened normally. wx.navigateTo jump will retain the current page, wx.redirectTo will not, so please avoid multi-level interactions to use the jump method appropriately
Componentization
emplate module and component component are components in small programs. The difference between the two is that the template module is mainly for display, and the methods need to be defined in the page using the template. The component component has its own js file, and the entire component component is similar to a page. To put it simply, it is just for display. It is recommended to use template. There is a lot of logic involved in the component. It is recommended to use component
Debug
1. Developer tool source break Click debugging, console.log to print data and AppData to view data
2. Mini program pay attention to the current debugging basic library version to debug some compatibility and bug issues
3. Mini program is first in the development version Or open the debugging display vConsole in the upper right corner of the trial version, and then switch to the official version to see the vConsole mode
Data transfer
1. Use data cache, wx.setStorage With wx.getStorage, the stored data can only be in string format, so generally you need to use JSON.stringfy to convert the object to a string when setting it up, and use JSON.parse to restore it to the object when getting it
二, wx.navigateTo jumps to pass parameters, and splices the string after jumping to the url. In the onLoad() function, obtain the passed parameters through options.parameter name. Note that if there are special characters (such as ?#, etc.), you can Use encodeURIComponent and decodeURIComponent to encode and decode, otherwise it will be truncated, resulting in the data behind the special characters not being transmitted
3. The getCurrentPages() function is used to obtain the instance of the current page stack. You can obtain the page stack or Modify page stack data
4. getApp() can obtain global objects and methods
Navigation bar capsule alignment adaptation
The navigation bar is generally customized, which is more flexible and controllable. First, you need to set navigationStyle: custom in app.json, and then use the mini program wx.getMenuButtonBoundingClientRect() to obtain the location information of the capsule menu in the upper right corner, but this interface is unstable. , some models will have a bug that fails to obtain, so use wx.getSystemInfo to get the status bar height of the device (that is, the height of the mobile phone time and battery column), the title bar height (that is, including the navigation return key, title and capsule Height) The default setting is 48 for Android and 44 for ios (the default capsule of the applet is 48px in the center of the title bar in Android. Because there are many Android categories, there will be a slight difference. The ios is 44px in the center of the title bar). The total height of the navigation bar The height of the title bar is the height of the status bar. The padding-top height is the height of the status bar. The elements in the title bar are vertically aligned to fit and align with the capsule. When setting the content height, you can use calc (100vh - the total height of the navigation bar) to change the style. Place it in the global app.wxss
unionid identification
Unionid is the cross-program identification of mini program users. To have a unionid, you first need to bind the WeChat open platform (WeChat open platform - management platform - mini program - bind mini program), because the unionid is distributed by the WeChat open platform. When the mini program is bound to the WeChat open platform, there will be no unionid. When the unionid of different mini programs is different, the mini program needs to be mounted to the same subject. For the same user, for different applications under the same WeChat open platform, the unionid are the same
The background returns the unionid to the front end: first wx.login obtains the user login credential code, then wx.getSetting checks whether it is authorized, wx.getUserInfo obtains the user information, and sends it to the background through the encrypted field of the user information The WeChat server returns the unionid in return. Since the data returned by the request may be returned after Page.onLoad, a callback is usually added (getting the unionid is usually placed in onLaunch of app.js, so a callback is needed to process it and the data of the page onLoad. Obtain)
Interface request
It is recommended to extract all requests into the same api.js, which can facilitate later modification and troubleshooting. Mini program requests are made through The WeChat backend requests our backend address for backend mapping. The interface you requested is actually mapped to the WeChat backend. The WeChat backend gets the URL called by your wx.request and uses the backend to request the backend. So there will be no cross-domain problems
input keyboard
Consider using different types in different scenarios, such as text keyboard and numeric keyboard to improve user experience
wux-weapp
Wux-weapp is more recommended for small program components. It has rich components and flexible expansion.
Recommended tutorial: "WeChat Mini Program"
The above is the detailed content of Summary of knowledge points on WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

Zend Studio 13.0.1
Powerful PHP integrated development environment

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.